# Day 30：ES10 醞釀中 —— 擁抱 JS の 未來

終於來到最後一天尾聲。

![](https://i.imgur.com/e77c9Yp.png)\
(Source: [白爛貓貼圖](https://store.line.me/stickershop/product/1236945/?ref=Desktop))

## 擁抱 JavaScript 的未來

這篇文章的題目是擁抱 JavaScript 的未來，就讓我們在尾聲來看一下 JavaScript 的歷史和未來。

### JavaScript 的誕生

先簡單介紹一下 JavaScript 的背景。還記得 Day 1 文章看到的這位老兄嗎？

![](https://i.imgur.com/mbI00JX.png)\
(Source: [Thanks Brendan for giving us the Javascript : ProgrammerHumor - Reddit](https://www.reddit.com/r/ProgrammerHumor/comments/8srix1/thanks_brendan_for_giving_us_the_javascript/))

這位笑得你心裡發寒的，就是 JavaScript 的發明者 Brendan Eich。

1995 年 Brendan Eich 在 Netscape 公司的網羅下，為用戶端瀏覽器發明一個腳本語言，最初命名為 Mocha，後來改名 LiveScript，隨後為了搭上當時 Java 話題性的順風車，再度易名為 JavaScript。

(Wiki 上說 Brendan 只用 10 天就設計出原型，果真神人……)

這個商業上的命名考量也造成歷來許多人的誤解和疑惑：Java 和 JavaScript 有什麼關係？

![](https://i.imgur.com/6qUTmr7.png)\
(Source: [Wiki - 網景](https://zh.wikipedia.org/wiki/%E7%B6%B2%E6%99%AF)、[Wiki - 昇陽電腦](https://zh.wikipedia.org/wiki/%E6%98%87%E9%99%BD%E9%9B%BB%E8%85%A6))

雖然當年 Netscape 和發明 Java 的 Sun 公司之間有合作關係，使 JavaScript 在語法上受到 Java 影響和啟發。

但基本上 **Java 和 JavaScript 的關係就像太陽和太陽餅——沒有關係**。

### ECMAScript 等於 JavaScript？

1996 年 11 月，Netscape 公司決定將 JavaScript 提交給標準化組織 ECMA，希望這種語言能夠成為國際標準。

![](https://i.imgur.com/Ni37bmp.png)\
(Source: [Wiki - Ecma國際](https://zh.wikipedia.org/wiki/Ecma%E5%9B%BD%E9%99%85))

ECMA 是一家國際性會員制度的資訊和電信標準組織。1994年之前名為**歐洲電腦製造商協會** (**E**uropean **C**omputer **M**anufacturers **A**ssociation)。1994年之後，因為電腦的國際化，改名 Ecma 國際 (Ecma International)。

1997 年 6 月，ECMA 發布 ECMA-262 標準第一版，**以 JavaScript 語言為基礎，制定了瀏覽器腳本語言的標準，並將這種語言稱為 ECMAScript**，這就是 ES 初代目—— ECMAScript 1.0。

而 JavaScript 就是 ECMAScript 最著名的實現 (Implementation)。

所以嚴格來說，**ECMAScript 指的是一種標準規格 (Standard)，JavaScript 是這個標準的實現 (Implementation)**。除了 JavaScript，ActionScript 和 JScript 也都是 ECMAScript 標準的實現語言。

不過由於 JavaScript 的強勢發展，現在我們在溝通時，幾乎可以把 ECMAScript 和 JavaScript 劃上等號。

### ECMAScript 的成長史

ECMAScript 自 1997 年正式被發布為標準後，也持續有新版本制定。

以下是到今年為止的 JavaScript 版本歷史，參考就好：

| 版本  | 正式名稱            | 發布年份 | 備註   |
| --- | --------------- | ---- | ---- |
| 1   | ECMAScript 1    | 1997 | 第一版  |
| 2   | ECMAScript 2    | 1998 |      |
| 3   | ECMAScript 3    | 1999 |      |
| 4   | ECMAScript 4    | ---  | 從未發布 |
| 5   | ECMAScript 5    | 2009 |      |
| 5.1 | ECMAScript 5.1  | 2011 |      |
| 6   | ECMAScript 2015 | 2015 |      |
| 7   | ECMAScript 2016 | 2016 |      |
| 8   | ECMAScript 2017 | 2017 |      |
| 9   | ECMAScript 2018 | 2018 |      |

**從 ES6 開始正式名稱改用年份表示**，因此會看到「ES6」或「ES2015」這兩種說法。

可以注意到，從 2015 年開始突然很勤勞，每一年都有一個新版本發布。

### 年年擁抱新的 ECMAScript

ECMA 中負責制定 ECMAScript 標準的是**第 39 號技術專家委員會** (Technical Committee 39)，**簡稱 TC39**。

任何人都可以向 TC39 標準委員會提案，要求增修語法。

> ECMAScript 目前所有提案可以在 [TC39 的官方 GitHub](https://github.com/tc39/ecma262) 查看。

一個新的語法從提案到變成正式標準，需要經歷五個階段，每個階段都需要由 TC39 委員會批准：

* Stage 0: Strawman (展示階段)
* Stage 1: Proposal (提案階段)
* Stage 2: Draft (草案階段)
* Stage 3: Candidate (候選階段)
* Stage 4: Finished (定案階段)

一個提案只要能進入 Stage 2，幾乎就代表會被包含進未來的正式標準裡。所以有些工具會提供定案階段前的語法測試，例如[Babel 的線上 REPL](https://babeljs.io/repl)。

![](https://i.imgur.com/hifPNmy.png)\
(Source: [Babel REPL](https://babeljs.io/repl))

TC39 委員會想讓標準的升級成為常規流程，決定**在每年的 6 月份正式發布一次，作為當年度的正式版本**。接下來的時間就在這個版本的基礎上做增修，直到下一年的 6 月，草案自然變成新一年的版本，所以可以預期明年的 6 月就會有 ES10 誕生。

每年都有一個新版本發布是一個很快的速度，各家瀏覽器的實作支援要趕上自然會有落差，所以 Babel 這樣的轉譯工具更顯重要。這樣的發布速度也反映了 JavaScript 是何等活躍。

究竟 ES10 又會有什麼新特性，就讓我們拭目以待吧！

## 尾聲

這樣有意義的技術鐵人賽相信未來幾年都還會舉辦，很想勸世未來的勇者：一定要提早準備，不要像筆者自作孽。

標題帶點日文風味，是因為過去 30 天的感覺就像每天被追稿的連載漫畫家。

![](https://i.imgur.com/juNeeAW.png)\
(Source: [網路圖片](https://www.google.com.tw/search?q=%E6%BC%AB%E7%95%AB%E5%AE%B6+%E8%B6%95%E7%A8%BF\&rlz=1C1SAVA_enTW523TW523\&source=lnms\&tbm=isch\&sa=X\&ved=0ahUKEwin9KaM5s_eAhWBErwKHbsiAM8Q_AUIDigB\&biw=1280\&bih=882#imgrc=aAmXWBceBZbs2M:))

### 鐵人賽果然不是浪得虛名

![](https://i.imgur.com/eBaKKLW.png)\
(Source: [網路圖片](https://nos.netease.com/v163/snapshot/20180108/WaugI2823_cover.jpg))

這次參賽的決定頗為倉促，別說什麼庫存，開賽死線的前 3 天才決定報名、開始規劃主題大綱。報名時我心裡還想：哼，連續 30 天發文、每篇最低門檻才 300 字有什麼難，難道每天連一、兩個小時都撥不出來？

果然事情不是憨人想得這麼簡單。

![](https://i.imgur.com/wqbkXte.png)\
(Source: [網路圖片](https://komicolle.dreamhosters.com/pix/img12426.jpg))

技術文章和小說散文在寫作性質上有別，技術性質的內容本來就比較不易閱讀，需要花更多心力在文句修飾、編排潤飾，避免閱讀起來過於生硬乏味。

偏偏我又是屬於慢產型的寫作者，從發想、構思、將意念轉成草稿文字、編排文章脈絡、組織成條理性的敘述、想梗、潤飾、校稿，一篇文章花個五、六小時以上幾乎是基本盤，還不含技術研究的時間。

一天撥出一兩小時不難，每天撥出一兩小時就很具挑戰，何況還不是只要一兩小時。

生活也不會只有鐵人賽這一件事要忙，永遠無法知道何時會冒出事件需要處理，但一天只有 24 小時是肯定的。

在追稿狀態下要持續維持文章品質極難，回想過去 30 天的生活，扣掉一些必須處理的事件穿插，剩下的回憶幾乎是工作、吃飯、寫稿、熬夜、睡覺、工作、吃飯、寫稿、熬夜、睡覺，中間一度覺得自己快棄賽。

來到第 30 天，真的有種恍如隔世的感覺。

### 說好的 ES7、ES8 呢？

由於參賽倉促，沒時間學新東西，只好把不久前在學的 JavaScript 拿出來獻寶，看能不能炒出什麼好菜。

思考主題大綱時，本來考慮走新手教學路線，也就是規劃一份 30 天由淺入深的 JavaScript 入門教材，對象是從沒學過程式的人。

但後來覺得這件事在今年已經以現場程式教學的形式做過，雖然口頭教學和靜態教材是不同的挑戰，但在鐵人賽重複自己實在不太理想。沒辦法學新東西來參賽，還是希望在參賽過程能對自己有點收穫。

最後主題定位在針對 JavaScript 裡一些我認為比較混亂、抽象需要整理的觀念，或是比較新的用法，強化自己對 JavaScript 的掌握，所以 Day 1 文章還提到這 30 天的主題預計會包含 ES6、ES7、ES8 的新特性。

But，就是這個 But。

**有些概念在腦袋裡以為自己懂了是一回事，化成具體的口頭表達或文字描述確認自己真的懂了是另一回事，能講到別人也懂又是另一回事**。

為了將概念轉換為文字，需要更具體地去回顧細節，才發現自己可能還有某個觀念沒有釐清，本來以為很簡單的一個小觀念，越挖越深，細節竟然無窮無盡。

> 例如 Day 10 介紹了 Hoisting 觀念，本以為是一個相對簡單的小觀念，經邦友指正分享，才知道背後原理深不見底，精通二字談何容易。

不同觀念間又有先後關係，順序不對，閱讀節奏也會不順。

於是在 30 天的過程中，原先規劃的主題大綱不斷調整順序，一些本來沒在計畫內的主題也跳出來插隊。

這讓我想起作家倪匡在「我看金庸小說」一書裡，對「天龍八部」前言與小說後續發展不一的評語：

> 「寫作前的計畫、意願是一回事，寫出來的小說是怎麼樣的，又是另一回事。」 「計畫在創作的過程中，往往無法實踐，會中途突然改變，會有新的意念突然產生，會無法控制自己。」

沒想到這個系列最後只有帶到 ES6 少數特性，原本預計會提到的 ES6 解構賦值、Promises、Classes、Module，甚至 ES8 的 async/await，通通都沒有～

![](https://i.imgur.com/ynA5XVD.png)\
(Source: [Youtube](https://www.youtube.com/watch?v=HzXLJyHLStc))

還好，就像 Day 1 文章提到，近年 JavaScript 果然是個大明星。放眼望去今年的鐵人賽參賽主題，以 JavaScript 為題的應該可以湊個三五桌麻將，別說 ES5、ES6，甚至不乏 ES8、ES9。

![](https://i.imgur.com/F9nXAet.png)\
(Source: [Youtube](https://www.youtube.com/watch?v=b3op8Vo00Ec))

既然如此，新版本的語法介紹也不差我一個湊熱鬧。與其把一堆觀念以沾醬油的方式介紹過一輪，不如好好做個深度整理。不求主題涵蓋範圍包山包海，但求釐清一些微妙的概念。

就成果來說筆者自己還算欣慰，在維持不令自己汗顏的文章品質前提，不敢說多有深度，至少不是走馬看花淺淺帶過，多少釐清了一些抽象觀念，甚至糾正了自己原先理解錯誤的觀念。

**最後，感謝訂閱這個系列的邦友、以及正看著這篇文章的您，筆者能撐過血尿的 30 天，你們的支持是十分重要的鼓勵。**

就讓我用 Day 7 的一段範例程式碼來為這個系列劃下句點：

```javascript
// Day 7
var gameName = "IT Help 2019";
var gamer = "OneJar", topic = "Something about JavaScript", progress = 7;
var isFinished; // A variable declared without a value will have the value **undefined**.

// Day 30
progress = 30;
if(progress == 30){
    isFinished = true;
    console.log('Thank you guys!');
}
```

## References

* [W3Schools - JavaScript Versions](https://www.w3schools.com/js/js_versions.asp)
* [ECMAScript 6 入門](https://es6.ruanyifeng.com/#docs/intro)
* [「译」ES5, ES6, ES2016, ES.Next: JavaScript 的版本是怎么回事？](https://huangxuan.me/2015/09/22/js-version/)
* [JavaScript 的历史](https://www.w3school.com.cn/js/pro_js_history.asp)
* [Wiki - 網景](https://zh.wikipedia.org/wiki/%E7%B6%B2%E6%99%AF)
* [Wiki - 昇陽電腦](https://zh.wikipedia.org/wiki/%E6%98%87%E9%99%BD%E9%9B%BB%E8%85%A6)
* [Wiki - Ecma國際](https://zh.wikipedia.org/wiki/Ecma%E5%9B%BD%E9%99%85)
* [Wiki - ECMAScript](https://zh.wikipedia.org/wiki/ECMAScript)
* [Wiki - JavaScript](https://zh.wikipedia.org/wiki/JavaScript)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://something-about-js-book.onejar99.com/day30.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.