JavaScript ES6 – React 白話文運動 01

JavaScript ES6 – React 白話文運動 01

前言

在進入到 React 前端框架之前，先來幫讀者複習有關 JavaScript ES6 的知識，此篇會講解

1. JavaScript 的歷史
2. let、const、var 差異
3. 樣板字面值（ Template Literals ）
4. 箭頭函式（ Arrow Function ）

以上有關於中文翻譯，目前採用 MDN 官方中譯，有筆誤也歡迎讀者留言。

JavaScript ES6 歷史

Brendan Eich 在1995 年發表了 JavaScript，最初 JavaScript 主要功用為網頁中的一些簡單功能實作。之後有了Ajax、Jquery、React.js、Vue.js、Node.js、TypeScript，漸漸的 JavaScript 變成一個主流前相當廣用的程式語言之一，從前端、後端開發都可以做使用。

可能有些讀者知道ES5、ES6，但是那個ES又是什麼呢？

ES 的全名為 ECMAScript 其中 ECMA 為歐洲電腦製造商協會的縮寫（European Computer Manufacrurers Association），後面的數字則是第幾代，因此 ES5 為 ECMAScript 第五代，ES6 為 ECMAScript 第六代。

那麼 ES1 至 ES4 這幾代的版本為何不常聽見呢？

主要原因為 1997年ES1問世之後，還是在簡單的功能實作，ES2、ES3、ES4 則是分別修正了一些問題或是新增了正規表達式以及字串處理，等到了 2009 年 ES5 的出現，才真正有了相當多的功能，包含擴充的陣列方法、物件屬性、JSON。

JavaScript ES6

ES6 則是於2015年出現，並且又新增了相當多方便且有用的功能，這些功能也被實作在各類型的 JavaScript 應用中。

var、let、const 差異

1. var

var 是一個ES5 比較早期的宣告方式，使用 var 就可以做宣告，並且是函數區域（  function-scoped ）或是全域（ globally-scoped ）

2. let

let 是一個 ES6 比較近期的宣告方式，使用 let 就可以做宣告。除了實作了靜態變數域（ Lexical Variable Scope ）使用大括號也會產生一個程式區塊（ Code Block ），在 let 的宣告中，此變數會是區塊區域（ block-scoped ）

3. const

const 是一個 ES6 比較近期的宣告方式，使用 const 就可以做宣告，並且是區塊區域（ block-scoped ）

const 與 let 最大的差別，就是 const 是一個不會被重新指定的值。

var 以及 let 差異

快速用兩種程式碼來展示差異，先使用 ES5 中的 var 做宣告，可以發現在判別式中再次宣告後，離開判別式中的程式區塊（Code Block），變數依然程式區塊中宣告後的值。

var input = "Global";
if(input){
	var input = "Block";
	console.log("input");
	// 會輸出變數 Block
}
console.log("input");
// 會輸出變數 Block

這邊如果再次使用 ES6 中的 let 做宣告，可以發現在判別式中再次宣告後，其影響範圍只會在程式區塊（ Code Block ）之中，變數則是不會影響到外部的全域變數（ global variable ）

let input = "Global";
if(input){
	let input = "Block";
	console.log("input");
	// 會輸出 Block
}
console.log("input");
// 會輸出 Global

透過上述舉例中，應該可以發現到 ES5 中的 var 宣告在區塊中宣告，會污染到其他相同命名的變數，因此現在主流宣告都是使用 let 或是 const 去做宣告。

樣板字面值（Template literals）

這邊使用的是 MDN WEB 的專有名詞，並且使用其中文翻譯，不過也有地方會稱作樣板字串（ Template String ）。

在傳統 JavaScript 語法中，我們會使用加號來去做字串的串連，然而這樣傳統的語法卻相當不直覺。

console.log("This is "+ Name + " and My Phone Number is" + PhoneNumber)

樣板字面值 Template literals 語法出現後，我們可以使用反引號（ back-tick ）將字串進行封閉，並且在字串中，透過錢字號與大括號 ${} 來放置變數，如果將以上程式碼進行改寫的話，會變成以下，可以看到整個字串變得更簡潔易懂。

console.log(`Hello, This is ${Name} and My Phone Number is ${PhoneNumber}`)

箭頭函式（ Arrow function ）

宣告（ Define ）

在傳統 ES5 語法中，使用以下語法做宣告，開頭有一個關鍵字 function 來做宣告，後面接著是函式的名稱，再由大括號來將函式內的實作包起來。

function printHelloWorld() {
    console.log("Hello World")
}
var printHelloWorld = function() {
    console.log("Hello World")
}

另一種宣告方式為函式表達式（ Function Expression ），先宣告一個變數，再將一個函數指定給此變數。

提吊（ Hoist ）

這邊也講一個有關函式的觀念，這邊兩種不同的宣告方式，分別為函式宣告與函式指定。在函式宣告中會被提吊（ Hoist ）但是函式指定則是不會。

printHelloWorld()
function printHelloWorld() {
    console.log("Hello World")
}
// 這樣執行是沒有問題的
printHelloWorld()
var printHelloWorld = function() {
    console.log("Hello World")
}
// 這樣執行是有問題的

參數傳遞

在傳統 ES5 中，函數中是可以傳遞參數的，這邊正規的名詞為引數（ Argument ）

function printHello(name) {
    console.log(`Hello,My Name is ${name}`)
}
printHello("Hogan")

但如果在使用函數時，沒有給與引數的值呢？

會顯示 Hello,My Name is undefined

在 ES6 中，也有提供函數預設值，只要在函數宣告中，直接將引述做指定給值，就可以避免問題了。

function printHello(name = "Hogan") {
    console.log(`Hello,My Name is ${name}`)
}

printHello()
    // Hello,My Name is Hogan
printHello("Bo Bo")
    // Hello,My Name is Bo Bo

箭頭函數式（Arrow Function）

箭頭函數式（ Arrow Function ）是 ES6 中新增的功能之一，他可以在不使用 function 關鍵字下去做函式宣告，甚至可以不用給與函數名稱以及回傳值。

在未來的 React 實作中，也會相當常去使用箭頭函數是，是一個相當重要且好用的功能。

以下為傳統 ES5 的函數指定宣告方式，有關鍵字 function 以及 return 。

var printHello = function(name) {
    return ("Hello " + name)
}

console.log(printHello("Hogan"))

透過箭頭函數式（ Arrow Function ）則可以改寫成以下

const printHello = (name) => `Hello ${name}`

console.log(printHello("Hogan"))

結語

這篇針對 JavaScript ES6 中的一些新功能以及概念做了介紹，並且使用程式碼進行講解。

讓讀者在進入 React 前端框架語法之前，複習一下原本的 JavaScript 語法。

如果有任何建議與疑問也歡迎留言！

如果喜歡 React 白話文運動系列文章，請不吝於按下喜歡及分享，讓更多人看到唷～

備註

目前文章已移至 JavaScript ES6 – React 白話文運動 01

未來文章一併更新於此網站 Hogan.B Lab

並且包含多語系 繁體中文、英文、日文、簡體中文

觀看分類：React 白話文運動、其他系列

其他文章參考

JavaScript ES6 – React 白話文運動 01

為何大公司都使用Nx ? Monorepo工具 5 分鐘快速建置

你真的懂Monorepo？ 5 分鐘帶你認識前端大型架構

Zustand 是什麼？ React 前端狀態管理