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-timeReferenceError ，因為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

完整的範例可以在我的ofollow,noindex">GitHub 上找到

Reference

JavaScript MDN ,var