從零開始的程式奇幻之旅

一、定義

先看看 w3school 上寫的。

JavaScript variables are containers for storing data values.

舉例來說

var car = "BMW";

其中的 car 就是變數。

 

二、宣告變數

使用 var 宣告變數。 ES 6 以後還多了 let 和 const 宣告變數。

1. var

var 因 hoisting 特性，所宣告的變數，一律為全域變數，程式中任何地方皆可使用。

此概念於前一篇提到，再複習一次，用 var 宣告變數時，該變數自動成為物件容器的屬性。舉例來說，假設在瀏覽器執行環境下，宣告 var a = 1;（變數 a），你會在全域物件 window 底下找到屬性 a。

2. let 與 const

let 和 const 宣告的變數只有其所在的 scope 與其底下所有 scope 都能使用該變數。

var a = 10;
var b = 20;

if (a === 10) {
  var a = 101; // a is global
  let b = 202; // b is inside the if-block
  let c = 303; // c is inside the if-block
  var d = 404; // d is global

  console.log(a);  // a is 101
  console.log(b);  // b is 202
  console.log(c);  // c is 303
  console.log(d);  // d is 404
} 

console.log(a); // a is 101, not 10
console.log(b); // b is 20
console.log(c); // c is not defined
console.log(d); // d is 404

var 宣告變數為全域變數。反之，let 宣告不會變成全域變數（就算在函數外面用 let 宣告變數，該變數也不會是全域變數）。

let a = 10;
var b = 100;

console.log(window.a); // undefined
console.log(window.b); // b is 100

var 為全域宣告，所以使用上要小心，不然較大的 JavaScript 程式，其全域物件底下會有一堆變數/屬性，建議使用 let 宣告是比較好的作法。

 

三、宣告時需注意事項

1. 一段正在執行的程式碼，不會有相同的變數名稱。
2. 同一 scope 下，用 var 可以重複宣告相同名稱變數，但 let 和 const 不能重複宣告相同名稱變數。
3. 利用一個等號，賦予變數值（value）。
4. const 賦值後就不能再次賦值。
5. var 有 hoisting 特性（此部分下一篇說明）。

 

四、參考資料

1. w3school - JavaScript Variables
2. MDN - var