1
2024-06-12
#JavaScript

var, let, const 差別

最近在整理剛學 JS 時寫的筆記,雖然現在回頭看,很多內容都已經懂了,但還是決定把它寫成文章記錄起來,也許能幫到一些剛學 JS 的人。

#表格比較

letconstvar
作用域blockblockfunction
可重複宣告
可改變值

#let

1. 不可重複宣告

例如以下程式碼,會得到錯誤:Uncaught SyntaxError: Identifier 'drink' has already been declare
表示這個語法有誤,因為 drink 已經被宣告過了

let drink = 'tea';
let drink = 'milk';

2. 可以改變值

let drink = 'tea';
drink = 'milk';

3. block(區塊)作用域

  • 區塊指的就是 {},像 function, if else, for loop 都會用大括號刮起來,這個大括號就是一個區塊
  • 變數的作用範圍只在 block 裡
let c = 3;
function decideC() {
  let c = 4;
  console.log('in', c);
}
decideC();
console.log('out', c);

結果:

in 4
out 3

因為是 block 作用域,所以可以在裡面再宣告一個 c,let c = 4 只存在在 {} 裡,並不影響外面的 c

#const

1. 不可重複宣告

像 let 一樣 ,會出現錯誤,表示已經被宣告過了

2. 不可以改變它的值

會出現錯誤 Uncaught TypeError: Assignment to constant variable.
const 本來就是用來宣告一個不變的常數,當然不允許改變它的值。

3. block 作用域

像 let 一樣,變數的作用範圍只在 block 裡

function foo1() {
  if (true) {
    const user = 'Iris';
  }
  console.log(user);
}
foo1();

會得到 Uncaught ReferenceError: user is not defined

#var

1. 可重複宣告

像這樣寫的語法是有效的

var name = 'Bob';
var name = 'Bobby';

2. function 作用域

變數的作用範圍只在 function 裡\

var 是 function 作用域,不是 block 作用域,別搞混了~
因現在 var 很少用了,有時會忘記這件事。

下面範例,在 if 裡面宣告 user 變數,還是能讀到 user 的值。
但由於是 function 作用域的關係,變數的作用範圍只在 function 裡,在 function 外就無法取得 user 值。

function foo2() {
  if (true) {
    var user = 'Taylor';
  }
  console.log(user); // Taylor
}
foo2();
console.log(user); // user is not defined
main*
© 2024 All Rights Reserved. IRIS Studio