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

2022年5月22日2023年7月17日

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

JavaScriptの学習におすすめ書籍

1冊ですべて身につくJavaScript入門講座

総合評価

( 5 )

メリット

誰でも分かるように嚙み砕いて説明してくれる
アニメーションの知識が深く学べる
1つのWebサイトを作りながら学べる

1冊ですべて身につくJavaScript入門講座 [ Mana ]

楽天ブックス

¥2,794 （2024/04/21 02:09時点 | 楽天市場調べ）

Amazonで探す

＼楽天ポイント5倍セール！／

楽天市場で探す

＼ポイント5%還元！／

Yahoo!ショッピングで探す

ポチップ

先輩くん

Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！

後輩ちゃん

初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！

Amazon Kindle Unlimited

全プログラマー必見！
変数名/関数名にもう悩まない！

リーダブルコード

総合評価

( 5 )

メリット

美しいコードが書けるが自然と書けるようになる
他の開発者が理解しやすいコードになる

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック (Theory in practice)

著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤功平, 翻訳:角征典

¥2,640 （2023/07/23 02:48時点 | Amazon調べ）

Amazonで探す

＼楽天ポイント5倍セール！／

楽天市場で探す

＼ポイント5%還元！／

Yahoo!ショッピングで探す

ポチップ

基本的な関数の使い方

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");

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[1]:B
    arguments[2]:C
    arguments[3]:D
    */
  }
}

sample("A", "B", "C", "D");