JavaScript

【JavaScript】関数に渡す値の数を固定ではなく可変にしたい時に使えるテクニック

本記事では、JavaScriptの関数に渡す値の数を固定ではなく可変にしたい時に使える2つのテクニックについて解説しています。

JavaScriptの学習におすすめ参考書
改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

参考書が苦手な人はUdemyの動画がおすすめ
ガチで学びたい人のためのWEB開発徹底実践(フロントエンド編)

動画情報
作成者CodeMafia
学習時間19.5時間
受講者数28,547人
レビュー (5,025件)
動画の詳細はこちら

基本的な関数の使い方

JavaScriptで関数で引数を使う場合、基本的に渡される値の数と引数の数を同じに設定します。

function sample(val1, val2) { // -> 引数を2つ設定する
  console.log(val1); // -> A
  console.log(val2); // -> B
}

sample("A", "B"); // -> 値を2つ渡す

上記のような設定は、渡される値の数と引数の数を同じであれば問題ありませんが、もし渡される値の数が常に固定ではなく可変の場合どうなるでしょうか?

function sample(val1, val2) { // -> 3つの目の引数を設定していないためCが渡されない
  console.log(val1); // -> A
  console.log(val2); // -> B
}

sample("A", "B", "C"); // -> 3つの値を渡す

このように通常のやり方では引数の数より多い値を取得することができません。

このような状況でレスト構文argumentsオブジェクトを使うことで、簡単に渡された値を取得することができます。

レスト構文

レスト構文とは引数の前に「…」を付けることで、引数に渡る全ての値を配列に格納することができます。

function sample(...val) {
  console.log(val);
}

sample("A"); // -> ['A']
sample("A", "B"); // -> ['A', 'B']
sample("A", "B", "C"); // -> ['A', 'B', 'C']

また、通常の引数とも併用して使うことができ、渡される値の最初の2つだけ引数に渡して残りの値は…で配列に格納することもできます。

function sample(val1, val2, ...other) {
  console.log(`val1:${val1}`); // -> val1:A
  console.log(`val2:${val2}`); // -> val2:B
  console.log(`other:${other}`); // -> other:C,D
}

sample("A", "B", "C", "D");
【JavaScript】…ドット3つの意味と使い方|スプレッド構文とレスト構文について理解しよう本記事では、JavaScriptで使用される…ドット3つのスプレッド構文とレスト構文について解説しています。...

argumentsオブジェクト

argumentsオブジェクトとは関数内でしか使用することができない特殊なオブジェクトです。

argumentsオブジェクトはレスト構文と同様に値を配列に格納します。レスト構文との違いは引数を一つも設定する必要がないことです。渡された値はargumentsオブジェクトの中に格納されていくため、arguments[0]のように記述することで、値を参照することができます。

argumentsオブジェクトの使い方は以下のとおりです。

function sample() {
  for (let i = 0; i < arguments.length; i++) {
    console.log(`arguments[${i}]:${arguments[i]}`);
    /*
    arguments[0]:A
    arguments:B
    arguments:C
    arguments:D
    */
  }
}

sample("A", "B", "C", "D");
【JavaScript】argumentsオブジェクトの使い方本記事では、JavaScriptのargumentsオブジェクトの使い方について解説しています。...

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村