iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 22
4
Modern Web

透過 ESLint 練習 JavaScript ES6系列 第 22

Day22【ES6 小筆記】變數提升(Hoisting)與暫時死區(TDZ)

javaScript 暫時死區 Temporal Dead Zone,TDZ
今天來介紹 let/const 的暫時死區(Temporal Dead Zone,TDZ),這是 ES6 中對作用域新的專用語,翻成中文就是「時間上暫時無法達到的區域」,簡稱為「暫時死區」,是不是聽起來怪恐怖的還有點中二 XDD?今天就來聊聊這個 TDZ 是什麼意思唄!不過那之前我們要先來了解變數 var 的提升(Hoisting)


變數 var 的提升(Hoisting)

在 JavaScript 中對於變數 var 的宣告有一個奇妙的特性,我們先來看看下面的例子:

console.log(name);
// Uncaught ReferenceError: a is not defined

因為變數 name 還沒宣告,所以會出現 ReferenceError 錯誤訊息,那下面的例子呢:

console.log(name); //undefined
var name;

喔喔喔喔喔!!!明明在 console.log 的地方,還沒宣告變數 name,但卻出現了 undefined!這個奇怪的現象!就稱做是變數提升 Hoisting歐!!

註:undefined 意思是變數沒有被宣告,或者是已經宣告了,但是沒有賦值。

那我們再看看下面的例子:

console.log(name); //undefined
var name = 'how哥';

ㄟˊ~?答案竟然是 undefined,不是 how哥?說好的變數提升呢?
哦~~~那是因為提升還有一個奇耙的特性就是:只有變數的宣告會提升,賦值不會提升!所以我們可以想像成上面的程式碼在瀏覽器執行時其實是長這樣:

var name;
console.log(name); //undefined
name = 'how哥';

以上就是關於變數提升特性的簡介,如果想了解得更深入,這邊來個好文推薦 ^__^: TechBridge:我知道你懂 hoisting,可是你了解到多深?


變數 let/const 的暫時死區(Temporal Dead Zone,TDZ)

你可能會問:竟然 var 有提升,那 let/const 有嗎?
試給你看嚕:

console.log(name); // Uncaught ReferenceError: Cannot access 'name' before initialization
let name;

你可能會想說:「哦~所以 let 沒有變數提升!」,那你就太天真了,其實在 let/const 中也存在變數提升的,並且會提升到區塊作用域的頂部,但是他還有另一個概念就是「暫時死區」,也就是如果在宣告變數之前使用變數,這個變數就是存在「暫時死區」中無法存取!這時候使用它就會報錯 ReferenceError

暫時死區的好處

暫時死區的特性可以幫助我們養成在變數還沒宣告之前不要使用他的好習慣,讓程式碼可讀性提高!更好理解,這也是建議使用 let/const 宣告變數的原因之一哦!


var/let/const 怎麼做選擇?

默認使用 const,如果變數是需要更新或改變的時候就使用 let,這麼做就相當的顯而易見,知道誰不會被改變、誰會被改變,並且因為 TDZ 的特性,不會有變數未宣告卻能存取的特性,也不會有重複宣告的問題,因此建議大家以後不要使用 var 做宣告囉,var 可能會產生重複宣告的問題之外,若在宣告之前使用,還會有找不到變數宣告的地方的問題,搞得大家很亂、很痛苦 ><。
關於 let/const 介紹 及跟 var 的差別,可以參考我之前寫的文章 ^____^ :變數宣告 - let、const 哪裡好?跟 var 說掰掰

let/const 與 var 的差異

簡單整理一個表格給大家參考!歡迎補充 or 錯誤提醒~謝謝各位!
let/const 與 var 比較

參考文章
TechBridge:我知道你懂 hoisting,可是你了解到多深?
EddyChang:理解ES6中的暫時死區(TDZ)


上一篇
Day21【ES6 小筆記】物件屬性存取方式 - 以一篇業配文為例
下一篇
Day23【ES6 小筆記】箭頭函式 this 初步了解/使用時機
系列文
透過 ESLint 練習 JavaScript ES630
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

1
huli
iT邦新手 3 級 ‧ 2019-09-23 22:43:12

有提到 TechBridge 那篇文章就給推 讚讚讚

然後「那我們在看看下面的例子:」,應該是「再」喔

江江好 iT邦新手 5 級 ‧ 2019-09-24 23:19:27 檢舉

糾察隊來了 XDDD !!!
已修正,感謝大大~~~

0
ayugioh2003
iT邦新手 2 級 ‧ 2019-09-24 16:05:16

本來精神有點萎靡
看到 how哥 後精神都來了(诶?)

江江好 iT邦新手 5 級 ‧ 2019-09-24 23:19:46 檢舉

喔喔喔喔喔喔!!!!!!!

我要留言

立即登入留言