HTML、CSS、JAVASCRIPT 總算是學到一個段落，現在終於可以開始學前端框架 React 了，就順便把先前放在 notion 的 JS 草稿筆記重新梳理，也可把過往匆匆學習沒有完全理解的部分透過寫文章的方式，再完整的理解一次！
那就先從最基礎的宣告變數開始吧！
宣告變數的二個主要關鍵字是：let、const
其實還有一個 var，但現在已經不常用也不建議用了，下面再解釋
let：
用來宣告會「經常變動數值」的變數，就是可以修改變數成其他數值，並且它只能在自己的作用域有效用，也不可以重複宣告，以下用範例來解釋各特性：
1. 可以修改變數的值 ( 即重新賦值 )
一開始宣告 a = 2，後來 a 變成了 a + 1，所以最後變數 a 就不是一剛開始定義的 2，而是修改後的 3
let a = 2;
a = a + 1;
console.log(a); // a = 32. 有函數作用域和區塊作用域的限制
變數 a 在 function 函數作用域內，所以變數 a 只在這個作用域內有效用，在外面就無效了，除非將變數 a 宣告在外面，變成全域變數，這樣就不論是哪個作用域可以用
PS: 作用域就是 { } 框起來內的，若是用函數包起來的稱為函數作用域；若是 if、for 包起來的稱為區塊作用域
function hi() {
let a = 1;
console.log(a); // a = 1
}
console.log(a); // 顯示錯誤，宣告的變數只在自己的作用域有效 ( 函數作用域 )變數 a 只會在離自己最近的作用域有效用，以這個例子來說，變數 a 在離自己最近的 if 區塊作用域內去做宣告，所以在 if 區塊作用域外就會無效用
function hi() {
if (true) {
let a = 1;
console.log(a); // a = 1
}
console.log(a); // 顯示錯誤，宣告的變數只在自己的作用域有效( 區塊作用域 )
}3. 同一個作用域不可以重複宣告
不同的作用域可以重複宣告變數，但同一個作用域不可重複宣告變數，此處的 a 在同一個全域裡，所以不可以重複宣告
let a = 2;
let a = 5;
console.log(a); // 顯示錯誤，同個作用域不可重複宣告const：
用來宣告會「必定不能變動」的變數 ( 可以稱為常數 )，就是該變數只能是一剛開始定義的值，不可以再修改，並且它只能跟 let 一樣只能在自己的作用域有效用。習慣上也會用全大寫字母來定義變數名稱 ( 非必要作法，只是比較好辨識 )，以下用範例來解釋各特性：
1. 不可以修改變數的值
數學數 PI = 3.14 就很適合用 const 來宣告，因為是固定的，不會再隨意變動的值
const PI = 3.14;
PI = 5;
console.log(PI); // 顯示錯誤，不可以變更值2. 有函數作用域和區塊作用域的限制
變數 PI 在 function 這個函數作用域內，所以變數 PI 只能在自己的作用域內有效用，在外面就無效了，區塊作用域同理 ( 跟 let 一樣 )
function square(){
const PI = 3.14;
console.log(PI); // PI = 3.14
}
console.log(PI); // 顯示錯誤，宣告的變數只在自己的作用域有效 ( 函數作用域 )3. 同一個作用域不可以重複宣告
不同的作用域可以重複宣告變數，但同一個作用域不可重複宣告變數 ( 跟 let 一樣 )
const A = 2;
const A = 5;
console.log(A); // 顯示錯誤，同個作用域不可重複宣告var：
最後一個就是 var，這個大概知道就好，在 ES6 以前只有 var 一個關鍵字，而且也無法區分該變數是否為常數，後來 ES6 以後有 let 和 const 來取代 var，因為 var 它有幾點特點會導致臭蟲：
1. 變數僅有函數作用域限制，卻沒有區塊作用域的限制
只要變數 a 在函數作用域內，不論是哪個區塊作用域都可以用，這樣會無法限制區塊內變數的範圍，這樣變數會混雜而導致意想不到的意外
function fn(){
if (true) {
var a = 1;
}
console.log(a); // a = 1
}2. 變數自動往上升
變數 a 會被往上提升至最上面，但初始化的值卻還在原本的地方，也不會告知錯誤，變數 a 僅會變成 undefined，很有可能導致臭蟲
→ 也可以理解成先宣告一個沒有值的變數 a，等執行 console.log 後才執行賦予值
console.log(a); // a = undefined
var a = 10;3. 同一個作用域可以重複宣告
在同一個作用域可以重複宣告變數，這樣會覆蓋之前的變數值，容易有錯誤
var a = 2;
var a = 5;
console.log(a); // a = 5以上，大致就這樣
總結：
宣告變數時，若是該變數有可能會再變動或賦予新值，就用 let；若是該變數確定不會再變動，就用 const，而 var… 忘了它吧，早點與它分手，寫 code 會更快樂ＸＤＤ
最後，剛好在寫這篇文章時，有看到這部影片的解說，蠻好理解的！