JavaScriptのArray.prototype.join()のデフォルト引数

すぐに読めます。

導入

先日、JavaScriptのbuilt-in objectのArray.prototype.join()の仕様を理解していなかったことでかなり初歩的なバグを産み出しかけました。

本文

具体的には、デフォルト引数の存在です。
以前は「引数で受け取った値でArrayインスタンスの全要素を結合してできた文字列を返す非破壊的なメソッド」だよね〜くらいの理解だったのですが、このメソッドはデフォルト引数に,を持ちます。上記のMDNのサンプルコードをそのまま借用します。

const elements = ['Fire', 'Air', 'Water'];

// case1
console.log(elements.join());
// Expected output: "Fire,Air,Water"

// case2
console.log(elements.join(''));
// Expected output: "FireAirWater"

// case3
console.log(elements.join('-'));
// Expected output: "Fire-Air-Water"

case1では実引数を与えずにjoin()メソッドを実行していますが、戻り値として要素間が,で連結された文字列が得られています。これをカンマ区切りではなく「純粋に各要素が連結された文字列」として取得したい場合、join()メソッドの引数に（デフォルト引数が使われないように）''（空文字）を与える必要があります。

上記のデフォルト引数の存在を忘れると、case2の結果を得るつもりでにcase1と書いてしまいそうなので、自戒をこめてここに残しておきます。

おまけ

ふと、ECMAの仕様書：Array.prototype.join(separator)を確認したところ、

If no separator is provided, a single comma is used as the separator.

とありました。（ECMAさん、実引数なしでスペースなし連結、実引数=','でカンマ区切り連結の方が、実は使いやすくないです？）