[筆記] JavaScript中coercion的實際使用--建立函式預設值(default value)

圖片來源：JavaScript 101

由於在目前的JavaScript中，撰寫函式的時候並不像PHP或其他程式語言可以直接賦予預設值(未來應該可以)， 因此在這篇文章中，我們會說明如何用coercion這樣的特性來建立非常簡潔的函式預設值。

我們先建立一個函式，取名叫做greet。這個函式非常簡單，包含一個變數，就是去呼叫名字(name)而已。

在最下面的地方，我們去呼叫這個函式，並且代入"PJCHENder"，可想而知的，console的結果如下：

如果在函式中沒有代入任何的值的話，會怎麼樣呢？

如果我們在函式中沒有將name給值，那麼會發生什麼事呢？

結果如下：

#1：和其他程式語言不太一樣的地方，JavaScript並沒有回傳任何錯誤的訊息，而是將name直接回傳"undefined"。這是因為在程式執行的過程中，一個新的execution context被建立，而name這個變項就被建立在函式裡面，只是還沒被給值而已，在變項建立後尚位給值前，該變項就被賦予了undefined這個值（這是類似Hoisting的概念，可參考：[筆記] 談談Javascript 中的 Hoisting）。

#2：undefined被強制轉換成字串

利用coercion這樣的特性建立預設值 (default value)

那麼，我們要如何利用coercion這樣的特性來建立預設值呢？

作法如下，我們新增一列指令就可以達到預設值的效果了。

這時候如果name沒有值，就會顯示<Enter your name here>。

為什麼這樣短短一行就可以當作預設值呢？

在[筆記] 談談JavaScript的Precedence和Associativity中我們說明過Precedence和Associativity的觀念，所以當一列程式碼中，同時出現兩個運算子(Operators)時，我們可以在MDN Operator precedence來查一下"="和"||"誰的Precedence比較前面：

因為 "||" 比 "=" 擁有更高的precedence，所以會先執行"||"的部分，而且"||"是由左至右讀取。

所以讓我們先來看一下" || "：

我們可以發現，當我分別輸入true || false, true || 'Hello' 和 false || 'Hello'都會分別回傳不同的結果。

當左邊是true的時候，因為會先讀取到true，所以會直接回傳true；但當左邊是false的時候，就會判斷右邊是true會false，當右邊是一個字串時，它會判斷是true，同時回傳字串。

同樣地，因為coercion的關係，如果"||"的左邊沒有值，則都會被判斷成false。

而這也就是為什麼我們可以用那一行簡短的指令，當作預設值的寫法，因為，當name不存在時就會是false，這時候就會讀取"||"右邊的字串，同時回傳該字串的值。

但這樣預設值的寫法有一個限制，就是變數不能是0，如果變數是0的話，會被當成false，結果則會跑出預設值。

→回到此系列文章目錄

資料來源

[Udemy] JavaScript: Understanding the Weird Parts