【JavaScript入門】可変長引数の使い方

こんにちは、フロントエンドエンジニアのまさにょんです。

今回は、JavaScriptでの可変長引数の使い方ついて解説して行きます。

1 基本的な可変長引数の使い方
2 配列を可変長引数として渡す方法
3 【おまけ】可変長引数を利用した Method の使い方
4 JavaScript書籍 Ver. 中級-上級者向け
5 JavaScript書籍 Ver. 初級者向け
6 参考・引用
7 最近の投稿

基本的な可変長引数の使い方

可変長引数とは、固定された引数ではなく可変的な引数のことです。

JavaScriptの可変長引数は「 … 」で表現します。

これは「Spread-構文」と同じ記述の仕方ですね。

可変長引数を受け取る側は、引数たちを「配列」の形で受け取ります。

可変長引数の基本的な使い方

1. 可変長引数は、「...」(Spread-構文)と同じ記述の仕方をします。
2. 可変長引数を設定すると、受け取る側では「配列」の形で受け取ります。

// < JavaScript-可変長引数-基本的な使い方 >

// 1. 可変長引数は、「 ... 」(Spread-構文)と同じ記述の仕方をします。
const robotamaFunction = (...robotamaParams) => {

    // 可変長引数は、配列の形で受け取る！
    console.log(robotamaParams);

    // 可変長引数は、配列の形式で渡ってくるので、lengthでParameterの数をCheckできます！
    console.log(robotamaParams.length);

    console.log(robotamaParams[0]);
    console.log(robotamaParams[1]);
    console.log(robotamaParams[2]);
    console.log(robotamaParams[3]);
};

// 2. 今回は、3つの引数を渡してみる！
robotamaFunction('グンマー帝国', 'ロボ玉', '翔んで埼玉');

// < 実行結果 >
// (3) ['グンマー帝国', 'ロボ玉', '翔んで埼玉']
// 3
// グンマー帝国
// ロボ玉
// 翔んで埼玉
// undefined => 存在しないDataのindex番号へのAccessはundefinedになる！

配列を可変長引数として渡す方法

配列を可変長引数-対応のMethodに渡すときは、Spread構文で配列を展開して渡します。

実際にCodeで確認していきましょう。

// < JavaScript-可変長引数 Ver. 配列を可変長引数として渡すPattern >

// 1. 可変長引数は、「 ... 」(Spread-構文)と同じ記述の仕方をします。
const robotamaFunction = (...robotamaParams) => {

    // 可変長引数は、配列の形で受け取る！
    console.log(robotamaParams);

    // 可変長引数は、配列の形式で渡ってくるので、lengthでParameterの数をCheckできます！
    console.log(robotamaParams.length);

    console.log(robotamaParams[0]);
    console.log(robotamaParams[1]);
    console.log(robotamaParams[2]);
    console.log(robotamaParams[3]);
};

const robotamaDev = ['ロボ玉試作1号機', 'ロボ玉試作2号機', 'ロボ玉試作3号機'];

// 2. 配列を可変長引数-対応のMethodに渡すときは、Spread構文で配列を展開して渡す！
robotamaFunction(...robotamaDev);

// < 実行結果 >
// (3) ['ロボ玉試作1号機', 'ロボ玉試作2号機', 'ロボ玉試作3号機']
//  3
// ロボ玉試作1号機
// ロボ玉試作2号機
// ロボ玉試作3号機
// undefined

【おまけ】可変長引数を利用した Method の使い方

最後に、可変長引数を利用したMethodの使い方を見ていきましょう。

可変長引数に対応したArray.prototype.push()に対して「 … 」(Spread-構文)で配列の中身をまとめて引数として渡してみます！

// < おまけ: 可変長引数を利用した Method の使い方 >

const robotamaDevloper = ['ロボ玉試作1号機', 'ロボ玉試作2号機', 'ロボ玉試作3号機'];
const robotama = [];

// 1. 配列を展開して、push => まとめて Push
robotama.push(...robotamaDevloper);

console.log({robotama});
// robotama: (3) ['ロボ玉試作1号機', 'ロボ玉試作2号機', 'ロボ玉試作3号機']