#筆記(JS) 關於var 、let、const和Hoisting

3 min readJul 25, 2020

2020.07.25

初學前端時，變數常常就是用var一用到底，直到ES6多了let和const這兩個好兄弟，就順便記錄一下用法，好讓自己回顧。

此篇重點:

一、let、const與var有何不同?

其中let與var最像吧，與var不同之處在於。

看看下面程式碼，也可以按F12試試看。

首先Let

if(1){
let name = "peter"
}
console.log(name)

這會印出 undefined，因為出了{}，let定義就失效了。

再來看看var

if(1){
var name = "peter"
}
console.log(name)

這會印出 peter，因為var 的作用域是function裡面，這個案例是在{}裡面，所以 var 定義的name 就變成全域變數了，所以取的到 name。

2.var 可以重複宣告，let 不行。

if(1)
{
 var a =1;
 var a =2;}

可以執行

let 在{}裡卻不能宣告兩次。

if(1)
{
 let a =1;
 let a =2;}

拋出錯誤，’’’a’has already been declared''

3.var 可以使用後再宣告，let只能宣告後再使用。

var 可以使用後再宣告，因為var 會有Hoisting 的現象，就是程式自動把var的變數與function放到最上方，再去執行剩餘的邏輯。

我們看到的:

fun()
function fun(){console.log('hi')
}

程式看到的

function fun(){console.log('hi')
}
fun()

懂嗎?Hoisting(提升)，把function 提升到程式最上方。

用var 定義變數也是如此，不過這邊要注意一下。

console.log(b)
var b =10;

結果會是如何?印出'10'嗎?
結果是印出 undefined

為何?

因為變數提升，只會提升變數。

程式看到的是這樣:

var b ;
console.log(b)
b = 10;

因為一開始只有定義，沒有給他值，所以印出undefined了。

3.最後來看看const

const 和let類似，最大的不同在於const 定義賦值後，不能再賦值了。

let b =10;
b = 20
//成功賦值const a = 10
a = 20
//報錯，Assignment to constant variable.

最後來總結一下:

A:
(1)let const 作用域在{}，var 在funciton。

(2)var 可以重複定義(在{}裡)，let不行。

(3)var 可以先用在定義，let const 必須先定義再用。

(4)const 和let相似，唯一不同在於宣告當下必須賦值，之後就不准再變動變數裡的值了。

2.Hoisting是啥鬼?

var 可以先使用在定義，程式眼中把function和變數提升到最上方，這個行為就是Hoisting，要注意變數只有變數本身會被提升，賦值不會(=右邊的東西不會)。

Written by Jia