JS Day 37: Var, Let and Const

• var：宣告變數
• let ：宣告只作用在當前區塊的變數
• const：宣告常數

var & let

{
  var a = 'A';
  let b = 'B';
    const c = 'C';
}
console.log('var a: ' + a);
console.log('let b: ' + b);
console.log('let c: ' + c);

// output
// "var a: A"
// ReferenceError: b is not defined
// ReferenceError: c is not defined

用 var 來宣告一個全域變數，let & const 的作用域僅 scope 限於 { ... } 區塊。

作用域 (Scope)

• var: function { }
• let: block

// var
function varTest() {
  var x = 1;
  {
    var x = 2; // 覆蓋掉上方的 1
    console.log(x);  // 2
  }
  console.log(x);  // 2
}

// let
function letTest() {
  let x = 1;
  {
    let x = 2;  // 跟上方的 let x = 1; 不相干
    console.log(x);  // 2
  }
  console.log(x);  // 1
}

var 作用範圍是「整個」function。

for loop 作用域

for (let i = 0; i < 5; i++) {
    console.log(i);
};

console.log(i);

// output
// 1
// 2
// 3
// 4
// ReferenceError: i is not defined

let i 在 for loop 裡頭才有計次效用，在 { ... } 外呼叫會得到 ReferenceError 錯誤， i 並沒有被宣告。

for (var i = 0; i < 5; i++) {
  // var 全域
    console.log(i);
};

console.log(i);

// output
// --- LOOP 開始
// 0
// 1
// 2
// 3
// 4
// --- LOOP 結束
// 5   { ... } 外面呼叫 i 得到的結果

一樣意思, 使用 var 的話 setTimeout 取到的 i 是 window.i 的 i = 10

for (var i = 0; i < 10; i++) {  
  // var 全域
  console.log('for loop 的 i: ' + i);

  setTimeout( function() {
    console.log('第' + i + '次');
  }, 1000);
}
console.log('i 是 ' + i);

上下兩者的執行結果是一樣的

for (var i = 0; i < 10; i++) {  
  // var 全域
  console.log('for loop 的 i: ' + i);
}
console.log('i 是 ' + i);

setTimeout( function() {
  console.log('第' + i + '次');
}, 1000);

把 var 改成 let

for (let i = 0; i < 10; i++) {  
  // let 作用域是 block
  console.log('for loop 的 i: ' + i);

  setTimeout( function() {
    console.log('第' + i + '次');
  }, 1000);
}
console.log('i 是 ' + i);

setTimeout 取到的 i 值是 block 裡頭的 i = 9, function scope 外則是 not defined。

switch 作用域

switch (x) {
  case 0:
    let foo;
    break;

  case 1:
    let foo; // SyntaxError for redeclaration.
    break;
}

switch 的作用域為整個 switch (綠色框框)，裡面重複宣告 let foo 會出現 Syntax Error: redeclaration of let foo。

重複宣告

var a = 0;
var a = 1;
var a = 2;
console.log(a); // 2

var 可以重複宣告。

let a = 0;
let a = 1;
console.log(a); // SyntaxError: redeclaration of let a

在 switch 作用域 有提到，let 無法重複宣告。

// 那這樣子呢？
var a = 0;
let a = 1;
console.log(a); // SyntaxError: redeclaration of var a

a 已經被宣告過了， let 不允許再次宣告。

const

確定不會重新宣告一個 變數 時，使用 const。

const a = 10;
const name = 'Bob';

// 重新賦予值
a = 20; // TypeError: invalid assignment to const 'a'
name = 'Will';  // TypeError: invalid assignment to const 'name'

一定要賦予值

const 要宣告一個常數，之後不能夠再修改了，所以在一開始一定要賦予值給它。

var a;
let b;
const c;  // SyntaxError: missing = in const declaration

Reference:
ECMAScript 6 入門: let 和 const 命令
重新認識 JavaScript: Day 10 函式 Functions 的基本概念
我知道你懂 hoisting，可是你了解到多深？