JavaScript の関数に配列を渡す

JavaScript の関数に配列を渡すときは、関数が配列全体を1つの値として受け取るのか、それとも配列の各要素を個別の位置引数として受け取るのかを確認します。配列を1つの引数として渡す場合はそのまま渡し、個別の引数として渡す場合は apply() または spread 構文を使います。通常の関数の内部で、渡された配列を arguments[0] から読み取る方法もあります。これらの方法は、それぞれ異なる関数シグネチャに適しています。

以下の例は、それぞれ単独で実行できる JavaScript のコードです。apply()、spread、arguments の例には、実行時に表示される出力も示しています。

apply() を使って配列の要素を関数の引数として渡す

Function.prototype.apply() は、指定した this 値と、要素が位置引数として渡される配列または配列風オブジェクトを使って関数を呼び出します。第1引数は this 値、第2引数は引数のリストです。arguments オブジェクトを返すわけではありません。apply() が返すのは、呼び出した関数自身の戻り値です。引数リストを渡しながら this を指定したい場合に、この方法を使います。

この例では、配列の各要素が対応する仮引数に渡されます。ラベルには、指定した this 値が使われます。

const names = ['Mehvish', 'John', 'Henry', 'Thomas'];

function displayName(first, second, third, fourth) {
  console.log(`${this.label}: ${first}, ${second}, ${third}, ${fourth}`);
}

displayName.apply({ label: 'Names' }, names);

Names: Mehvish, John, Henry, Thomas

関数が配列を1つの引数として受け取る場合は、仮引数を1つだけ宣言し、names をそのまま渡します。関数には配列全体が1つの値として渡されます。

const names = ['Mehvish', 'John', 'Henry', 'Thomas'];

function displayName(names) {
  console.log(names.join(', '));
}

displayName(names);

このシグネチャは、上の4つの仮引数を持つ displayName とは異なります。配列をそのまま渡すと関数が受け取るのは配列1つですが、apply() を使うと配列の4要素が個別の引数として渡されます。spread 構文も、関数の呼び出し箇所で同じように要素を展開します。

Spread 構文を使って配列の要素を関数の引数として渡す

spread 構文（...）は、配列などの反復可能な値を関数呼び出し時に個別の値へ展開します。各値は順番に位置仮引数へ割り当てられます。関数が個別の引数を受け取り、apply() で this 値を指定する必要がない場合に使います。

const names = ['Mehvish', 'John', 'Henry', 'Thomas'];

function displayName(first, second, third, fourth) {
  console.log(`${first}, ${second}, ${third}, ${fourth}`);
}

displayName(...names);

Mehvish, John, Henry, Thomas

この例では、displayName は4つの文字列引数を受け取ります。一方、displayName(names) と呼び出すと、配列全体を値とする引数が1つ渡されます。関数の仮引数と呼び出し式は、関数が必要とするデータの形式に合わせます。spread 式は呼び出し箇所で使うため、関数側では通常の名前付き仮引数をそのまま使用できます。

arguments オブジェクトで関数に渡された引数を読み取る

arguments オブジェクトは通常の関数内で利用でき、その呼び出しに渡された値を含みます。length プロパティとインデックス付きの要素を持つ配列風オブジェクトですが、Array ではありません。そのため、すべての Array メソッドを備えているわけではありません。アロー関数は独自の arguments オブジェクトを持たないため、この方法には通常の関数を使います。

関数を配列1つで呼び出すと、その配列は arguments[0] に格納され、arguments.length は 1 になります。関数内では、その位置にある配列を調べたり、反復処理したりできます。arguments が示すのは関数が受け取った値であり、配列を渡すための仕組みではありません。

const names = ['Mehvish', 'John', 'Henry', 'Thomas'];

function inspectArguments() {
  console.log(arguments.length);
  console.log(arguments[0].join(', '));
}

inspectArguments(names);

1
Mehvish, John, Henry, Thomas

配列メソッドを使うために配列風の arguments をコピーするには、Array.from(arguments) を使います。入力が決まっている現代的な関数では、名前付き仮引数や rest パラメーターを使うほうが明確な場合が多くあります。配列をひとまとまりのコレクションとして扱うならそのまま渡し、各要素を個別の引数として扱うなら apply() または spread 構文を選びます。