var、let 與 const 的差異 | JavaScript

閱讀時間約 4 分鐘
主要參考來源:【自學程式】var、let 與 const 到底差在哪?

var 可以被重複宣告,但是 let、const 不行

var 可以重複宣告,不會報錯,缺點是不好維護管理,容易取到錯誤的值,忘記或不知道同樣的變數已經在其他地方使用過,導致程式碼結果不如預期。所以 ES6 之後,新增了 let、const 關鍵字,重複宣告變數會報錯

var price = 30;
var price = 40;

let money = 30;
let money = 40;
// Uncaught SyntaxError: Identifier 'money' has already been declared

const wallet = 30;
const wallet = 40;
// Uncaught SyntaxError: Identifier 'wallet' has already been declared


var、let 可以重新賦值,const 不行

不希望、不行被修改的值使用 const 來宣告。使用 const 宣告的變數被重新賦值時,會報錯 Uncaught TypeError: Assignment to constant variable


變數作用域差異:var 是函式作用域,let、const 是區塊作用域

var 為全域和函式作用域,優先查找函式內有沒有該變數,再往外層/全域查找。

var a = '全域變數';

function showVariable() {
var a = '區域變數';
console.log(a);
}

showVariable(); // 區域變數
console.log(a); // 全域變數

{} (非函式) 內用 var 宣告變數,無法將變數限制在該範圍內,會汙染全域。

var a = '全域變數';

{
var a = '區域變數';
console.log(a); // 區域變數
}

console.log(a); // 區域變數
let、const 為全域和區塊作用域。在函式或區塊內都可以將變數限制在該層範圍中。
let a = '全域變數';

function showVariable() {
let a = '區域變數';
console.log(a);
}

showVariable(); // 區域變數
console.log(a); // 全域變數
let a = '全域變數';

{
let a = '區域變數';
console.log(a); // 區域變數
}

console.log(a); // 全域變數
console.log(window.a); // undefined


三個都會 hoisting,但只有 var 會初始化為 undefined,let、const 不會初始化,而是處於 暫時性死區 TDZ 直到變數被宣告

var 會初始化
console.log(greeting); // undefined
var greeting = "hi there";

let const 在 宣告前,都會是 暫時性死區 (TDZ,Temporal Dead Zone),在宣告前使用會報錯 is not defined
console.log(greeting); 
// Uncaught ReferenceError: greeting is not defined
let greeting = "hi there";


變數是否強制在宣告時指定值var、let 可以不用先指定值,const 宣告時一定要指定值

因為 const 不能重新賦值,沒賦值會報錯 Uncaught SyntaxError: Missing initializer in const declaration



資料來源

