iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 2
0
自我挑戰組

花三十天找到 JavaScript 沙漠中的綠洲系列 第 2

02 var、let、const 與 ES6 簡介

前言

昨天最後的題目,不知道大家解開了嗎?下面的程式中,有幾個變數、幾個型別、幾個記憶體?

var a;
a = 1;
a = "a字串"
a = true;

答案是一個變數(a)、三個型別(數字、字串、布林值),以及四個記憶體。那麼我們要繼續推進今天的學習囉!

var、let、const

在昨天的學習中,我們知道可以使用 var 來宣告一個變數,但當你實際去看別人寫的程式,可能會發現,咦?有些人用的是 let ,有人用了 const ,這三個詞中間的差別在哪裡?

沒錯,這三個字都是用來宣告變數。但是,用法上可就不盡相同。

var 是裏頭最早被用來宣告變數的,用法並不嚴謹,有些地方甚至有點奇妙。舉例來說,當你在 {} 裡宣告一個東西,在 {} 外仍能取得資料。文字很難說明,讓我們直接進入程式:

{
  var c = 1;
}
console.log(c); //印出1

咦?我 console.log 沒有放在括弧裡還能印出 c 的值?還不只這個哩! var 還有其他特性,來看看昨天的範例:

var a = 5; 
var b = 6;

console.log(a); 
console.log(b);

你想如果我把 console.log(a) 跟 (b) 放到 var 前面會發生什麼事?

console.log(a); 
console.log(b);

var a = 5; 
var b = 6;

印出了 undefined ?雖然程式的世界可能不太一樣,但以文章來說都馬是從上讀到下,我現在還沒宣告 a 跟 b 是誰,為什麼可以劇透得知有 a 跟 b 的存在?

這個劇透行為,我們稱呼為變量提升 hoisting 不是便量,也不是變亮謝謝。意思是,用 var 宣告的變數,就算是寫在很下面,也會一起被提到程式最前面。記得我們昨天講解 chrome 看到的程式跟我們不一樣嗎?當我們給他上面的程式,他看到的長成這樣:

var a;
var b;

console.log(a); 
console.log(b);

a = 5; 
b = 6;

沒錯, var a 和 var b 都被拿到最上面去了。欸,雞婆欸,有考慮過我就是故意寫在最下面的嗎?

再來一個例子:

var d = 1;
var d = 2;
console.log(d); //印出2

我先宣告 d 是 1 ,再宣告他是 2 。額,可以這樣重複宣告嗎?萬一我不小心用到之前宣告過的名字...

為此,誕生了 let 與 const 。就像我們使用的語言會不斷更新,每隔一陣子程式語言也會更新,而 JS 也在 2015 年提出 ES6 這個新規範, let 和 const 便是 ES6 提出的新語法。

let 和 const 使用塊級作用域,因此使用上比 var 嚴謹。在我們剛剛提到的第一個例子{}中,如果使用 let 和 const,無法在{}外面拿到資料,並會跳出錯誤訊息。

{
  let e = 1;
}
console.log(e); //錯誤訊息:Uncaught ReferenceError: e is not defined

第二個變量提升的例子,也在 let 和 const 中做了修正,必須要宣告後才可使用。

console.log(f);
let f = 5; //錯誤訊息:Cannot access 'f' before initialization

當然,也不能重複宣告囉!如果重複宣告他會告訴你,你用的變數名稱之前就被宣告過了。

let g = 1;
let g = 2;
console.log(g); //錯誤訊息:Identifier 'g' has already been declared

最後,則是 let 和 const 的差別。若你使用的是 const ,那麼宣告的當下就要給他一個值,這個值可以是數字、函式、陣列、物件,但如果是數字的話,宣告後就不可以更動了。

什麼意思?請看:

/*數字不可動
const h = 11;
h = 14; //錯誤訊息:Assignment to constant variable.
*/

//函式、陣列、物件可更動
const j = { name: "wang" };
j.name = "lin";
console.log(j); //Object {name: "lin"}

const k = { name: "tang" };
k.age = 15;
console.log(k); //Object {age: 15,name: "tang"} //也可加入資料

ES6 提出的還有很多新語法,如果迫不及待想認識,可以閱讀官方文件和其他人撰寫的文章。我這邊會搭配順序,分開介紹其他 ES6 的語法。讓我們來統整一下今天的學習:

現在,讓我們一起來練習看看,在下面的題目中,會出現正確答案還是錯誤訊息呢?

//習題一
let q1 = 10;
q1= 20;

//習題二
let q2 = 10;
let q2 = 20;

//習題三
const q3 = 10;
q3=20;

學習與參考資料

JS 學徒特訓班教學影片及練習題 37-38 關
JavaScript ES6 Block Scope - let, const:https://www.fooish.com/javascript/ES6/let-const-block-scope.html
JS 筆記 - ES6 let 與 const 特性:https://hsuchihting.github.io/javascript/20200713/1088942586/


上一篇
01 JavaScript 基本概念(載入、註解、除錯、變數)
下一篇
03 運算子
系列文
花三十天找到 JavaScript 沙漠中的綠洲35

尚未有邦友留言

立即登入留言