iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 2
1
Modern Web

透過 ESLint 練習 JavaScript ES6系列 第 2

Day02【ES6 小筆記】變數宣告 - let、const 哪裡好?跟 var 說掰掰

javascript 變數宣告 let、const、var 比較
今天要來介紹 ES6 中新的變數宣告方式的 let、const 並且跟過去我們常用的 var 做比較,我們先來看 airbnb 中關於變數的撰寫建議:

ESLint airbnb 規則

  • 2-1.對於所有的參考使用 const;避免使用 var
  • 2.2 如果你需要可變動的參考,使用 let 代替 var
  • 2.3 請注意,let 與 const 的作用域都只在區塊內

所以 airbnb 的規則就是 不要使用var了,而究竟 let 有什麼好處?要殘忍的拋棄陪伴我們多年的 var 呢?今天就來介紹 let 跟 const 的特性,並且跟過去的 var 做比較吧!


變數的有效範圍

在了解新的變數之前,我們要先知道變數的「有效範圍」,變數的宣告位置,是會影響他們執行的有效範圍的!而有效範圍主要分為「全域變數」跟「區域變數」兩種:

  • 全域變數:在函式外宣告的變數,在整個程式中都可以被存取與修改
var price = 30 ; //這是全域變數  
function count() {
…
}
  • 區域變數:在區塊內等被 { } 包起來的地方宣告的變數(例如 if、else、for、while)
if (true) {
var price = 30 ; //這是區域變數  
}

【var】

var的作用域

var的作用域是「函式作用域」,也就是在 function 內宣告的 var,要在該 function 才有作用啦~會以該 function 範圍為界線,在 function 外面的區域就無法取用了!

function count() {
      var price = 100;
      console.log(price); //出現100,function內的var變數只會存在在function內
}
console.log(price); //出現錯誤,無法存取price

var的缺點

那在這裡 var 有一個大大的缺點,也就是在一些區塊語句(if、else、 for、 while等)裡面用 var 宣告的變數,是會洩漏到全域中的!這樣就有可能會導致一些副作用,可能會彼此影響,或是在工程師交接中增加維護難度。
以下兩個範例:

var price = 20;
If (true) {
      var price = 30;
}
console.log(price) // 出現 30,區域變數覆蓋全域變數
for (var i = 0; i<10 ; i++) {
      …
}
console.log(i) // 出現 10,循環變數洩漏為全域變數

而在 ES6 的版本中,推出了新的變數宣告關鍵字 let 與 const,不會有var的副作用,以下跟大家詳解。


【let】

let的作用域

let 與 var 其實差不多,主要的差別在於 let 所宣告的變項只有在代碼塊區域(block scope)內有效,也就是 { } 包住的區域,所以只要是被所屬{ }包起來的let變數,都不會跑到外面(全域)去!

if (true) {
      let price = 100; // 因為用let宣告,所以price只會存在在if{}大括弧包起來的區塊內
}
console.log(price) // 出現錯誤,無法存取

所以在下方的例子中,兩個 let 互不干擾,if 內的 price 不會覆蓋全域變數的 price 囉!

let price = 20;
if (true) {
      let price = 30;
}
console.log(price) // // 出現20 區域變數不會覆蓋全域變數

有沒有發現~只要是被{ }包起來的區域,就不能在全域存取囉!


【const】

const 就是指「常數」,簡單來說就是不變的數值(例如圓周率)。
宣告上有一些規定:

  • 宣告時就要同時賦值,不然會報錯!
  • 賦值後就不能被更動了!

例如:圓周率

const Pi = 3.14159265 ; //因為圓周率是永恆不變的數值,所以很適合用const來宣告!
console.log(Pi)

let跟const的共同特性

  • 同個區塊上不能重複命名
  • 區塊內宣告,都不會洩漏到全域

結語

以上介紹完畢!希望大家有了解到 let 跟 const 的美好了,未來為了讓開發的專案更加穩定,建議可以使用 const或者 let 這兩種嚴謹的宣告變數來取代 var,讓 var 走入歷史囉~~


上一篇
Day01【ES6 小筆記】ESLint 工具簡介&安裝教學-來個乾淨的程式碼
下一篇
Day03【ES6 小筆記】JS 組字串好方便!一目瞭然最清楚(模板字串符 template literal)
系列文
透過 ESLint 練習 JavaScript ES630

尚未有邦友留言

立即登入留言