附上為何鐵人賽文章會出現在這裡的說明：2022 鐵人賽｜Day1 報名失敗，還是要開賽吧！

背景脈絡

學習 JavaScript 必定要認識 var, let, const 這三種宣告變數(declare variable)的方式。筆者在學習的過程，可能學習階段的關係，所以分好幾次的學習才有學通的感覺，希望這次可以完整且有邏輯的介紹它們，順便檢核自己的學習。

主題筆記

一、先認識作用域(Scope)

Global Scope

。 在 function 與 block 以外的區域就是 Global Scope
。 在此宣告的變數可以在任何作用域中被取用

Function Scope (A.K.A. Local Scope)

。 寫在 function 裡的區域
。 在此宣告的變數只能在這裡使用

Block Scope

。 用大括號{}括住的區域（可以想到的是有用到大括號的情況：function、if/else、while、for...）
。 在此宣告的變數只能在這裡使用 （但僅限於用 let、const 宣告的變數，不包含 var）

⬆️ 請忽略 function 的參數 people 存在的意義 xd

二、再認識 var, let, const

var

簡介：

1. JavaScript ES6 以前宣告變數的方式
2. 具 Function Scope 特性，意思是如果在 Function Scope 用 var 宣告變數，該變數只能在 Function Scope 取用，不能在其他地方取用

var myName = 'Kim';

function greeting() {
  var greet = 'Hi';
  console.log(`${greet} ${myName}.`);
}

console.log(myName); // print: Kim
console.log(greet); // Uncaught ReferenceError: greet is not defined

3. 要留意的是，如果在其他 Block Scope 使用 var，它是屬於 Global Scope 的

if (true) {
  var myName = 'Kim';
}

console.log(myName); // print: Kim

for(var i = 0; i < 3; i++) {
  console.log(i) // print: 0、1、2
}
console.log(i) // print: 3

4. 同樣的變數命名可以重複使用，這可能導致莫名使用到同樣的名稱而不知道，於是前一個變數被覆蓋(override)

var myName = 'Kim';
var myName = 'Kitty';
console.log(myName); // expect print: Kitty

.

let

簡介：

1. JavaScript ES6 以後宣告變數的方式
2. 具 Block Scope 特性，意思是如果在 Block Scope 用 let 宣告變數，該變數只能在 Block Scope 取用，不能在其他地方取用

for(let i = 0; i < 3; i++) {
  console.log(i) // print: 0、1、2
}
console.log(i) // Uncaught ReferenceError: i is not defined

3. 同一層作用域，不可重複宣告相同的變數

let myName = 'Kim';
let myName = 'Kitty'; // Uncaught SyntaxError: Identifier 'myName' has already been declared
console.log(myName); 

4. 在不同作用域宣告的相同名稱變數，為不同的變數

let myName = 'Kim';

if (true) {
  let myName = 'Kitty';
  console.log(myName); // expect print: Kitty
  myName = 'Kate';
  console.log(myName);// expect print: Kate
}

console.log(myName); // expect print: Kim

5. 可在 Block Scope 為 Global Scope 的變數重新賦值

let myName = 'Kim';

if (true) {
  myName = 'Kate';
}

console.log(myName); // expect print: Kate

.

const

簡介：

1. JavaScript ES6 以後宣告變數的方式
2. 具上述let的 2. & 3. 特性
3. 在使用const宣告變數時，就要賦予初始值(Initial value)

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

4. 宣告後的變數，不能再更改 （for primitive values）

const myName = 'Kim';
myName = 'Kitty'; // Uncaught TypeError: Assignment to constant variable.

.

三者都通的特性

• 子層可以存取到父層的變數，而父層存取不到子層的變數

let myName = 'Kim';

if (true) {
  console.log(myName); // expect print: Kim
  let myHobby = 'Climb the moutain';
}

console.log(myHobby); // Uncaught ReferenceError: myHobby is not defined

• 但要留意var是具 Function Scope 特性，所以只有是否在 function 內才會影響到它子父層的判定

⬇️ 在 function 內

var myName = 'Kim';

function greeting() {
  var greet = 'Hi';
  console.log(`${greet} ${myName}.`); // print: Hi Kim.
}

greeting();
console.log(greet); // Uncaught ReferenceError: greet is not defined

⬇️ 不在 function 內，而是別的 Block

var myName = 'Kim';

if (true) {
  var greet = 'Hi';
  console.log(`${greet} ${myName}.`); // print: Hi Kim.
}

console.log(greet); // print: Hi

三、var, let, const 該用哪個？

學習至今的心得是，如果要減少 bug 產生...
✅ 建議都使用 const，除非很確定變數會改變的話就使用let
⚠️ 不要使用 var

參考資料

[JS學徒特訓班] JavaScript ES6 : var, let, const 差異
The Complete JavaScript Course 2022: From Zero to Expert! Unit 92 & 93

以上是今天的分享，謝謝看完的你！