用 1 分鐘簡單地了解 — JavaScript中 var 與 let 的主要差別
前情提要:相信現今開始學習JavaScript的人都會有個疑問,為什麼宣告變數變得那麼複雜、有那麼多種選擇:不管是ES5以前就有的var,或是ES6增加的let與const,撇除const全名constant(常數)只差兩個字母以外,var與let到底差別在哪?
更新:關於「宣告的提升行為」與「暫時性死區」我寫了一篇新文章闡述它,有興趣的可以前往查看。
let/const: { block scope }
var: function(){function scope
}
Global →Function → Block
懶人包:作用域不一樣,var的作用域在函數 (function) 裡,let的作用域則是在區塊 (block) 裡。
值得探討的是,行 9–13 的行為與前者相像,你甚至可以發現兩者被報錯的也是同一件事,只是作用域 (Scope) 不同。
明白了作用域後,下一篇我們就能來討論: var 在作用域為什麼可以被重複宣告, let / const 在作用域內重複宣告則是會報錯,暫時性死區等等。
以下開始廢話時間:
想像國小的時候與隔壁異性同學一起坐的時候,隔壁那個男(女)孩總是會畫一條線,且跟你說:欸你不准超過我這邊!
沒錯,在這虛線以內就是你自己能存取的作用域,儘管你們兩個桌上都有放著數學課本,也不會搞錯本。
作用域越大到底有多亂?
這時問問你那已經結婚的老哥老姐,登記財產或是跟配偶在分配薪水時,怎麼分配、怎麼顧慮,就問他驚不驚喜、意不意外吧。
寫在文後:
在各種不同宣告方式中,還有很多細節是本文沒有探討到的,這分別牽扯到:
為什麼當時很多 library / 框架要用閉包 (closure) 去把var宣告的變數包起來?提升 (hoisting) 與暫時性死區 (TDZ) ,未來會再多做介紹。
本文就到此結束,第一次寫文章,如果喜歡的話給我一些鼓掌,反之若覺得有哪裡說的不妥歡迎留言指正及討論。