iT邦幫忙

0

30天不間斷的文章之旅_變數宣告的 var、let、const

這是第一次在公開的地方撰寫 JavaScript 相關的技術文章,若有錯誤或需要補充的地方,也歡迎在下方留言讓我知道喔~~~謝謝大家!!

真正的技術文章第一篇,讓我們一起來看看基本的變數宣告吧!

在 ES6 出現了 let、const 宣告變數的關鍵字。它們究竟和 var 所宣告得變數有何不同呢?繼續看下去吧....

和 var 有 87 分像的 let

  • 當變數名稱有相同時,會跳出錯誤提醒
  • 增加了區域作用域的概念

在過去使用 var 宣告變數時,如果有不小心重複宣告到相同的變數名稱時,不僅不會有任何問題,後面的值還會覆蓋掉一開始所賦予的值。

var myName = '大明';
var myName = '小明';
console.log(myName); //小明

因為在開發的過程中,我們不是刻意的要去宣告相同的變數名稱,也不是刻意要去覆蓋掉原有的值。
當然程式碼如果少少的,馬上發現也很好處理,但如果程式碼一多,要維護或是除錯,基本上就會不太好查找。

把 var 改成 let 呢?

var myName = '大明';
let myName = '小明';
Uncaught SyntaxError: Identifier 'myName' has already been declared 

馬上就會跳出錯誤訊息,告訴你 myName 這個變數已經使用過了。

let還新增了區域作用域的概念

以往使用 var 宣告的變數,會被掛載在 window 底下,也就是全域環境底下。但變數都散落在全域環境底下不是一件好事;而 var 宣告的變數是以 function 來區分作用域的,也因此有了全域變數區域變數的概念。
那我們來看一段程式碼,

for (var i = 0; i<10; i++) {
  console.log(i); // 0,1,2,3,4,5,6,7,8,9
}
console.log(i); // 10
for (let k = 0; k < 10; k++) {
  console.log(k); // 0,1,2,3,4,5,6,7,8,9
}
console.log(k); // Uncaught ReferenceError: k is not defined

從上述程式碼可以發現,變數 i 在全域環境下還可以取得i的值;而變數 k 則是跳脫出for迴圈之後就無法取得該值。
因為 let 的作用域是在blockblock是指 {} 符號,有人稱它花刮號,我是習慣叫它大括號。因此跳出了for迴圈的{}之後就無法取得k的值。這就是區域作用域的概念。不只是 let 有這樣的概念,const 也是如此。

說一是一,說二是二,一但宣告就無法修改的 const

const 宣告一個常數,簡單來說,就是宣告了就無法再被修改的意思。

const myName = 'Afat';
myName = '臭阿肥';
console.log(myName); //Uncaught TypeError: Assignment to constant variable. 

一旦修改了myName的值,就會跳出錯誤,告訴你不可以修改const所宣告的值。

使用const就一定要賦予值

過去變數可以先宣告(宣告變數未賦予值會是 undefined)但使用const宣告,就一定要賦予值。

const aFat;
//Uncaught SyntaxError: Missing initializer in const declaration 

物件依然維持傳參考

使用 const 宣告的物件,內層屬性依然可以調整,因為物件是傳參考,所以在此依然可以修改屬性。

const classroom = {
  teacher: '王老師',
  classmateA: '同學A',
  classmateB: '同學B'
};
classroom.classmateC = '同學C';
console.log(classroom);

使用console.log查看classroom,就會得到以下的結果。

 {
    classmateA: "同學A"
    classmateB: "同學B"
    classmateC: "同學C"
    teacher: "王老師"
 }

這是因為物件依然是維持傳參考的特性。

let的暫時性死區

以往我們使用var宣告變數時,會出現Hoisting的狀態,因此若我們在創造階段取得變數時,會出現undefined。

console.log(myName); //undefined
var myName = '阿肥';

那麼let呢?

{
  console.log(myName); 
  //Uncaught ReferenceError: Cannot access 'myName' before initialization 
  
  let myName = '臭阿肥';
}

let一樣會有創造階段,但是從創造階段到實際宣告階段會出現暫時性死區TDZ,而在暫時性死區是無法呼叫到該變數的。有創造到執行的概念,但是不會預先出現undefined,而是會直接出現錯誤提示。

以上是今天的var、let、const的差異,如果我有寫錯或是有需要補充的,都歡迎大家跟我說喔~
如果覺得我寫得不錯,很清楚的話也歡迎讓我知道喔~
謝謝大家觀看 /images/emoticon/emoticon08.gif


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言