駆け出しJavaScriptエンジニアが見落としがちな引数を利用した分割代入

この記事の対象

引数と関数の基礎やES6に触れたことがある人
Webエンジニアに転職して1ヶ月経ち、覚えたことをアウトプット

引数の分割代入

第1引数「word」で定義する文字列を、それ以下の文字列を含む第2引数「...words」に分割代入していきます。

※「...」の記述方法はスプレッド演算子と言い、それ以下の配列要素を新たなクローン配列として作成します。詳細は過去の記事をご参照ください。

function addWord(word, ...words) {
    const mergedWords = [];
    
    for(let i= 0; i<words.length; i++) {
        mergedWords[i] = word + words[i];
    }
    return mergedWords;
}

console.log(addWord("駆け出し", "エンジニア", "デザイナー", "イラストレーター"));
// [ '駆け出しエンジニア', '駆け出しデザイナー', '駆け出しイラストレーター' ]

関数addWordの引数の第1引数「word」と第2引数に「words」を与えます。
引数は関数内で使用できる仮の変数になります。

次に、この関数内で、mergedWordsという空の配列を作成します。
空配列内では第2引数の「words」にそれぞれ第1引数「word」をマージさせていく処理を書きます。
以上の処理で完成された配列を関数addWordの処理結果となるようにreturnします。

前述の通り関数addWordの引数は仮の変数なのでconsoleに出力するために、値を与えてあげます。
上の例で言うと"駆け出し"が第1引数になり、第2引数はそれ以下の"エンジニア", "デザイナー", "イラストレーター"になります。

スプレッド演算子に慣れないと、分割代入に違和感を覚えますがJavaScriptエンジニアであれば業務で多用するので覚えておきましょう！