主要放程式學習筆記,分享 Creative Coding 相關內容、作品
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
針對 JavaScript 中的原始型別和隱性轉型進行了詳細的探討
可選串聯(?.)運算符用於訪問 object 的屬性或調用函數。如果使用該運算符訪問的object 或調用的函式為 undefined 或 null,則表達式會回傳 undefined,而不是拋出錯誤。
立即(調用)函式 (簡稱 IIFE,Immediately Invoked Function Expression) 是種在定義完可以馬上執行的函式表達式。
JS 資料型別分為兩大類,原始型別 (Primitive values) 和物件型別 (Objects)。
CSS 樣式採用規則:先看權重,再看誰後
針對 JavaScript 中的原始型別和隱性轉型進行了詳細的探討
可選串聯(?.)運算符用於訪問 object 的屬性或調用函數。如果使用該運算符訪問的object 或調用的函式為 undefined 或 null,則表達式會回傳 undefined,而不是拋出錯誤。
立即(調用)函式 (簡稱 IIFE,Immediately Invoked Function Expression) 是種在定義完可以馬上執行的函式表達式。
JS 資料型別分為兩大類,原始型別 (Primitive values) 和物件型別 (Objects)。
CSS 樣式採用規則:先看權重,再看誰後
你可能也想看
Google News 追蹤
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
VAR 雖然是趨勢但要有公正的判決以下幾點還需解決 1.畫線的角度不一,轉播單位提供的畫面需一致,否則只會造成更多爭議 2.很多長傳球,看有無越位是看起球的瞬間,在這狀況下,如前鋒能順利取得入球,通常都是好球,但失球後的一方,往往向裁判提出進攻方有越位的嫌疑,比較有guts的裁判會堅持自己的判決
Thumbnail
let 和 const 是 JavaScript 在 ES6 版本中新的變數宣告方式。使用 let 宣告的變數可以重新賦值,而使用 const 宣告的變數賦值後則不能改變。這兩種新的宣告方式提供了比 var 更嚴格和清晰的變數作用域管理。
Thumbnail
《不是我的錯Det Var Inte Mitt Fel》 📖書籍簡介:   「世界上正在發生的許多事,和我沒有關係嗎?」   童年的共同記憶,總是會有一個小同學受到欺負與打壓,   這個時候,是選擇出面袒護他?還是杵在一旁不發一語?   抑或加入虛張聲勢的團體?   《不是我的錯》是一本從學校同儕
Thumbnail
2022 年國際足球總會世界盃於卡達舉行,開幕戰由地主國卡達對戰厄瓜多,在短短 3 分鐘內,這次大會首次導入的「越位半自動化判定系統」隨即發動,透過影像輔助裁判 VAR 就已經沒收第一顆進球。而小組賽中阿根廷和德國頻繁被吹「越位」背後,這次世界盃新採用的 SAOT 技術也引發討論。
Thumbnail
VAR在足球界的定义是视频助理裁判。 在实践中,VAR经常帮助裁判在比赛中做出关键决定。 VAR的存在有望减少裁判决策中的争议。 就像最初的目标一样,足球中的 VAR 试图将裁判的失误降到最低。 作为一名法官,裁判也并不总是做出正确的决定。 有时,狭窄的视角会成为评估决策的障碍。
Java script 中有其中兩種宣告分別是 var 跟 let var 結果: let 結果: ** let 是一種區塊的變數宣告像是 if else while for 即跳出區塊時就無法取得資料
Thumbnail
對於剛接觸前端開發不久的人來說,可能會對var、let 與 const 的差異略懂略懂,但又說不太出三者實際哪裡不一樣。
Thumbnail
JavaScript在ES6新增了let, const等宣告變數的方式,其中let, const是block scope的,而var則是function scope。
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
VAR 雖然是趨勢但要有公正的判決以下幾點還需解決 1.畫線的角度不一,轉播單位提供的畫面需一致,否則只會造成更多爭議 2.很多長傳球,看有無越位是看起球的瞬間,在這狀況下,如前鋒能順利取得入球,通常都是好球,但失球後的一方,往往向裁判提出進攻方有越位的嫌疑,比較有guts的裁判會堅持自己的判決
Thumbnail
let 和 const 是 JavaScript 在 ES6 版本中新的變數宣告方式。使用 let 宣告的變數可以重新賦值,而使用 const 宣告的變數賦值後則不能改變。這兩種新的宣告方式提供了比 var 更嚴格和清晰的變數作用域管理。
Thumbnail
《不是我的錯Det Var Inte Mitt Fel》 📖書籍簡介:   「世界上正在發生的許多事,和我沒有關係嗎?」   童年的共同記憶,總是會有一個小同學受到欺負與打壓,   這個時候,是選擇出面袒護他?還是杵在一旁不發一語?   抑或加入虛張聲勢的團體?   《不是我的錯》是一本從學校同儕
Thumbnail
2022 年國際足球總會世界盃於卡達舉行,開幕戰由地主國卡達對戰厄瓜多,在短短 3 分鐘內,這次大會首次導入的「越位半自動化判定系統」隨即發動,透過影像輔助裁判 VAR 就已經沒收第一顆進球。而小組賽中阿根廷和德國頻繁被吹「越位」背後,這次世界盃新採用的 SAOT 技術也引發討論。
Thumbnail
VAR在足球界的定义是视频助理裁判。 在实践中,VAR经常帮助裁判在比赛中做出关键决定。 VAR的存在有望减少裁判决策中的争议。 就像最初的目标一样,足球中的 VAR 试图将裁判的失误降到最低。 作为一名法官,裁判也并不总是做出正确的决定。 有时,狭窄的视角会成为评估决策的障碍。
Java script 中有其中兩種宣告分別是 var 跟 let var 結果: let 結果: ** let 是一種區塊的變數宣告像是 if else while for 即跳出區塊時就無法取得資料
Thumbnail
對於剛接觸前端開發不久的人來說,可能會對var、let 與 const 的差異略懂略懂,但又說不太出三者實際哪裡不一樣。
Thumbnail
JavaScript在ES6新增了let, const等宣告變數的方式,其中let, const是block scope的,而var則是function scope。