JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで配列を関数の引数として渡す方法【apply()とスプレッド構文の比較】

JavaScriptでは、配列の各要素を関数の個別の引数として渡したい場面がよくあります。本記事では、従来のapply()メソッドを使う方法と、ES6（ECMAScript 2015）で導入されたスプレッド構文（...）を使うモダンな方法を、コード例とともにわかりやすく解説します。

従来の方法：apply()とnullを使った配列の受け渡し

かつては、配列を関数の引数として展開して渡すためにapply()メソッドが使われていました。このとき、thisの参照先としてnullを指定するのが一般的でした。

しかし、本来不要なnullを引数に含めるため、コードの意図が分かりにくくなり、可読性が損なわれるという欠点がありました。

サンプルコード（旧来の方法）

<html>
<body>
<script>
   function shareMar(a, b, c) {
      document.write(a);
      document.write("</br>");
      document.write(b);
      document.write("</br>");
      document.write(c);
   }
   var names = ['NSE', 'BSE', 'NIFTY'];
   shareMar.apply(null, names);
</script>
</body>
</html>

実行結果

NSE
BSE
NIFTY

shareMar.apply(null, names)のように記述すると、配列namesの要素「NSE」「BSE」「NIFTY」が、それぞれ第1・第2・第3引数として順番に関数へ渡されます。

現代的な方法：スプレッド構文（...）を使う

ES6でスプレッド構文が導入されたことで、apply()やnullを使わずに、より簡潔で読みやすいコードを書けるようになりました。

スプレッド構文では、配列名の前に...（ドット3つ）を付けるだけで、配列の要素が自動的に個別の引数へ展開されます。

サンプルコード（スプレッド構文）

<html>
<body>
<script>
   function shareMar(a, b, c) {
      document.write(a);
      document.write("</br>");
      document.write(b);
      document.write("</br>");
      document.write(c);
   }
   var names = ['NSE', 'BSE', 'NIFTY'];
   shareMar(...names);
</script>
</body>
</html>

実行結果

NSE
BSE
NIFTY

shareMar(...names)は、shareMar(names[0], names[1], names[2])と書くのと同じ意味になります。余計なnullが不要になり、コードの意図も一目瞭然です。

まとめ：どちらを使うべきか？

  • apply()＋null：古いブラウザ環境での互換性が必要な場合を除き、現在ではほぼ使われません。
  • スプレッド構文（...）：簡潔で可読性が高く、現在のJavaScript開発における標準的な方法です。

新規のプロジェクトでは、迷わずスプレッド構文を採用しましょう。なお、スプレッド構文は関数呼び出しだけでなく、配列やオブジェクトの結合・コピーなどにも活用できる便利な機能です。

  1. JavaScriptで配列をreduceする方法｜reduce()メソッドで配列要素を合計する

    JavaScriptのreduce()メソッドは、配列の各要素を先頭から順に処理し、その結果を1つの値にまとめる（畳み込む）ための配列メソッドです。数値の合計を求めるだけでなく、配列からオブジェクトを組み立てたり、条件に応じてデータを集約したりと、幅広い場面で活用されています。reduce()メソッドの基本構文 { return 戻り値; }, 初期値);accumulator（アキュムレータ）：直前のコールバック関数が返した値（累積値）。最初のループでは初期値、または配列の第1要素が代入されます。currentValue：現在処理している配列の要素。初期値：累積値の出発点となる値。省略し

  2. JavaScriptで無名関数（匿名関数）に引数を渡す方法をわかりやすく解説

    JavaScriptにおける無名関数（匿名関数）は、名前を持たない関数であり、変数に代入したり、イベントリスナーのコールバックとして利用したりする際に非常に便利です。通常の関数と同様に、無名関数にも引数を渡すことができます。ここでは、具体的なコード例を通じてその方法を解説します。 無名関数への引数の渡し方 無名関数に引数を渡す基本的な方法は、関数を変数に代入し、その変数を通じて呼び出す際に引数を指定することです。以下は、ボタンをクリックすると無名関数が呼び出され、引数を受け取って計算結果を表示するサンプルコードです。 サンプルコード <!DOCTYPE html> <ht