前言

昨天最後的題目，不知道大家解開了嗎？下面的程式中，有幾個變數、幾個型別、幾個記憶體？

var a;
a = 1;
a = "a字串"
a = true;

答案是一個變數(a)、三個型別(數字、字串、布林值)，以及四個記憶體。那麼我們要繼續推進今天的學習囉！

var、let、const

在昨天的學習中，我們知道可以使用 var 來宣告一個變數，但當你實際去看別人寫的程式，可能會發現，咦？有些人用的是 let ，有人用了 const ，這三個詞中間的差別在哪裡？

沒錯，這三個字都是用來宣告變數。但是，用法上可就不盡相同。

var 是裏頭最早被用來宣告變數的，用法並不嚴謹，有些地方甚至有點奇妙。舉例來說，當你在 {} 裡宣告一個東西，在 {} 外仍能取得資料。文字很難說明，讓我們直接進入程式：

{
  var c = 1;
}
console.log(c); //印出1

咦？我 console.log 沒有放在括弧裡還能印出 c 的值？還不只這個哩！ var 還有其他特性，來看看昨天的範例：

var a = 5; 
var b = 6;

console.log(a); 
console.log(b);

你想如果我把 console.log(a) 跟 (b) 放到 var 前面會發生什麼事？

console.log(a); 
console.log(b);

var a = 5; 
var b = 6;

印出了 undefined ？雖然程式的世界可能不太一樣，但以文章來說都馬是從上讀到下，我現在還沒宣告 a 跟 b 是誰，為什麼可以劇透得知有 a 跟 b 的存在？

這個劇透行為，我們稱呼為變量提升 hoisting 不是便量，也不是變亮謝謝。意思是，用 var 宣告的變數，就算是寫在很下面，也會一起被提到程式最前面。記得我們昨天講解 chrome 看到的程式跟我們不一樣嗎？當我們給他上面的程式，他看到的長成這樣：

var a;
var b;

console.log(a); 
console.log(b);

a = 5; 
b = 6;

沒錯， var a 和 var b 都被拿到最上面去了。欸，雞婆欸，有考慮過我就是故意寫在最下面的嗎？

再來一個例子：

var d = 1;
var d = 2;
console.log(d); //印出2

我先宣告 d 是 1 ，再宣告他是 2 。額，可以這樣重複宣告嗎？萬一我不小心用到之前宣告過的名字...

為此，誕生了 let 與 const 。就像我們使用的語言會不斷更新，每隔一陣子程式語言也會更新，而 JS 也在 2015 年提出 ES6 這個新規範， let 和 const 便是 ES6 提出的新語法。

let 和 const 使用塊級作用域，因此使用上比 var 嚴謹。在我們剛剛提到的第一個例子{}中，如果使用 let 和 const，無法在{}外面拿到資料，並會跳出錯誤訊息。

{
  let e = 1;
}
console.log(e); //錯誤訊息:Uncaught ReferenceError: e is not defined

第二個變量提升的例子，也在 let 和 const 中做了修正，必須要宣告後才可使用。

console.log(f);
let f = 5; //錯誤訊息:Cannot access 'f' before initialization

當然，也不能重複宣告囉！如果重複宣告他會告訴你，你用的變數名稱之前就被宣告過了。

let g = 1;
let g = 2;
console.log(g); //錯誤訊息:Identifier 'g' has already been declared

最後，則是 let 和 const 的差別。若你使用的是 const ，那麼宣告的當下就要給他一個值，這個值可以是數字、函式、陣列、物件，但如果是數字的話，宣告後就不可以更動了。

什麼意思？請看：

/*數字不可動
const h = 11;
h = 14; //錯誤訊息:Assignment to constant variable.
*/

//函式、陣列、物件可更動
const j = { name: "wang" };
j.name = "lin";
console.log(j); //Object {name: "lin"}

const k = { name: "tang" };
k.age = 15;
console.log(k); //Object {age: 15,name: "tang"} //也可加入資料

ES6 提出的還有很多新語法，如果迫不及待想認識，可以閱讀官方文件和其他人撰寫的文章。我這邊會搭配順序，分開介紹其他 ES6 的語法。讓我們來統整一下今天的學習：

現在，讓我們一起來練習看看，在下面的題目中，會出現正確答案還是錯誤訊息呢？

//習題一
let q1 = 10;
q1= 20;

//習題二
let q2 = 10;
let q2 = 20;

//習題三
const q3 = 10;
q3=20;

學習與參考資料

JS 學徒特訓班教學影片及練習題 37-38 關
JavaScript ES6 Block Scope - let, const：https://www.fooish.com/javascript/ES6/let-const-block-scope.html
JS 筆記 - ES6 let 與 const 特性：https://hsuchihting.github.io/javascript/20200713/1088942586/