---
# System prepended metadata

title: 'Languages that compiles to JavaScript,  its advantages/disadvantages'

---

# Languages that compiles to JavaScript,  its advantages/disadvantages 

### 題目：
> What are some of the advantages/disadvantages of writing JavaScript code in a language that compiles to JavaScript?

## 轉譯（compile）成 JavaScript 的語言?

舉例來說

- CoffeeScript
- Elm
- ClojureScript
- PureScript
- **TypeScript** (現在仍然流行)

除了 TypeScript 以外，這些語言的興衰與 ES2015(ES6) 推出有蠻大的關係

### 以 CoffeeScript 為例，這些語言可能幫我們達成什麼?
（以下是 *10年前* 撰寫談論 CoffeeScript 書作者的看法）

- 在 CoffeeScript 中， variables are auto-scoped，可以避免原生 JavaScript 中在同一個或不同檔案之間 `var` 被意外複寫的狀況 （因為`var` 可以重新宣告）

    :::spoiler 舉例：
    
    在 `foo.coffee` 這個檔案裡面，如果我們寫了:
    ```
    x = 'stringy string'
    ```
    而在 `bar.coffee` 這個檔案裡面，我們寫了:
    ```
    x = 42
    ```
    編譯（compile）這兩個檔案成 JavaScript，並且 concatenate `foo.js` with `bar.js` for deployment 會得到
    ```JavaScript=
    (function() {
        var x;
        x = 'stringy string';
      ...
        }).call(this);
    (function() {
        var x;
        x = 42;
        ...
    }).call(this);
    ```
    所以
    - `foo.coffee` 中的 `x`  和 `bar.coffee` 中的`x` 彼此會完全分離
    - Important feature of CoffeeScript: **Variables never leak from one `.coffee` file to another** 
    :::
    不過，ES6 出現了 `let` ，重複宣告會報錯，所以...

-  `->` 的寫法比 `function(){}` 簡單方便很多, 尤其在callback 當中，另外 Semantic indentation 讓巢狀的 callbacks 易讀性很高
-  一些 if statement 更簡潔易讀（更像英文）的語法
    
    CoffeeScript 中：
    - `unless x` 被 compile 成 `(!x)`
    -  `if x?` 被 compile 成 `(x != null)`
    
    *A great library like* `Underscore.js` *can take care of some of these problems, but not all.*

<br>

### TypeScript 是什麼
> **TypeScript is JavaScript with syntax for types.** 
> A strongly typed programming language which builds on JavaScript giving you better tooling at any scale.


（待補充）


## 這些 Compile 成 JavaScript 語言的優缺點?
### 優點:
- 修復了 JavaScript 中的一些長期問題，拋棄了 JavaScript 的一些 anti-pattern 。
- 在 JavaScript 的基礎上提供一些語法糖，使我们能夠編寫更簡潔的 code( ES5 之前缺乏語法糖的支持，但 ES2015 開始有非常多的支持)
- 對於需要長時間維護的大型專案，靜態類型非常好用（此點針對 TypeScript）。

### 缺點：

- 由於瀏覽器實際上只 run JavaScript，所以需要 build 、compile 轉譯成 JavaScript 的過程
- Debugging can be a pain if your source maps do not map nicely to your pre-compiled source
- 學習成本。對於公司來說，選擇例如 TypeScript 用在專案上面，會增加團隊成本
- 某些語言的 community 比較小，所以對應的資源、課程、書籍和工作比較難找到
- 可能缺乏 IDE（編輯器）的支持。
- 始终落後於最新 JavaScript 的標準。
- Developer 應該仍然要清楚這些語言會被編譯成怎麼樣的 JavaScript 內容，因為那才是真實在 browser 上 run 的 code

<br>

## 補充： JavaScript ES6 新增了什麼
此處列出常用：
- Block Scope 塊級作用域 - `let`, `const`
- Arrow Functions 箭頭函式
- Default Function Parameters 函數預設參數
- Spread/Rest Operator 展開/其餘運算子
- Promise 物件
- Array and Object Destructuring 陣列和物件的解構賦值
- Object Literal Extensions 物件實字擴展
- Template Literals 模版字符串
- for...of 迴圈
- class 關鍵字

現在已經到 ES10 了，不過後續是比較小的 features 陸續增加，沒有像 ES6 (ES2015) 這麼大幅度的變革
****

### 重要參考資料：
[JavaScript ES6 介紹](https://www.fooish.com/javascript/ES6/)