JavaScript 程式札記 : 宣告變數 let、const 與 var 的區別

閱讀時間約 5 分鐘

什麼是 let 與 const ?

letconst 是 JavaScript 在 ES6 版本中新的變數宣告方式。使用 let 宣告的變數可以重新賦值,而使用 const 宣告的變數賦值後則不能改變。這兩種新的宣告方式提供了比 var 更嚴格和清晰的變數作用域管理。

let name = 'Jack'; // 可以重新賦值
name = 'May';

const age = '20'; // 不可以重新賦值
// age = '30'; // 會拋出錯誤

let、const 解決 var 的哪些問題?

1. 變數提升(Hoisting)

使用 var 會發生變數提升,即它們在代碼執行前就被初始化為 undefined

console.log(name); // undefined
var name = 'Michael';

var 不同, letconst 不會發生變數提升,所以在宣告之前訪問它們會導致 ReferenceError

console.log(age); 
// Uncaught ReferenceError: Cannot access 'age' before initialization
let age = 30;

2. 區塊作用域

var 沒有區塊作用域,它們所在的作用域是函數作用域或全域作用域。這可能導致變數意外覆蓋了外部同名的變數。

// 全域變數
var globalVar = 'I am global';

function exampleFunc() {
// 函數作用域
var funcVar = 'I am in function';

// 在函數作用域內覆蓋全域變數
var globalVar = 'I am overridden in function';

console.log('Inside function:');
console.log(globalVar); // 'I am overridden in function'
console.log(funcVar); // 'I am in function'
}

console.log('Outside function:');
console.log(globalVar); // 'I am global'

exampleFunc();

// 在函數的外部,變數 funcVar 是不可訪問的
console.log(funcVar); // Uncaught ReferenceError: funcVar is not defined

letconst 具有區塊作用域,使它們只在包含它們的{}內有效。

function test(){
let name = 'John';
const age = 30;
console.log(name, age);
}

test(); // "John" 30
console.log(name, age); // Uncaught ReferenceError: age is not defined

3. 重複宣告

var 允許在同一作用域內重複宣告同名變數,但這可能導致不小心覆蓋到之前的變數。

var city = 'Taipei';
var city = 'Kaohsiung'; // 沒有問題,但可能引起混淆
console.log(city); // "Kaohsiung"

letconst 不允許在同一作用域內重複宣告同名變數。

let city = 'Taipei';
// let city = 'Kaohsiung';
// Uncaught SyntaxError: Identifier 'city' has already been declared

何時使用 let,何時使用 const?

在需要重新賦值的狀況下,要選擇使用 let宣告變數,而當你確定變數的值不需要重新賦值時,就可以改用 const 宣告變數。

let user = 'Alice';
user = 'Bob';
console.log(user); // "Bob"

const obj = { name: 'Mary', age: 30 };
obj.name = 'Peter';
console.log(obj.name); // "Peter"

😊 感謝你的耐心閱讀,若是你喜歡這篇內容,可以透過以下方式表達你的喜歡 😊

❤️按個愛心|💬留言互動|🔗分享此文|📌追蹤阿梧|☕請喝咖啡

