前情提要

「我想确认一下，入门魔法都是加 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 必修篇 - 前端修练全攻略(六角学院)