2022 铁人赛｜Day3 【Javascript】var, let, const

附上为何铁人赛文章会出现在这里的说明：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

简介：

JavaScript ES6 以前宣告变数的方式具 Function Scope 特性，意思是如果在 Function Scope 用 var 宣告变数，该变数只能在 Function Scope 取用，不能在其他地方取用

var myName = 'Kim';function greeting() {  var greet = 'Hi';  console.log(`${greet} ${myName}.`);}console.log(myName); // print: Kimconsole.log(greet); // Uncaught ReferenceError: greet is not defined

要留意的是，如果在其他 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

同样的变数命名可以重複使用，这可能导致莫名使用到同样的名称而不知道，于是前一个变数被覆盖(override)

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

.

let

简介：

JavaScript ES6 以后宣告变数的方式具 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

同一层作用域，不可重複宣告相同的变数

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

在不同作用域宣告的相同名称变数，为不同的变数

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

可在 Block Scope 为 Global Scope 的变数重新赋值

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

.

const

简介：

JavaScript ES6 以后宣告变数的方式具上述let的 2. & 3. 特性在使用const宣告变数时，就要赋予初始值(Initial value)

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

宣告后的变数，不能再更改 （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

---

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