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

更新 發佈閱讀 5 分鐘

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

  • var: 函式作用域,最早出現的宣告方式,宣告與賦值可分開進行。
  • let: 區塊作用域,ES6 引入,適合一般變數,宣告與賦值可分開進行。
  • const: 區塊作用域,ES6 引入,常數,宣告與賦值須一起完成。

作用域 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 可以重宣告
  • 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

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;

總結


參考

  1. 在 JavaScript 中用 var, let, 以及 const 有什麼差別?什麼時候該用哪個?
  2. JS 宣告變數, var 與 let / const 差異
留言
avatar-img
Elaine 粼粼的林林總總
6會員
18內容數
不定期地分享程式/旅遊/學習/閱讀或各式各樣的文章,如果對我的分享有興趣,歡迎來找我玩~
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
在 vocus 與你一起探索內容、發掘靈感的路上,我們又將啟動新的冒險——vocus App 正式推出! 現在起,你可以在 iOS App Store 下載全新上架的 vocus App。 無論是在通勤路上、日常空檔,或一天結束後的放鬆時刻,都能自在沈浸在內容宇宙中。
Thumbnail
在 vocus 與你一起探索內容、發掘靈感的路上,我們又將啟動新的冒險——vocus App 正式推出! 現在起,你可以在 iOS App Store 下載全新上架的 vocus App。 無論是在通勤路上、日常空檔,或一天結束後的放鬆時刻,都能自在沈浸在內容宇宙中。
Thumbnail
vocus 慶祝推出 App,舉辦 2026 全站慶。推出精選內容與數位商品折扣,訂單免費與紅包抽獎、新註冊會員專屬活動、Boba Boost 贊助抽紅包,以及全站徵文,並邀請你一起來回顧過去的一年, vocus 與創作者共同留下了哪些精彩創作。
Thumbnail
vocus 慶祝推出 App,舉辦 2026 全站慶。推出精選內容與數位商品折扣,訂單免費與紅包抽獎、新註冊會員專屬活動、Boba Boost 贊助抽紅包,以及全站徵文,並邀請你一起來回顧過去的一年, vocus 與創作者共同留下了哪些精彩創作。
Thumbnail
這篇文章深入淺出地解釋 JavaScript 中表達式 (expression) 與陳述式 (statement) 的差異,並以 React 中 JSX 的應用為例,說明為何大括號 {} 內只能放入表達式。文章以類比人類語言的句子結構來幫助理解,並提供相關參考資料連結。
Thumbnail
這篇文章深入淺出地解釋 JavaScript 中表達式 (expression) 與陳述式 (statement) 的差異,並以 React 中 JSX 的應用為例,說明為何大括號 {} 內只能放入表達式。文章以類比人類語言的句子結構來幫助理解,並提供相關參考資料連結。
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
前言 Vue.js 是一個流行的 JavaScript 框架,專為構建單頁應用程序(SPA)而設計。它讓我們能夠更簡潔、更直觀地開發前端應用,和原生的 JavaScript 相比,Vue 的語法和結構有很多不同的地方,大家可能要花一些時間適應vue的寫法。這篇文章將帶您一步步了解 Vue.js 的
Thumbnail
前言 Vue.js 是一個流行的 JavaScript 框架,專為構建單頁應用程序(SPA)而設計。它讓我們能夠更簡潔、更直觀地開發前端應用,和原生的 JavaScript 相比,Vue 的語法和結構有很多不同的地方,大家可能要花一些時間適應vue的寫法。這篇文章將帶您一步步了解 Vue.js 的
Thumbnail
iFrame在微前端架構中的優缺點,分析了其對用戶體驗、SEO及性能的影響。 iFrame在嵌入小型UI元件、創建隔離環境等特定場景中仍具備相當的應用價值。
Thumbnail
iFrame在微前端架構中的優缺點,分析了其對用戶體驗、SEO及性能的影響。 iFrame在嵌入小型UI元件、創建隔離環境等特定場景中仍具備相當的應用價值。
Thumbnail
JavaScript (簡稱 JS) 是具有一級函數的輕量級、直譯式或即時編譯的程式語言。它因為用作網頁的腳本語言而大為知名,但也用於許多非瀏覽器的環境,像是 Node.js 等。由於 JavaScript 語法上的一些缺點,軟體工程師們又設計出了 CoffeeScript、TypeScript 和
Thumbnail
JavaScript (簡稱 JS) 是具有一級函數的輕量級、直譯式或即時編譯的程式語言。它因為用作網頁的腳本語言而大為知名,但也用於許多非瀏覽器的環境,像是 Node.js 等。由於 JavaScript 語法上的一些缺點,軟體工程師們又設計出了 CoffeeScript、TypeScript 和
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News