# var 與 let的差異

在 JS 中，經常使用 var、let 和 const 這三種關鍵字來宣告變數。
這些關鍵字都可以用來宣告變數，但是它們之間存在一些差異。
下文中將重點介紹 var 和 let 的差異。

## 宣告方式



## 作用範圍(Scope)

var 和 let 的作用域不同。
在 ＪＳ 中，變數的作用域定義了變數在哪些程式區塊內可用。
在使用 var 關鍵字宣告變數時，變數的作用域是該程式碼區塊內，包括函數內。

**這種作用域稱為函數作用域。**

var : 以 function( ) 為作用範圍


這個範例中，x 變數在函數 varTest() 和 if 區塊內都是可用的，這是因為 var 關鍵字宣告的變數具有函數作用域，而不是區塊作用域。

在使用 var 關鍵字時，變數的作用域是包含它的函數或全域作用域。這意味著變數在函數或全域作用域中都是可用的。

如下範例，x 變數在全域作用域中宣告，並且在 varTest() 函數中被引用。那麽 x 變數在全域作用域和 varTest() 函數內部都是可用的。

let : 以 block { } 為作用範圍

在這個範例中，x 變數在 if 區塊內和函數 letTest() 內都是可用的，但這是兩個不同的變數。這是因為 let 關鍵字宣告的變數具有區塊作用域。

在這個範例中，x 變數在全域作用域中宣告，但在 letTest() 函數內部又被宣告。在 letTest() 函數中，x 變數的值為 2，而在函數外部，x 變數的值為 1。

這種作用域的行為可以幫助避免變數名稱的衝突，同時使程式碼更易於理解和維護。

## 變數提升(Hoisting)

在使用 var 關鍵字時，變數會被提升到函數或全域作用域的頂部。這意味著即使變數在程式碼中的位置在宣告之後，它們也可以在程式碼中的任何位置使用。這種行為可能會導致錯誤或難以理解的程式碼。


在這個範例中，變數 x 在它宣告之前被使用，但是由於變數提升的行為，x 變數在函數內部仍然是可用的，只是它的值為 undefined。這種行為可能會導致錯誤或難以理解的程式碼。

相反，使用 let 關鍵字時，變數不會被提升。變數只能在它們宣告之後使用。因此盡量不要使用var宣告，應使用let or const。


在這個範例中，變數 x 在它宣告之前被使用，但是由於 let 關鍵字的作用，x 變數在此時未定義，將導致 ReferenceError。

## 可重複宣告

使用 var 關鍵字可以在同一作用域中多次宣告同一變數，而不會產生錯誤。


在這個範例中，x 變數在函數 varTest() 中被宣告了兩次。這是合法的，並且 x 變數的值在最後一次宣告時被設置為 2（因為第二次的宣告覆蓋掉了第一次的宣告）。

但是在使用 let 關鍵字宣告變數時，就不允許在同一作用域中多次宣告同一變數。這可以避免錯誤和混亂。

> 總結

在 ＪＳ 中，使用 var 和 let 宣告變數須注意：

* var 關鍵字會將變數提升到函數或全域作用域的頂部，允許多次宣告同一變數，並且變數的作用域是包含它的函數或全域作用域。

* let 關鍵字，變數不會被提升，不允許多次宣告同一變數，並且變數的作用域限於包含它的區塊。使用 let 關鍵字可以避免變數提升和變數名稱衝突