JavaScript 入門:一表看懂 var / let / const 三種宣告方式差異

更新 發佈閱讀 6 分鐘

JavaScript 宣告方式

Javascript 中有三種宣告的保留字:varletconst

  • var: 函式作用域,最早出現的宣告方式,宣告與賦值可分開進行。
    (因為可重複宣告,導致難以追蹤、維護,此宣告方式現已逐漸被取代)
  • let: 區塊作用域,ES6 引入,適合一般變數,宣告與賦值可分開進行。
  • const: 區塊作用域,ES6 引入,常數,宣告與賦值須一起完成。
    (這是現代 JS 最推薦的方法)
作用域的概念可以參考:【JavaScript 入門:作用域 Scope 和作用域鏈 Scope chain

作用域 Scope

可以把作用域理解為「活著的範圍」,超出這個範圍,變數就無法起作用,甚至可以說對範圍外的人來說根本不存在!

  • var函式作用域,也就是只有函式擋得住這種變數,若是將宣告寫在 iffor 之中,變數會跑出去,變成變數外洩。
  • let/const區塊作用域,只要有 {} 就可以擋住,不須擔心外洩問題。
function test() {
if (true) {
var a = 5;
let b = 6;
const c = 7;

console.log(a); // 5,可正常印出
console.log(b); // 6,可正常印出
console.log(c); // 7,可正常印出
}
console.log(a); // 5,可正常印出
// console.log(b); // ReferenceError: b is not defined
// console.log(c); // ReferenceError: c is not defined
}

test();

重宣告 Redeclear

  • var 以重宣告,因為這個特性,使得用 var 宣告的變數不易追蹤,可能重複宣告了都沒發現><
  • let/const 不可以重宣告。
var a = 1;
var a = 2;
console.log(a);// 2

/*------------------------*/
let a = 1;
let a = 2; // SyntaxError: Identifier 'a' has already been declared
console.log(a);

/*------------------------*/
const a = 1;
const a = 2; // SyntaxError: Identifier 'a' has already been declared
console.log(a);

重賦值 Reassign

  • var / let以重賦值
  • const 不可以重賦值
var a = 1;
a = 2;
console.log(a); // 2

/*------------------------*/
let a = 1;
a = 3;
console.log(a); // 3

/*------------------------*/
const a = 1;
a = 5; // TypeError: Assignment to constant variable.
console.log(a);

提升 Hoisting

「提升」指的是,JavaScript 引擎在執行程式碼前,先將「宣告」搬到作用域最上方的動作。(只有宣告會提升,賦值這個動作是留在原地的喔!)

var/let/const 皆會提升,但是處理的方式不一樣:

  • var 會被初始化為 undefined,不會報錯。
  • let/const 會進入 temporal dead zone(暫時性死區),會出現錯誤。
console.log(a); // undefined
var a = 0;

/*------------------------*/
console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 0;

/*------------------------*/
console.log(c); // ReferenceError: Cannot access 'c' before initialization
let c = 0;
關於更詳細的「提升」介紹,可以參考:【JavaScript 入門:提升 Hoisting 是什麼?

總結


參考

  1. JS var 變數的秘密:一文看懂 var、let、const 無宣告變數細節
  2. 在 JavaScript 中用 var, let, 以及 const 有什麼差別?什麼時候該用哪個?
  3. JS 宣告變數, var 與 let / const 差異
