JavaScript 核心觀念(59) - ES6 章節：Let 及 Const - Let, Const 基本概念

前言

接下來是一個全新的章節，從這個章節開始就會介紹 ES6 語法哦。

Let, Const 基本概念

ES6 語法簡單來講就是為了改善原本開發上的一些問題，所以也可以將 ES6語法當成一個語法糖，那麼什麼是語法糖呢？語法糖的意思是在講後來新增的某個語法，但是對於原本功能並沒有任何影響的一種說法而已，通常來講語法糖會比原本的語法更簡潔且更具有可讀性。

而 ES6 所出的 let 與 const 都是宣告變數使用的，與前面所使用的 var 相同，但是在實作上會有一點點不太一樣。

首先在原本的開發模式時，我們都知道變數會有提升的狀況發生：

1 2	`console.log(myName); // undefined var myName = 'Ray';`

但這個問題並不大，主要是 var 有一個滿麻煩的問題，就是若重複宣告變數，只會被覆蓋掉而不會出現錯誤：

var myName = 'Ray';
var myName = 'Ray2';

console.log(myName); // Ray2

那麼這種狀況在實際開發上是有可能養出一些蟲子，更不用說作用域的問題：

for(var i = 0; i < 10; i++) {
  console.log(i); // 1..2..3..4..5..
}
console.log(i); //10

畢竟 var 是以函式作用域為主。

因此在 ES6 的 let 與 const 就可以解決這個問題，而這兩個宣告變數都有各自的名稱

let
- 變數
const
- 常數

首先先講講 let 變數，這個與 var 非常雷同，甚至你可以 var 直接無痛改成 let，但這時候你可能會問說「這樣子 let 跟 var 有什麼差異？」

差異非常的大，舉例來講 let 是以區塊為作用域

for(var i = 0; i < 10; i++) {
  console.log(i); // 1..2..3..4..5..
}
console.log(i); // i is not defined

除此之外 let 不可重複宣告

1 2	`let myName = 'Ray'; let myName = 'Ray2'; // Uncaught SyntaxError: Identifier 'myName' has already been declared`

而 const 就相對簡單一點了，使用 const 所宣告的變數就無法再次被重新賦予值

1 2	`const myName = 'Ray'; myName = 'Ray2'; // Uncaught TypeError: Assignment to constant variable.`

但是這邊有一個很特別的狀況，你是可以 var 與 let 混用（通常不建議混用，作用域不同容易出現問題），但若是 let 先的話，就會出現錯誤：

1
2
3

let myName = 'Ray';
var myName = 'Ray2';
console.log(myName); // Uncaught SyntaxError: Identifier 'myName' has already been declared

反之若是 var 先宣告依然還是會出現錯誤：

1
2
3

var myName = 'Ray';
let myName = 'Ray2';
console.log(myName); // Uncaught SyntaxError: Identifier 'myName' has already been declared

那麼剛剛有講到 let 與 const 是以區塊為作用域，所以如果想要重複宣告的話，是可以這樣子寫的：

let myName = 'Ray';
console.log('A:', myName); // A: Ray
{
  let myName = 'Ray2';
  console.log('B:', myName); // B: Ray2
}
console.log('C:', myName); // C: Ray

參考文獻

JavaScript 核心篇

JavaScript 核心觀念(59) - ES6 章節：Let 及 Const - Let, Const 基本概念

前言

Let, Const 基本概念

參考文獻

你的支持會直接轉換成更多技術筆記

Terminal

相關文章

分享這篇文章

留言

前言

Let, Const 基本概念

參考文獻

你的支持會直接轉換成更多技術筆記

Terminal

相關文章

JavaScript 核心觀念(63) - ES6 章節：Let 及 Const - Let 及 Const - 課後練習

JavaScript 核心觀念(62) - ES6 章節：Let 及 Const - 學好 ES6 - 使用 ESlint 工具輔助學習

JavaScript 核心觀念(61) - ES6 章節：Let 及 Const - Let 有沒有 Hoisting？暫時性死區介紹

JavaScript 核心觀念(60) - ES6 章節：Let 及 Const - Let, Const 實戰運用技巧

分享這篇文章

留言