ECMAScript 之 Var

var 從 ES5 就存在，也是 ES5 的代表 keyword，看到 var 就可以判斷為 JavaScript。

但 var 在 ES6 有了一些改變，重要性也不若以往，TC39 甚至建議完全不要使用 var ，改用 let 與 const 。

Verson

ECMAScript 2015

Var

宣告變數於 function 內或 function 外 (global)。

• Scope ：為 execution context，分 function (function 內) 與 global (function 外)，而非 {}
• Auto Global ：若沒 var 一個變數，會自動 升級 成 global 變數 (ES5 ok、但 ES6 廢除)
• Undefined ：有 var 但未指定值，就是 undefined
• Hoisting ：無論你寫在 function 內第幾行，都會在 code 執行 前 先宣告變數
• Re-declare ：若重新 var 一個變數，原來的值仍會存在

Scope

scope01.js

function x() {
  var z = 2;
}

x();

console.log(z);
// ReferenceError

ES5 與 ES6 都無法執行。

z 的 execution context 為 function 內，所以 function 外部抓不到 z ，會在 run-time 跳出 ReferenceError 。

scope02.js

z = 2;

function x() {
  console.log(z);
}

x();
// ReferenceError

ES5 可執行，ES6 會噴 ReferenceError 。

在 ES5 允許 global variable 不使用 var 宣告變數，但 ES6 會啟動 strict mode ，儘管是 global variable，也一定要使用 var 。

Auto Global

auto-global.js

function x() {
  y = 1; 
}

x();

console.log(y);
// ReferenceError

ES5 可執行，ES6 會噴 ReferenceError 。

y 在 ES5 會自動升級為 global 變數，還是會印出 1 ，但 ES6 會啟動 strict mode ， y 無法升級成 global 變數，會在 run-time 跳出 ReferenceError 。

Undefined

undefined01.js

console.log(a);
console.log('still going...');
// RefferenceError

ES5 與 ES6 都無法執行。

Run-time ReferenceError ，因為 a 沒有 var 宣告。

undefined02.js

var a;
console.log(a);
console.log('still going...');
// undefined
// still going...

ES5 與 ES6 都可執行。

a 只宣告但沒有給值，因此為 undefined 。

ECMAScript 對於變數，沒有 預設值 ，也不是 null ，而是特有 undefined

有些瀏覽器為 ""

Hoisting

bla = 2;
var bla;

但實際執行時為

var bla;
bla = 2;

也就是無論是 ES5 或 ES6，都會自動將 var 移到程式碼的最前面先執行。

hoisting01.js

function foo() {
  console.log(bar);
  var bar = 111;
  console.log(bar);
}

foo();
// undefined
// 111

實際執行時

function foo() {
  var bar;
  console.log(bar);
  bar = 111;
  console.log(bar);
}

foo();
// undefined
// 111

無論 ES5 或 ES6，因為 var bar 會被 Hoisting 到 function 的最前面，因此為 undefined 。

hoisting02.js

var x = y, y = 'A';
console.log(x + y); 
// undefinedA

實際執行為

var x;
var y;
x = y;
y = 'A';
console.log(x + y);

因為 var y 會先被 Hoisting，所以 x = y 時， y 還是 undefined ，因此 x 也是 undefined 。

實務上建議一行只 var 一個變數

Re-declare

re-declare01.js

var x = 2;
console.log(x);

var x;
console.log(x);
// 2
// 2

ES5 與 ES6 都可執行。

實際執行為

var x;

x = 2;
console.log(x);

console.log(x);

因此 var x 被 Hoisting，所以結果都是 2 。

re-declare02.js

var x = 2;
console.log(x);

var x = 3;
console.log(x);
// 2
// 3

ES5 與 ES6 都可執行。

實際執行為

var x;
x = 2;
console.log(x);

x = 3;
console.log(x);

由於 Hoisting 機制，JavaScript 允許 re-declare。

C# 無法這樣寫，compile 就會報錯

Babel 可編譯也可執行，SonarQube 會抓出來

但實務上不建議使用 re-declare 機制

Conclusion

• 在 ES6，無論 function 內的 variable 或 global variable，一律要使用 var ，否則會噴 ReferenceError
• JavaScript 有獨特的 undefined ，只要變數沒有給定值都是 undefined
• 由於 JavaScript 獨特的 Hoisting 機制，導致變數宣告都集中在 function 的最前面，與 C# 不同
• 由於 Hoisting 機制，JavaScript 允許 re-declare，與 C# 不同，但 SonarQube 會抓到錯誤，且實務上不建議這樣寫

Sample Code

完整的範例可以在我的 GitHub 上找到

Reference

JavaScript MDN , var