昨天終於讓按鈕會做事了！

原本只是想讓網頁上的文字改變，結果寫著寫著，又看到兩個熟悉的傢伙：
javascript:

const btn = document.querySelector("#btn");
let index = 0;

嗯……

let 跟 const 都看過，也都用過。

但有時候寫程式還是會突然停下來想：

所以這個變數到底要用 let 還是 const 啊？？？

既然昨天已經碰到了，今天就順便把它們抓出來重新認識一下 XD

先來看看 let

如果今天想記錄自己喝了幾杯水：
javascript:

let water = 1;

console.log(water);

結果：
text:

1

喝完第二杯之後：
javascript:

water = 2;

console.log(water);

結果就會變成：
text:

2

因為 let 宣告的變數，可以在後面重新指定值。

簡單來說：

今天喝一杯，明天喝兩杯，數字可以一直改。

當然不要真的喝到把自己灌成水桶啦 XD

const：說好是你，就不能突然換人！

再來換成 const：
javascript:

const name = "小明";

console.log(name);

結果：
text:

小明

如果突然想改成：
javascript:

name = "小華";

JavaScript 就會直接報錯：
text:

TypeError: Assignment to constant variable.

因為 const 宣告之後，不能再重新指定值。

不是欸！昨天還叫小明，今天突然變小華，你是在演八點檔是不是？？？

所以如果一個變數後面不需要重新指定值，就可以優先使用 const。

等等，const 不是不能改嗎？

看到這裡，我原本以為：

const = 裡面的東西永遠不能改。

結果今天又看到這段：
javascript:

const cat = {
  name: "咪咪",
  age: 2
};

cat.age = 3;

console.log(cat);

結果：
text:

{
  name: "咪咪",
  age: 3
}

蛤？？？

你不是說不能改嗎？怎麼貓咪又長大了？？？

原來 const 限制的是變數不能重新指定成另一個值。

如果變數存的是物件，還是可以修改物件裡面的屬性。

例如：
javascript:

cat.age = 3;

這樣是可以的。

但如果想直接把整個物件換掉：
javascript:

cat = {
  name: "小橘",
  age: 1
};

就會報錯。

因為這已經不是修改原本的物件，而是想讓 cat 重新指向另一個物件。

好啦。

原來 const 不是不准貓咪長大，是不准你直接換一隻貓 XD

那 var 又是哪位？

既然都講到變數了，當然不能忘記這位老前輩：
javascript:

var message = "Hello";

以前的 JavaScript 很常使用 var。

但現在一般開發時，通常會優先使用 let 跟 const。

其中一個原因就是作用域。

來看一個例子：
javascript:

if (true) {
  var a = 10;
  let b = 20;
}

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

結果text：

10

ReferenceError: b is not defined

蛤？

大家明明都住在 if 裡面，為什麼只有 a 可以跑出來？？？

因為 var 是函式作用域，而 let 是區塊作用域。

簡單來說，let 在 {} 區塊內宣告後，通常就只能在那個區塊裡使用。

但 var 不會因為一般的 if 區塊就被限制住。

這也是為什麼現在寫程式時，通常不需要再特別使用 var。

不然變數到處亂跑，又要開始抓人了 ==

所以我現在到底要怎麼選？

重新整理之後，我目前會先這樣記：

如果今天變數不需要重新指定：

const name = "小明";

就先用 const。

如果後面真的需要更新：

let count = 0;

count = count + 1;

就用 let。

至於 var……

老前輩辛苦了，今天先不用麻煩您上班 XD

回頭看看昨天的按鈕

昨天做的按鈕裡面有這幾行javascript：

const btn = document.querySelector("#btn");

const messages = [
  "今天也是努力活著的一天 XD",
  "你是不是又在摸魚？",
  "不要再按了啦！！！"
];

let index = 0;

現在重新看就比較清楚了。

btn 不需要重新指定，所以用 const。

messages 這個陣列也不需要重新指定，所以用 const。

但 index 每按一次按鈕就需要更新 javascript：

index = index + 1;

所以使用 let。

原來昨天寫的東西，今天又可以拿出來複習一次。

這就是所謂的前一天挖坑，後一天自己填嗎 XD

今天的小心得

今天原本只是想重新整理 let 跟 const。

結果連 var 都一起抓出來了。

最後幫自己留一句最簡單的：

不需要重新指定值 → const

需要重新指定值 → let

至於 const 裡面如果放的是物件或陣列，也要記得：

不能重新指定，不代表裡面的內容完全不能修改。

下次看到 javascript：

const cat = {
  name: "咪咪"
};

就不要再以為這隻貓連名字都不能改了。

不然貓咪本人應該也會很困惑：

「蛤？我改個名字也不行喔？？？」

好啦，今天先到這裡。

Day 15，完成！

明天再繼續看看 JavaScript 還有什麼東西想拿出來重新整理。

希望不要又是一群變數跑出來開同學會 XD