javascript 的變數與常數,var 與 let 的差別

在 ES6 之前,javascript 是沒有常數的,當時變數都是用 var 來宣告,宣告的原則有以下幾點:

  • 開頭字元需要是ASCII字元(英文大小寫字元),或是下底線(_)、錢號($),這邊要注意數字不可用於開頭字元。
  • 接下來的字元可以使用英文字元、數字或下底線(_)。
  • 大小寫有差異。
  • 名稱不可使用 javascript 語言保留字詞。
  • 名稱被稱為 identifier,它在程式碼上下文中具有唯一性。

以下這些為 js 的保留字:

break case catch const continue debugger default delete do else finally for function if in instanceof new return switch this throw try typeof var void while with

null true false

class enum export extends import super

implements interface let package private protected public static yield

 

在 ES6 之後多了 const 與 let,先來提 const,const 稱為常數,相對於變數就是無法再之後賦予它新的值。

而 let 跟 var 用起來很像,但有一些不同的地方,主要為:

  • let 與 const 是區塊作用域(block scope)
  • var 是函式作用域(function scope)

 

來看一下範例程式碼介紹區塊作用域與函式作用域的差別:

用 var 宣告的話:

// 宣告變數 a
var a = 10;
if(true){
  var b = 20;
}

// 輸出: a = 10
console.log(a)
// 輸出: b = 20
console.log(b)

 

接下來用 let 宣告:

// 宣告變數 a
var a = 10;

if(true){
  let b = 20;
}

// 輸出: a = 10
console.log(a)
// 因為變數 b使用let宣告,離開if區域便無法被存取
console.log(b) //會顯示沒有定義

 

而 var 跟 let 主要的差別有以下三點:

  1. 塊級區域
  2. 變數提升
  3. 不允許重複宣告

第一點是前面提到的,第三點不能重複宣告應該也容易理解,簡單的說就是不能用 let 在同一區塊內定義一樣的變數。

第二點用以下的範例來說明:

console.log(a); // undefined
var a = 5 ;

console.log(b);
//Uncaught ReferenceError: b is not defined
let b = 5 ;

如果我們先使用變數在定義在,顯示的錯誤會不一樣,這就是兩者的幾個差別。

課程推薦

HTML與SEO實戰應用—並以ChatGPT助力提升網站品質與流量

HTML與SEO實戰應用—並以ChatGPT助力提升網站品質與流量

本課程專為希望深入了解 HTML 並有效結合 SEO 策略的學員設計。我們將重點放在 HTML 的深度學習與應用上,同時穿插介紹如何透過搜索引擎優化提升網站能見度。透過即時互動式的直播教學,加上 ChatGPT 的輔助,您將學習到如何建立一個結構優良、美觀且符合 SEO 標準的網站。這不僅會提升網站的用戶體驗,還會大幅提高網站的搜索引擎排名,進而增加訪客流量和潛在客戶。
用AI強化職場競爭力 ChatGPT、Midjourney從入門到精通

用AI強化職場競爭力 ChatGPT、Midjourney從入門到精通

在快速變遷的職場中,提升競爭力成為關鍵。透過引領潮流的AI技術,ChatGPT和Midjourney將助您勇攀高峰。無論您是AI新手還是專家,這個課程將引導您從入門到精通,解密AI的奧秘,並學習如何運用於職場。
GitHub Copilot AI 程式碼編輯工具應用實務班

GitHub Copilot AI 程式碼編輯工具應用實務班

讓學員瞭解有效地使用該工具來加速開發流程、提高程式碼品質和生產力。課程重點放在以 JavaScript 程式語言為例,介紹 Copilot 的基本原理、使用方法和最佳實踐。

輸入折扣碼 TC1456JA 還可以額外獲得 NT$500 優惠喔。

ChatGPT X Clipchamp AI 生成影片、配音與字幕應用實戰班

ChatGPT X Clipchamp AI 生成影片、配音與字幕應用實戰班

掌握Clipchamp AI的操作技巧,靈活運用Clipchamp AI進行影片編輯和創作,實現創意表達和傳播目的。

輸入折扣碼 TC1451JAN 還可以額外獲得 NT$500 優惠喔。

如何串接多種數位工具資訊?Looker Studio 資料視覺化實戰班|GoogleAds x FB廣告 x GA流量數據

如何串接多種數位工具資訊?Looker Studio 資料視覺化實戰班|GoogleAds x FB廣告 x GA流量數據

Looker Studio除了可協助使用者監控網站流量、廣告成效、選擇匯入資源的管道之外,還可以將數據資料多平台整合、數據報表即時更新、數據範本可重複套用的效益,透過自動化系統,將數據全部匯入同一個報表平台,是企業不可或缺的重要工具。

輸入折扣碼 TC1270JIA 還可以額外獲得 NT$500 優惠喔。

和我們交流

加入我們的社群,裡面會有一些技術的內容、有趣的技術梗,以及職缺的分享,歡迎和我們一起討論。