前情提要

「我想確認一下，入門魔法都是加 100 魔力總量嗎？」

艾草：「對唷！之後有中階魔法加比較多。」

「那如果想放炫酷的魔法，大概要多少魔力總量呀？」

艾草：「 ........。」

（一陣詭異的靜默後）

艾草：「 先求有，再求好，總之我們先來學變數宣告吧！」

「 欸欸，我說好歹先回答我吧！等等，不要無視人家啦～～～～～」

變數宣告 let、const、var

今天來介紹如何宣告變數吧！

你可以使用 let 、 const 、var 來宣告變數，那三者有何差異呢？

首先，我們先來談談 ES6 才新增的宣告方式 let 、 const ， 與 var 不同的地方在 let 、 const 作用域在區塊，區塊指的是大括號 {} 內，例如if 、for 迴圈等，而 var 的最小切分單位為 function。

let

如何用 let 宣告一個變數，讓我們用生活情境水果攤來發想。
今天你走到一個水果攤，看到好新鮮的蘋果，一顆 30 元，你決定使用變數把它記錄下來！

let applePrice = 30;

這樣就完成了用 let 宣告變數了，但用 let 也會有要注意的地方，像是你今天已經宣告過一樣名稱的變數，如果在重複宣告一次的話，會報錯！

let applePrice = 30;

//Uncaught SyntaxError: Identifier 'applePrice' has already been declared
let applePrice = 50; 

但我們都知道的，水果售價常常變動，如果我們不能重複宣告，要怎麼改售價呀？
你可以這樣寫：

applePrice = 50;

這樣寫就是重新賦予 applePrice 這個變數50元，所以我們知道 let 是可以重新賦予值的唷！

let 知識點：

• let 的作用域在區塊內
• let 不能重複宣告
• let 可以重新賦予值

在同一個作用域下使用 let 的方式不能重複宣告，請特別留意這一點！

const

const 跟 let 有何不同呢？讓我們一樣透過生活情境來發想吧！
但這次不用水果攤來發想了，因為水果物價波動很大，不太適合使用 const 宣告，我們就用大家巷口總在萬年打九折的店來宣告吧！

const sale = 0.9;

為什麼要用 const 來宣告很少變動的情境呢？因為與 let 不同的地方在， const 的值如果為基本型別的情況下，無法被重新賦予值，如下：

const applePrice = 30;
applePrice = 50; //Uncaught TypeError: Assignment to constant variable.

所以可以使用 const 來存放一些不容易被更動的變數。

想當然 const 也是無法被重新宣告的唷。

const sale = 0.9;

//Uncaught SyntaxError: Identifier 'sale' has already been declared
const sale = 0.8; 

const 還有值得注意的一點是，必須要給予值，如果不賦予值會報錯，如下：

const sale;//Uncaught SyntaxError: Missing initializer in const declaration

const 知識點：

• const 要給予值
• const 不能重複宣告
• const 在原始型別難以被重新賦予值

var

最後不得不提一下 var ，在 ES6 後新增了 let 、 const 宣告方式後，就很少使用到 var 了。
var 的宣告方式其實最寬鬆，它可以被重新賦予值、也可以重新被宣告。

var a = 2;
var a = 3;

你可能會遇到以下情況：
當你開心的寫 Code 結果不小心宣告了一樣的變數名稱時：
這是你：咦，哪泥？為啥剛剛寫好的地方怪怪的Σ( ° △ °|||)
還是你：我看一切都很正常呀 (@~@)?
最後發現！！！
原來是這個變數命名過了呀 (╯°Д°)╯︵┻━┻

而且 var 還有一個問題，那就是他會污染全域，關於區域跟全域的概念留待後續的文章。

var 踩雷點：

• var 可以重複宣告
• var 可以重新賦予值
• var 可以鍛鍊你的心性，讓你成為更好的人（誤

總結

作用域：

• let 、 const 的作用域為區塊作用域
• var 的作用域為函式作用域

重複宣告：

• let 、 const 不能重複宣告
• var 可以重複宣告

重新賦予原始型別的值：

• var 、let 可以重新賦予原始型別的值
• const 不能重新賦予原始型別的值

小練習

請問以下何種宣告方式會報錯呢？

//1
let a = 1;
a = 2;

//2
const b;

//3
let c = 3;
let c = 4;

//4
const d = 5;
d = 6;

//5
var e = 1;
var e = 2;

下一篇讓我們了解運算子的優先性與相依性吧！

參考文獻

JavaScript 必修篇 - 前端修練全攻略(六角學院)