JavaScript-ES6-let

JavaScript-ES6-let

ES6 新增了let語法，用來宣告變數。它的用法類似var，但是所宣告的變數，let語法只在所在的代碼區塊内有效。

let語法只在所在的代碼區塊内有效 - Example

{
  let a = 10;
  var b = 1;
}

a // ReferenceError: a is not defined.
b // 1

for迴圈適合用let語法定義

for (let i = 0; i < 10; i++) {
  // ...
}

console.log(i);
// ReferenceError: i is not defined

for迴圈特殊用法

for (let i = 0; i < 3; i++) {
  let i = 'abc';
  console.log(i);
}
// abc
// abc
// abc

上述例子印出三次abc，表示(let i = 0) 和 let i = 'abc';
兩者屬於不同區塊

let宣告必須在使用變數前宣告，否則報錯

// var 的情况
console.log(foo); // 輸出undefined
var foo = 2;

// let 的情况
console.log(bar); // 報錯ReferenceError
let bar = 2;

let語法宣告在區塊內的變數，就會綁定在區塊內，不受外部影響

var tmp = 123;

if (true) {
  tmp = 'abc'; // ReferenceError
  let tmp;
}
-----------------------------------
typeof x; // ReferenceError
let x;
-----------------------------------
// no error
var x = x;

// error
let x = x;
// ReferenceError: x is not defined

let語法不允許在同個區塊內，重複宣告

// error
function func() {
  let a = 10;
  var a = 1;
}

// error
function func() {
  let a = 10;
  let a = 1;
}

------------------
function func(arg) {
  let arg;
}
func() // error

function func(arg) {
  {
    let arg;
  }
}
func() // no error

ES6-let

function f1() {
  let n = 5;
  if (true) {
    let n = 10;
  }
  console.log(n); // 5
}
-----------------------
// IIFE 寫法
(function () {
  var tmp = ...;
  ...
}());

// ES6-寫法
{
  let tmp = ...;
  ...
}

優先使用function expression

// 優先使用function expression
{
  let a = 'secret';
  let f = function () {
    return a;
  };
}

有 { } 就有區塊

// error
if (true) let x = 1;

// no error
if (true) {
  let x = 1;
}