未経験からエンジニアになりたい人必見!
おすすめプログラミングスクール3選!

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

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

JavaScriptの学習におすすめ参考書
改訂新版JavaScript本格入門

参考書が苦手な人はUdemyの動画がおすすめ
ガチで学びたい人のためのJavaScriptメカニズム

作成者 CodeMafia
学習時間 20.5時間
受講者数 16,593人
レビュー (2,383件)

基本的な関数の使い方

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

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

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

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

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

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

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

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

レスト構文

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

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

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

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

JavaScript
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オブジェクトの使い方は以下のとおりです。

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

sample("A", "B", "C", "D");
【JavaScript】argumentsオブジェクトで関数に渡された値を取得する方法【JavaScript】argumentsオブジェクトで関数に渡された値を取得する方法