【自學程式】var、let 與 const 到底差在哪？
閱讀時間約 6 分鐘
對於剛接觸前端開發不久的人來說，可能會對var、let 與 const 的差異略懂略懂，但又說不太出三者實際哪裡不一樣。
在 JavaScript ES6 中，let、const 取代了 var 作為新的宣告變數時使用的關鍵字，讓變數在被宣告時，可以更加嚴謹，因此在現行的專案中，大部分的人都是使用這來個關鍵字來宣告變數居多，不太會有需要使用到 var 的機會。
既然不太會使用到，為什麼我們依然要花時間理解，透過這三者來宣告變數的差異呢？這會有幾個主要的原因：
- 了解let 與 const 是為什麼解決什麼問題而存在
- junior front-end developer 必考的面試考題
- 不少舊的套件還是使用 var 作為範本
- 許多經典的前端書籍還維持在 var 的使用階段
- 未來你有可能會經手、接管、維護舊專案
因此，花一點時間來了解這個議題絕對很值得，接下來的內容中，主要會以下幾點來進行討論：
- 變數是否可以被重複宣告
- 變數是否可以被重新指值
- 變數作用域差異
- 變數 Hoisting 行為時的報錯訊息不同
- 變數是否強制在宣告時指定值
如果你還不曉得什麼是 ES5、ES6 的話，可以參考這篇文章:
變數是否可以重複宣告（redeclare）
ES6 以前還沒有 let、const 前，如果使用 var 關鍵字對同一個變數重複宣告是合法的，並不會報錯。
使用 var 重複宣告但不報錯的原理，就很像是我們可以針對同一個 CSS 類別下不同的樣式，而最下方的程式碼會覆蓋掉最上面的，但並不構成錯誤。
然而重複宣告變數，可能會造成開發者要取用變數時，很容易取到錯誤的值，程式碼會變得不好維護，所以在 ES6 以後，新增了 let、const 關鍵字作為替代。
我們會發現，在還沒有執行到 console.log(price) 時，程式碼就因為 price 變數被重複宣告而出現錯誤無法繼續執行。
同理，既然是為了修正以前 var 可以被重複宣告所造成的錯誤， const 關鍵字同樣不能拿來重複宣告變數。
結論：var 可以被重複宣告，但是 const、let 不行。
變數是否可以被重新指值( reassign / mutate )
有時候為了要在函式中更新全域變數中的值，我們會在函式中重新指定一個新的值給全域變數。
但有時候我們不想要讓已經被宣告的變數，可以輕易地被改到值，這時候我們就可以使用 const 關鍵字來宣告變數。
使用 const 關鍵字可以避免一個變數重新被指定新值，如果有這樣的狀況的話，瀏覽器就會報錯：「Uncaught TypeError: Assignment to constant variable.」
結論：如果在宣告變數以後，還會有需求要重新指定值，那就使用 let 宣告變數；如果是固定的資料，像是資料夾位置、API 路徑等不能被輕易改動的內容，就需要使用 const 關鍵字來宣告。
變數作用域差異
作用域的差異可以說是 ES6 與 ES6 以前差異最多的部分，對於初學者來說，需要花一段時間來了解。
在 JavaScript 中變數有效的範圍，也就是可以被取用的範圍稱為作用域（Scope）。
以 var 來說，var 的作用域分為全域作用域及函式作用域，一個變數是否能被取用到，是以 function 來切分的。
在函式中想要讀出 a 變數值時，會優先查找函式內是否有名為 a 的變數，如果沒有的話才會向外查找。
但在 showVariable()函式中，已經有一個變數叫做 a 了，所以讀出來的結果就是「區域變數」。
但如果在函式外讀取，是取不到函式內變數 a 的值，只能取到做外層帶有「全域變數」值的 a 變數。
這裡看起來與 let、const 的使用情境無太大差異，讓我們再來看看另一個範例：
顯然在這個範例中，只用大括號包住的宣告，並沒有辦法達到區域作用域的功能，反而將 a 的值都覆寫過去了，讓兩邊的印出來的值都是「區域變數」，光這一點就能判斷 var 的作用域只會在全域及函式中出現。
而且只要是透過 var 宣告過的變數，便會成為全域屬性，造成全域污染的問題。
現在如果用 let 來取代 var 來宣告一樣的變數會發生什麼事呢？
這一個範例跟剛剛使用 var 宣告沒有兩樣。
但是我們可以發現 let 在 { } 中是可以自行創建出作用域的！
由此可知我們可以透過上方範例了解到，let、const 的作用域與 var 不一樣，屬於全域、區塊作用域。
變數 Hoisting 時的行為不同
let、const 作為 ES6 以後的語法，很嚴格的禁止「宣告前可以被取到值」的行為：
然而如果透過 var 來宣告的話：
會發現透過 var 宣告的變數不會報錯，而是出現 undefined 的值。
這裡做個小結：這三者都會有 hoisting 的行為，在宣告前就取用變數時，var 僅會回傳 undefined，但是因為 let、const 較嚴謹，所以會帶有錯誤訊息，MDN 文件稱這個現象為 TDZ（Temporal dead zone）。
由於 hoisting 行為需要一點篇幅解釋，希望之後在利用其他篇幅來跟大家介紹何謂 hoisting，又因這一篇為 let、const及var 的差異比較，故不多贅述。
變數是否強制在宣告時指定值
const 在宣告時一定要指定值，不然會報錯。
但在使用 var 與 let 時，可以不用先指定值，可以後續在重新指定，這是基於透過 const 宣告的變數，會成為常數，所以不帶有重新指定值的特性。
基本上 let、const 與 var 的差異了解大概到這，希望下次碰到這個問題時，可以更有自信的講述這三者的差異性，即便開發上不太會用到，卻是能更了解這門語言的機會。
相信透過這篇文章，大家可以更加了解let、const 與 var 的差異，關於網頁開發你有沒有什麼問題想要跟我分享的呢？歡迎你在下方留言與我分享。
希望今天的文章有幫助到正在閱讀的你，如果你喜歡我的文章的話，可以留下你的愛心或是收藏我的文章，也或者可以點選「贊助」，你的一杯咖啡絕對是我持續寫下去的動力！或是透過拍拍手，用你小小的行動支持我的創作！
我是Vivian，我們下次見。
關於我：
一名從英文系畢業的前端工程師，喜歡閱讀、寫東西及自我成長。
｜Instagram: Vivian Yeh｜vivian_enlife
｜聯絡我：[email protected]
422會員
99內容數
為了追求可以窩在座位上、可以心無旁騖思考問題、座位可以亂七八糟沒關係、不需要到處哈腰點頭跑客戶，不用腳踩十公分、連妝都可以不用化的職場人生，文組少女毅然決然踏上RD的養成日常。
留言0
查看全部
你可能也想看
Google News 追蹤
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
上華蒙特梭利小學、中學和高中的教學理念以蒙特梭利教育為基礎，是台南地區一所特別的實驗學校。小學部分經營已經有七年，從一開始僅有八位學生到如今成長至七十多名學生，這樣的發展過程中，需要家長們慢慢了解並認同蒙特梭利的教育理念。
在這幾年的疫情風波中，學校經歷了許多挑戰，但已逐漸趨於穩定。上華蒙特梭利小
第二題練習題～應用的內容跟判斷質數差不多，甚至再更少一點（因為沒有要用到迴圈），所以這次寫起來就快很多，除了題目難度比較低之外，經過上次的洗禮之後，對於解題應該有再抓到更多感覺，所以寫這題比較有成就感一點XD
主題：宣告變數和判斷式的的綜合小應用
題目：每個人都有心目中夢想的身高，像小鳴就夢想著
從跟著教學影片把老師的程式抄過一遍，變成看到題目能把題目轉為程式，對於初學者來說蠻困難的。所以我想以初學者的角度來分享自己怎麼適應這段轉換的過程，以及我解題的方法是什麼。（也順便紀錄一下自己的思路）
※主題：流程控制為主的綜合小應用
※題目：讓使用者輸入一個數字，並用程式判斷該數字是否為質數
網路上提到自學程式的文章，都會說自學程式非常地辛苦，而且要很自律，決心夠強；而當自己踏上這條路後，才發現何止是辛苦，根本是佈滿荊棘，常常寸步難行，且被刺地遍體鱗傷(喂～是不是有點太浮誇了），但在每個寫出程式豁然開朗的當下，卻又成就感滿滿，所以想藉著寫部落格紀錄一下自己的學習過程！
程式語言只是工具，更重要的是程式邏輯
【運算思維】
1.拆解: 將一個任務或問題拆解成數個步驟或部分。
2.找出規律: 預測問題的規律，並找出模式做測試。
3.歸納與抽象化: 找出最主要導致此模式的原則或因素。
4.設計演算法: 設計出能夠解決類似問題並且能夠被重複執行的指令流程。
最近很多人私訊我他們自學遇到的瓶頸，有些人會覺得學不會程式，是自己太笨沒天分，或從小數理能力就差，才學不起來。但以我自己這些年自學程式並創業的經驗，我認為可能原因是自己操之過急了，因為想要快速達到像是轉職或是創業等等目標，所以覺得得學得越快越好。但這個領域需要的是長時間的磨練，慢慢一點點累積
設定好你的目標，做好目標分解，接下來就是學習與實作，在過程中，肯定會遇到各種問題需要debug，這應該是剛入門自學程式的人最痛苦的部分，可能看到bug不知道google要下甚麼關鍵字，也可能搜出一堆文章看得頭昏腦脹，所以想跟大家分享我在自學製作封鎖電商黑名單chrome插件過程，是怎麼面對這種狀況的
之前跟大家分享【表現目標】和【學習目標】，有助於設定自學的終點，但是在執行目標的過程中是否遇過有目標也難以下手的問題呢?今天想跟大家說說【拆解目標】，這也是我在自學製作封鎖電商黑名單chrome插件賺取被動收入過程中運用的方法，希望對剛入門自學程式的朋友有幫助
除了增進程式技術和技巧以外，我覺得建立起正確的【自學心態】更重要，保持正確的態度能讓你持續不斷的精進學習，不會半途而廢，也更能享受進步帶來的成就感，我從自己過去零基礎開始自學程式然後做出線上服務的經驗，整理出一些入門自學的朋友應該抱持的心態，相信會很有幫助
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
上華蒙特梭利小學、中學和高中的教學理念以蒙特梭利教育為基礎，是台南地區一所特別的實驗學校。小學部分經營已經有七年，從一開始僅有八位學生到如今成長至七十多名學生，這樣的發展過程中，需要家長們慢慢了解並認同蒙特梭利的教育理念。
在這幾年的疫情風波中，學校經歷了許多挑戰，但已逐漸趨於穩定。上華蒙特梭利小
第二題練習題～應用的內容跟判斷質數差不多，甚至再更少一點（因為沒有要用到迴圈），所以這次寫起來就快很多，除了題目難度比較低之外，經過上次的洗禮之後，對於解題應該有再抓到更多感覺，所以寫這題比較有成就感一點XD
主題：宣告變數和判斷式的的綜合小應用
題目：每個人都有心目中夢想的身高，像小鳴就夢想著
從跟著教學影片把老師的程式抄過一遍，變成看到題目能把題目轉為程式，對於初學者來說蠻困難的。所以我想以初學者的角度來分享自己怎麼適應這段轉換的過程，以及我解題的方法是什麼。（也順便紀錄一下自己的思路）
※主題：流程控制為主的綜合小應用
※題目：讓使用者輸入一個數字，並用程式判斷該數字是否為質數
網路上提到自學程式的文章，都會說自學程式非常地辛苦，而且要很自律，決心夠強；而當自己踏上這條路後，才發現何止是辛苦，根本是佈滿荊棘，常常寸步難行，且被刺地遍體鱗傷(喂～是不是有點太浮誇了），但在每個寫出程式豁然開朗的當下，卻又成就感滿滿，所以想藉著寫部落格紀錄一下自己的學習過程！
程式語言只是工具，更重要的是程式邏輯
【運算思維】
1.拆解: 將一個任務或問題拆解成數個步驟或部分。
2.找出規律: 預測問題的規律，並找出模式做測試。
3.歸納與抽象化: 找出最主要導致此模式的原則或因素。
4.設計演算法: 設計出能夠解決類似問題並且能夠被重複執行的指令流程。
最近很多人私訊我他們自學遇到的瓶頸，有些人會覺得學不會程式，是自己太笨沒天分，或從小數理能力就差，才學不起來。但以我自己這些年自學程式並創業的經驗，我認為可能原因是自己操之過急了，因為想要快速達到像是轉職或是創業等等目標，所以覺得得學得越快越好。但這個領域需要的是長時間的磨練，慢慢一點點累積
設定好你的目標，做好目標分解，接下來就是學習與實作，在過程中，肯定會遇到各種問題需要debug，這應該是剛入門自學程式的人最痛苦的部分，可能看到bug不知道google要下甚麼關鍵字，也可能搜出一堆文章看得頭昏腦脹，所以想跟大家分享我在自學製作封鎖電商黑名單chrome插件過程，是怎麼面對這種狀況的
之前跟大家分享【表現目標】和【學習目標】，有助於設定自學的終點，但是在執行目標的過程中是否遇過有目標也難以下手的問題呢?今天想跟大家說說【拆解目標】，這也是我在自學製作封鎖電商黑名單chrome插件賺取被動收入過程中運用的方法，希望對剛入門自學程式的朋友有幫助
除了增進程式技術和技巧以外，我覺得建立起正確的【自學心態】更重要，保持正確的態度能讓你持續不斷的精進學習，不會半途而廢，也更能享受進步帶來的成就感，我從自己過去零基礎開始自學程式然後做出線上服務的經驗，整理出一些入門自學的朋友應該抱持的心態，相信會很有幫助