留言
avatar-img
Elaine 粼粼的林林總總
13會員
40內容數
不定期地分享程式/旅遊/學習/閱讀或各式各樣的文章,如果對我的分享有興趣,歡迎來找我玩~
2026/01/31
這篇文章將會探討 Git 的工作目錄、暫存區和儲存庫三大區域,並解釋檔案在這三個區域中的狀態(未追蹤、已追蹤、已修改、已刪除),以及 git status 指令中常見的訊息。透過理解這三大區域的運作原理,可以幫助開發者更精準、安全地進行版本控制。
2026/01/31
這篇文章將會探討 Git 的工作目錄、暫存區和儲存庫三大區域,並解釋檔案在這三個區域中的狀態(未追蹤、已追蹤、已修改、已刪除),以及 git status 指令中常見的訊息。透過理解這三大區域的運作原理,可以幫助開發者更精準、安全地進行版本控制。
2026/01/28
上一篇文章中,我們已經成功安裝好 Git,在本篇文章中,將會講解 Git 的核心操作,包括初始化儲存庫、查看檔案狀態、添加變更到暫存區,以及保存版本。文章中也簡單提及了 Git 的三個核心區域:工作目錄、暫存區和儲存庫,並解釋了 .gitignore 的用途。
Thumbnail
2026/01/28
上一篇文章中,我們已經成功安裝好 Git,在本篇文章中,將會講解 Git 的核心操作,包括初始化儲存庫、查看檔案狀態、添加變更到暫存區,以及保存版本。文章中也簡單提及了 Git 的三個核心區域:工作目錄、暫存區和儲存庫,並解釋了 .gitignore 的用途。
Thumbnail
2026/01/26
在上一篇文章中,我們已經對於 Git 是什麼、能做什麼有初步的了解了,接下來,可以正式啟航 Git 這架時光機啦! 在這篇文章中,我會帶著大家一起安裝 Git~以及簡單介紹 Git 提供的操作介面。
2026/01/26
在上一篇文章中,我們已經對於 Git 是什麼、能做什麼有初步的了解了,接下來,可以正式啟航 Git 這架時光機啦! 在這篇文章中,我會帶著大家一起安裝 Git~以及簡單介紹 Git 提供的操作介面。
看更多
你可能也想看
Thumbnail
這篇文章深入淺出地解釋 JavaScript 中表達式 (expression) 與陳述式 (statement) 的差異,並以 React 中 JSX 的應用為例,說明為何大括號 {} 內只能放入表達式。文章以類比人類語言的句子結構來幫助理解,並提供相關參考資料連結。
Thumbnail
這篇文章深入淺出地解釋 JavaScript 中表達式 (expression) 與陳述式 (statement) 的差異,並以 React 中 JSX 的應用為例,說明為何大括號 {} 內只能放入表達式。文章以類比人類語言的句子結構來幫助理解,並提供相關參考資料連結。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
JavaScript (簡稱 JS) 是具有一級函數的輕量級、直譯式或即時編譯的程式語言。它因為用作網頁的腳本語言而大為知名,但也用於許多非瀏覽器的環境,像是 Node.js 等。由於 JavaScript 語法上的一些缺點,軟體工程師們又設計出了 CoffeeScript、TypeScript 和
Thumbnail
JavaScript (簡稱 JS) 是具有一級函數的輕量級、直譯式或即時編譯的程式語言。它因為用作網頁的腳本語言而大為知名,但也用於許多非瀏覽器的環境,像是 Node.js 等。由於 JavaScript 語法上的一些缺點,軟體工程師們又設計出了 CoffeeScript、TypeScript 和
Thumbnail
iFrame在微前端架構中的優缺點,分析了其對用戶體驗、SEO及性能的影響。 iFrame在嵌入小型UI元件、創建隔離環境等特定場景中仍具備相當的應用價值。
Thumbnail
iFrame在微前端架構中的優缺點,分析了其對用戶體驗、SEO及性能的影響。 iFrame在嵌入小型UI元件、創建隔離環境等特定場景中仍具備相當的應用價值。
Thumbnail
《轉轉生》(Re:INCARNATION)為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,結合拉各斯街頭節奏、Afrobeat/Afrobeats、以及約魯巴宇宙觀的非線性時間,建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發,解析其去殖民的身體政治。
Thumbnail
《轉轉生》(Re:INCARNATION)為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,結合拉各斯街頭節奏、Afrobeat/Afrobeats、以及約魯巴宇宙觀的非線性時間,建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發,解析其去殖民的身體政治。
Thumbnail
前言 Vue.js 是一個流行的 JavaScript 框架,專為構建單頁應用程序(SPA)而設計。它讓我們能夠更簡潔、更直觀地開發前端應用,和原生的 JavaScript 相比,Vue 的語法和結構有很多不同的地方,大家可能要花一些時間適應vue的寫法。這篇文章將帶您一步步了解 Vue.js 的
Thumbnail
前言 Vue.js 是一個流行的 JavaScript 框架,專為構建單頁應用程序(SPA)而設計。它讓我們能夠更簡潔、更直觀地開發前端應用,和原生的 JavaScript 相比,Vue 的語法和結構有很多不同的地方,大家可能要花一些時間適應vue的寫法。這篇文章將帶您一步步了解 Vue.js 的
Thumbnail
React.js 是一個熱門的library,JayLin今天講解React核心概念以及利用一個小案例概括理論部分
Thumbnail
React.js 是一個熱門的library,JayLin今天講解React核心概念以及利用一個小案例概括理論部分
Thumbnail
你知道Emoji看起來是一個符號,但寫程式時長度卻不一樣嗎? 😀.length 跟 👩🏽‍🦳.length 是不相等的喔! 一起來了解Emoji的故事吧
Thumbnail
你知道Emoji看起來是一個符號,但寫程式時長度卻不一樣嗎? 😀.length 跟 👩🏽‍🦳.length 是不相等的喔! 一起來了解Emoji的故事吧
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
簡介 本篇教學將帶您使用 Node.js 和 JavaScript 實現一個簡易相簿功能,具備圖片上傳、顯示以及查看原圖的功能。我們將利用 Express 框架以及 multer 中介軟體處理文件上傳,並使用 EJS 作為模板引擎來呈現網頁內容。 實現目標 相簿首頁:顯示所有已上傳的圖片。
Thumbnail
簡介 本篇教學將帶您使用 Node.js 和 JavaScript 實現一個簡易相簿功能,具備圖片上傳、顯示以及查看原圖的功能。我們將利用 Express 框架以及 multer 中介軟體處理文件上傳,並使用 EJS 作為模板引擎來呈現網頁內容。 實現目標 相簿首頁:顯示所有已上傳的圖片。
Thumbnail
Vue.js 是一個靈活且高效的 JavaScript 框架,專注於構建用戶界面。它使用虛擬 DOM 技術,能夠有效地更新界面。
Thumbnail
Vue.js 是一個靈活且高效的 JavaScript 框架,專注於構建用戶界面。它使用虛擬 DOM 技術,能夠有效地更新界面。
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News