JavaScript 重要觀念 - var、let、const 差別

今天來說說前端新手容易搞混但很重要的 var、let、const。

在 JS 更新 ES6 以前，我們宣告變數都是使用 var，比如說 var a = 1，很多舊的教學也都是這樣使用。

但在 ES6 之後，JS 推出了新的語法 let、const。至此我們宣告變數都會使用 let a = 1 或 const b = 2。

對於新手在自學 JS 的情況下，可能在網路上的文章或影片，一下看到 var，一下又看到 let、const，卻又不知道他們的具體差異和使用時機，今天就讓我來幫助你一次搞清楚它們的不同！

整篇文章的架構會分為：

1. 變數提升 Hoisting

變數提升 hoisting

為了搞清楚 var、let、const 的差別，我們要先知道 var 的一些特性，其中之一就是變數提升 Hoisting。

只要是用 var 宣告的變數都會被提升到程式碼的最頂端，甚麼意思呢？來看下面的例子：

console.log(a);
var a = 1;

你會發現控制台的輸出是 undefined，這是因為用 var 宣告的變數會等同於下面這樣：

var a;
console.log(a); // undefined
a = 1;

備註：undefined 是 JS 裡的一種型別，並不會報錯，程式碼還是會繼續運行下去

包括在函數或是迴圈中，用 var 宣告變數一樣有變數提升的效果：

function hoisting() {
  console.log(b);
  var b = 2;
}

hoisting(); // undefined

// 等同於

function hoisting() {
  var b;
  console.log(b);
  b = 2;
}

重複宣告變數

var 還有一個特性是，可以重複宣告相同的變數，比如說：

var a = 1;
var a = 2;

console.log(a); // 2

變數提升和重複宣告變數是 var 的特性，接著讓我們看看 let 和 const 吧！

ES6 的 let、const

let 和 const 是 ES6 之後才新增的東西，和 var 一樣是用來宣告變數的。和 var 不同的是，它們既沒有變數提升，也不可以重複宣告變數，來看看下面的例子：

console.log(a);
let a = 1;
// Uncaught SyntaxError: Unexpected identifier 'Uncaught'

會發現程式碼直接報錯了，這是因為 let 和 const 讓變數在宣告之前，不能使用它，事實上這也是良好的打 code 習慣。

除了沒有變數提升，let 和 const 也不能重複宣告：

let b = 1;
let b = 2;
// Uncaught SyntaxError: Identifier 'b' has already been declared

重複宣告相同的變數會直接報錯，告訴你說 b 已經被宣告過。這樣的好處是程式碼變的更嚴謹。

let 和 const 的差別

let 和 const 唯一的差別是，const 在宣告賦值之後，就再也不能改變它的值了，比如說：

const c = 1;
c = 2;
// Uncaught TypeError: Assignment to constant variable.

宣告後再更改值它會直接報錯。

除了不能更改值以外，要注意用 const 宣告變數的同時就要賦值了：

// 錯誤
const d;
d = 1;

// 正確
const d = 1;

const 的好處是可以告訴其它工程師說，這個值是固定的，不能更改，也更增加程式的嚴謹性，在宣告不需要更改值的變數時，使用 const 是好習慣喔。

備註：`const` 是英文的 constants，意思是保持不變的

var 的缺點

對於新手來說可能會覺得 var 比較好用，程式碼都不會報錯，但也正是因為這樣，讓程式碼變得很不嚴謹，當專案比較大的時候，維護就會變得很困難。比如說，我們在一開始宣告一個變數叫做 userId，中間經過一大串程式碼之後，我們很容易忘記 userId 有沒有被宣告過，所以在後面要使用時，可能就會重複宣告了一次，像下面這樣：

var userId = 1;

/**
 * 中間一堆程式碼
 */

var userId = 2;

這樣的程式碼會讓後續的維護變困難，因為不曉得這個 `userId` 的值到底是多少，也不清楚它的值是否能做更動。

所以在這種情況下，因為 id 的值通常是固定的，更建議使用 const 來宣告喔：

const userId = 1;

小結

今天稍微講了 var、let、const 的差別，主要差在變數提升以及重複宣告，而 const 宣告的值就不能再更改了。

如果你是自學前端的新手，趕快改掉使用 var 的習慣吧！用 let 和 const 會讓程式碼更嚴謹，維護上更容易！