用 1 分鐘簡單地了解 — JavaScript中 var 與 let 的主要差別

前情提要:相信現今開始學習JavaScript的人都會有個疑問,為什麼宣告變數變得那麼複雜、有那麼多種選擇:不管是ES5以前就有的var,或是ES6增加的let與const,撇除const全名constant(常數)只差兩個字母以外,var與let到底差別在哪?

更新:關於「宣告的提升行為」與「暫時性死區」我寫了一篇新文章闡述它,有興趣的可以前往查看。

Photo by Nicolas Cool on Unsplash

let/const: { block scope }
var: function(){

function scope

}

Global →Function → Block

懶人包:作用域不一樣,var的作用域在函數 (function) 裡let的作用域則是在區塊 (block) 裡

let在離開了大括號(區塊)之後,便無法被存取,試試把let改成var

值得探討的是,行 9–13 的行為與前者相像你甚至可以發現兩者被報錯的也是同一件事,只是作用域 (Scope) 不同。

重複宣告的差異

明白了作用域後,下一篇我們就能來討論: var 在作用域為什麼可以被重複宣告, let / const 在作用域內重複宣告則是會報錯,暫時性死區等等。

以下開始廢話時間:

想像國小的時候與隔壁異性同學一起坐的時候,隔壁那個男(女)孩總是會畫一條線,且跟你說:欸你不准超過我這邊!

沒錯,在這虛線以內就是你自己能存取的作用域,儘管你們兩個桌上都有放著數學課本,也不會搞錯本。

作用域越大到底有多亂?

這時問問你那已經結婚的老哥老姐,登記財產或是跟配偶在分配薪水時,怎麼分配、怎麼顧慮,就問他驚不驚喜、意不意外吧。

Photo by Manuel Cosentino on Unsplash

寫在文後:

在各種不同宣告方式中,還有很多細節是本文沒有探討到的,這分別牽扯到:

為什麼當時很多 library / 框架要用閉包 (closure) 去把var宣告的變數包起來?提升 (hoisting) 與暫時性死區 (TDZ) ,未來會再多做介紹。

本文就到此結束,第一次寫文章,如果喜歡的話給我一些鼓掌,反之若覺得有哪裡說的不妥歡迎留言指正及討論。

如果你想知道更多詳細的比較,可以觀看這篇:

[JavaScript] 你應該使用 let 而不是 var 的3個重要理由

If any interest, 👉 https://realdennis.me.

If any interest, 👉 https://realdennis.me.