59會員
91內容數
「梧笙」即「吾生」,意即我的生命,朋友都叫我「阿梧(Awu)」,高雄人。我喜歡學習新技能,從程式設計到網路工具,再到社群經營和影片剪輯。日常興趣是打遊戲、看動漫、讀小說和聽音樂。我會把這些興趣寫成文章,如果你有任何想法或問題,歡迎來信到我的郵箱 aowulife109@gmail.com
留言0
查看全部
發表第一個留言支持創作者!
梧笙の領域展開 的其他內容
JavaScript 陣列的操作方法,forEach() 是用於遍歷陣列的每個元素,並對每個元素執行提供的函數,map() 是創建一個新陣列,其結果是對原陣列中的每個元素調用提供的函數後返回的結果。
本文將介紹陣列的基本操作方法,包括建立陣列、存取元素、陣列遍歷和修改陣列等,接下來將逐一介紹這些操作,並附上程式碼範例,讓你更易於理解和運用。。
JavaScript 陣列的操作方法,push() 可以將值加入到陣列的最後一個位置 ,pop() 會移除(取出)陣列的最後一個元素,shift() 會移除陣列的第一個元素,unshift() 則會將指定的元素添加到第一個位置。
JavaScript 的命名規則相當重要,它有些特定的慣例和限制。例如,變數和函式通常使用小駝峰式(firstName)命名。然後 JavaScript 對大小寫敏感,所以lastName和lastname是不同的變數。
本文將介紹如何使用 CSS Media Queries 來創建適應不同裝置的網頁,在現今多裝置的網頁設計中,可以透過 CSS Media Queries 來讓我們根據不同的裝置特性,如螢幕尺寸、解析度等,來應用不同的樣式規則。
本文將介紹 CSS 的四個基本概念:margin(外邊距)、padding(內邊距)、border(邊框)和 box-sizing(盒模型),接下來將透過實際的程式碼範例來展示這些概念如何運作。
JavaScript 陣列的操作方法,forEach() 是用於遍歷陣列的每個元素,並對每個元素執行提供的函數,map() 是創建一個新陣列,其結果是對原陣列中的每個元素調用提供的函數後返回的結果。
本文將介紹陣列的基本操作方法,包括建立陣列、存取元素、陣列遍歷和修改陣列等,接下來將逐一介紹這些操作,並附上程式碼範例,讓你更易於理解和運用。。
JavaScript 陣列的操作方法,push() 可以將值加入到陣列的最後一個位置 ,pop() 會移除(取出)陣列的最後一個元素,shift() 會移除陣列的第一個元素,unshift() 則會將指定的元素添加到第一個位置。
JavaScript 的命名規則相當重要,它有些特定的慣例和限制。例如,變數和函式通常使用小駝峰式(firstName)命名。然後 JavaScript 對大小寫敏感,所以lastName和lastname是不同的變數。
本文將介紹如何使用 CSS Media Queries 來創建適應不同裝置的網頁,在現今多裝置的網頁設計中,可以透過 CSS Media Queries 來讓我們根據不同的裝置特性,如螢幕尺寸、解析度等,來應用不同的樣式規則。
本文將介紹 CSS 的四個基本概念:margin(外邊距)、padding(內邊距)、border(邊框)和 box-sizing(盒模型),接下來將透過實際的程式碼範例來展示這些概念如何運作。
你可能也想看
Google News 追蹤
Thumbnail
本專欄將提供給您最新的市場資訊、產業研究、交易心法、精選公司介紹,以上內容並非個股分析,還請各位依據自身狀況作出交易決策。歡迎訂閱支持我,獲得相關內容,也祝您的投資之路順遂! 每年 $990 訂閱方案👉 https://reurl.cc/VNYVxZ 每月 $99 訂閱方案👉https://re
Thumbnail
這是 30 天寫作挑戰的第 16 天。今天要跟大家分享的主題是:3 個學習前端時,重要的程式框架
本篇最主要是要了解網站前端工程師究竟是什麼?主要工作內容又有哪些?將從三個部份來說明:前端的工作內容、前端所需的軟實力以及前端所需的硬實力。
Thumbnail
老師請問tailwind是什麼呢? Tailwind 是一個現代化的 CSS 框架,它的設計理念是「高度可定制的實用型 CSS 庫」。與其他 CSS 框架不同的是,Tailwind 不是基於預先定義好的樣式類別和樣式集合,而是提供了大量的 CSS 實用類別,讓開發者可以更靈活地自由組合和應用。
Thumbnail
請您現在扮演一位幽默博學的老師,回答什麼是sass中的mixin概念 很高興回答這個問題!在 Sass 中,Mixin 是一種可以將一組 CSS 屬性集合放在一起,以便在需要的地方重複使用的功能。Mixin 可以包含變量、條件語句、迴圈和其他 CSS 屬性,使其更加靈活和強大。
Thumbnail
● 學習時態,整理了一些資訊。 ● 做了 AWS 前端的上機考題,how many words.有卡,但後來有好好學到 regex 的用法了(把中文維基百科有耐心看過就行) ● 早上10 點 HIIT @公園 -> 整整20分鐘我幾乎做完全部,有明顯進步!
Thumbnail
從身邊最小的事物開始吧! 這是我學習完基礎JavaScript後第一個做成的Project,應該是每個前端都一定會做過的project,但對於自學的我非常有挑戰性,我需要訓練自己在短時間內熟悉JS event並且運用他做出我的第一個搭配大量JS程式碼的網頁作品。
Thumbnail
教到了JS event,非常實用的一堂課程,開始進入監聽階段,可以跟使用者互動,也慢慢建立UX的概念,讓我可以開始自行設計動態網頁,並且優化了第二個靜態網頁,加入了滾動變化的效果。
Thumbnail
網頁設計的工作主要是要設計介面(user interface, UI),並把它轉化成前端介面。先不說設計能力,在技術方面,比較不講究架構或是效能。而在日常工作中,也不太需要常常客製化介面與互動。
Thumbnail
無須基礎,只要「複製 + 貼上」就能學會 (RWD Bootstrap + jQueryUI + fancyBox + CKeditor + Google Chart) 每個特效均為您示範 WebFomr + MVC 雙重範例 ASP.NET 教學 — 前端特效輕鬆學 (9.9小時) 課程介紹
Thumbnail
本專欄將提供給您最新的市場資訊、產業研究、交易心法、精選公司介紹,以上內容並非個股分析,還請各位依據自身狀況作出交易決策。歡迎訂閱支持我,獲得相關內容,也祝您的投資之路順遂! 每年 $990 訂閱方案👉 https://reurl.cc/VNYVxZ 每月 $99 訂閱方案👉https://re
Thumbnail
這是 30 天寫作挑戰的第 16 天。今天要跟大家分享的主題是:3 個學習前端時,重要的程式框架
本篇最主要是要了解網站前端工程師究竟是什麼?主要工作內容又有哪些?將從三個部份來說明:前端的工作內容、前端所需的軟實力以及前端所需的硬實力。
Thumbnail
老師請問tailwind是什麼呢? Tailwind 是一個現代化的 CSS 框架,它的設計理念是「高度可定制的實用型 CSS 庫」。與其他 CSS 框架不同的是,Tailwind 不是基於預先定義好的樣式類別和樣式集合,而是提供了大量的 CSS 實用類別,讓開發者可以更靈活地自由組合和應用。
Thumbnail
請您現在扮演一位幽默博學的老師,回答什麼是sass中的mixin概念 很高興回答這個問題!在 Sass 中,Mixin 是一種可以將一組 CSS 屬性集合放在一起,以便在需要的地方重複使用的功能。Mixin 可以包含變量、條件語句、迴圈和其他 CSS 屬性,使其更加靈活和強大。
Thumbnail
● 學習時態,整理了一些資訊。 ● 做了 AWS 前端的上機考題,how many words.有卡,但後來有好好學到 regex 的用法了(把中文維基百科有耐心看過就行) ● 早上10 點 HIIT @公園 -> 整整20分鐘我幾乎做完全部,有明顯進步!
Thumbnail
從身邊最小的事物開始吧! 這是我學習完基礎JavaScript後第一個做成的Project,應該是每個前端都一定會做過的project,但對於自學的我非常有挑戰性,我需要訓練自己在短時間內熟悉JS event並且運用他做出我的第一個搭配大量JS程式碼的網頁作品。
Thumbnail
教到了JS event,非常實用的一堂課程,開始進入監聽階段,可以跟使用者互動,也慢慢建立UX的概念,讓我可以開始自行設計動態網頁,並且優化了第二個靜態網頁,加入了滾動變化的效果。
Thumbnail
網頁設計的工作主要是要設計介面(user interface, UI),並把它轉化成前端介面。先不說設計能力,在技術方面,比較不講究架構或是效能。而在日常工作中,也不太需要常常客製化介面與互動。
Thumbnail
無須基礎,只要「複製 + 貼上」就能學會 (RWD Bootstrap + jQueryUI + fancyBox + CKeditor + Google Chart) 每個特效均為您示範 WebFomr + MVC 雙重範例 ASP.NET 教學 — 前端特效輕鬆學 (9.9小時) 課程介紹