【Amazon】人気の商品が日替わりで登場!
毎日お得なタイムセール!商品をみる

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

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

JavaScriptの学習におすすめ書籍
1冊ですべて身につくJavaScript入門講座
総合評価
( 5 )
メリット
  • 誰でも分かるように嚙み砕いて説明してくれる
  • アニメーションの知識が深く学べる
  • 1つのWebサイトを作りながら学べる
先輩くん

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

後輩ちゃん

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

全プログラマー必見!
変数名/関数名にもう悩まない!
リーダブルコード
総合評価
( 5 )
メリット
  • 美しいコードが書けるが自然と書けるようになる
  • 他の開発者が理解しやすいコードになる
著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典
¥2,640 (2023/07/23 02:48時点 | Amazon調べ)
目次

基本的な関数の使い方

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

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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次