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
查看全部
發表第一個留言支持創作者!
針對 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
美國總統大選只剩下三天, 我們觀察一整週民調與金融市場的變化(包含賭局), 到本週五下午3:00前為止, 誰是美國總統幾乎大概可以猜到60-70%的機率, 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Thumbnail
Faker昨天真的太扯了,中國主播王多多點評的話更是精妙,分享給各位 王多多的點評 「Faker是我們的處境,他是LPL永遠繞不開的一個人和話題,所以我們特別渴望在決賽跟他相遇,去直面我們的處境。 我們曾經稱他為最高的山,最長的河,以為山海就是盡頭,可是Faker用他28歲的年齡...
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
美國總統大選只剩下三天, 我們觀察一整週民調與金融市場的變化(包含賭局), 到本週五下午3:00前為止, 誰是美國總統幾乎大概可以猜到60-70%的機率, 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Thumbnail
Faker昨天真的太扯了,中國主播王多多點評的話更是精妙,分享給各位 王多多的點評 「Faker是我們的處境,他是LPL永遠繞不開的一個人和話題,所以我們特別渴望在決賽跟他相遇,去直面我們的處境。 我們曾經稱他為最高的山,最長的河,以為山海就是盡頭,可是Faker用他28歲的年齡...
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。