變數宣告var、let、const的區別

但是老師教我用var宣告變數，但我也看到有同學用 let 與 const 宣告變數，這是怎麼一回事呢？

//建立一個變數郭靖(guoJing)
var guoJing;

也可以看到這樣：

//建立一個建立一個名為黃蓉(huangRong)的變數，給她'打狗棒法'的值
let huangRong = '打狗棒法';

//建立一個洪七公(hongQigong)的常數，給他「北丐」的值
const hongQigong = '北丐';

var、let、const這三兄弟到底有甚麼差別呢？

原來除了用var宣告變數之外，在ES6之後，變數區分為變數與常數，透過 var 與 let 宣告「變數」，透過const宣告「常數」。

var 和 let 最大的區別在於「作用域」不同，這一點我們先放在心上，之後再深入探討。

先來看看var：

//建立一個變數郭靖(guoJing)
var guoJing;
console.log(guoJing);
//未賦值，所以出現的結果為 undefined

guoJing = '降龍十八掌';
console.log('郭靖使出 ' + guoJing);
//結果為"郭靖使出 降龍十八掌"

guoJing = '空明拳';
console.log('郭靖使出 ' + guoJing);
//結果為"郭靖使出 空明拳"

var guoJing = '九陰真經';
//再次用var宣告 guoJing = '九陰真經';
console.log('郭靖使出 ' + guoJing);
//結果為"郭靖使出 九陰真經"

使用var的時候，同一個變數名稱可以再重新「宣告」，重新賦值。

再看看使用let的狀況：

//建立一個建立一個名為黃蓉(huangRong)的變數，給她'打狗棒法'的值
let huangRong;
huangRong = '打狗棒法';
console.log('黃蓉使出 ' + huangRong);
//結果為"黃蓉使出 打狗棒法"

huangRong = '落英神劍掌';
console.log('黃蓉使出 ' + huangRong);
//結果為"黃蓉使出 落英神劍掌"

let huangRong = '蘭花拂穴手';
//Uncaught SyntaxError: Identifier 'huangRong' has already been declared

使用 let 比使用 var 來宣告變數嚴謹，如果宣告時未賦值，並不會以undefined初始化，所以從宣告到初始化這段時間會無法使用，這個時間差稱為「暫時死區」。

let 能重複賦值，但是同一個變數名稱只能宣告一次，如果重複宣告會出現：

「Uncaught SyntaxError: Identifier ‘huangRong’ has already been declared」

提醒你已經用let宣告過這個變數了。

讓我們來試試const：

//建立一個洪七公(hongQigong)的常數，給他「北丐」的值
const hongQigong = '北丐';
console.log('洪七公是 ' + hongQigong);
hongQigong = '美食家';
//Uncaught TypeError: Assignment to constant variable.

const hongQigong = '美食家';
//Uncaught SyntaxError: Identifier 'hongQigong' has already been declared

const是用來宣告常數，也就是不會變動的常量，所以不能重複宣告，也不能重複賦值。

重複宣告會告訴你：

「Uncaught SyntaxError: Identifier ‘hongQigong’ has already been declared」

重複賦值則會提醒你：

「Uncaught TypeError: Assignment to constant variable.」

因為以上這些區別，使用var、let、const來宣告變數的時機與場景有不同的區別，語意上也有明確區分。