JavaScript ES6 – React 白話文運動 01
前言
在進入到 React 前端框架之前，先來幫讀者複習有關 JavaScript ES6 的知識，此篇會講解
- JavaScript 的歷史
- let、const、var 差異
- 樣板字面值（ Template Literals ）
- 箭頭函式（ 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
