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

JavaScriptの関数引数でスプレッド構文（Spread Syntax）を使う方法

スプレッド演算子（...）を使うと、配列を個々の要素に展開し、それぞれを関数の独立した引数として渡すことができます。これにより、配列の中身をそのまま別々の引数として扱いたい場面で、非常に簡潔にコードを書けるようになります。

スプレッド構文とは

スプレッド構文は、イテラブルなオブジェクト（配列や文字列など）の前に「...」を付けることで使用します。関数呼び出し時に使えば、配列の各要素が個別の引数として展開され、関数側では通常の引数として受け取ることができます。

基本構文

function myFunction(...iterableObj);

サンプルコード

次の例では、従来の concat メソッドとスプレッド演算子を使った方法で、配列や文字列を結合した結果を比較しています。

<html>
<body>
<script>
var a, b, c, d, e, f;
a = [10, 20];
b = "rank";
c = [30, "points"];
d = "run";

// concatメソッドによる結合
e = a.concat(b, c, d);

// スプレッド演算子による結合
f = [...a, b, ...c, d];

document.write(e);
document.write("<br>" + f);
</script>
</body>
</html>

実行結果

10,20,rank,30,points,run
10,20,rank,30,points,run

このように、[...a, b, ...c, d] のように記述するだけで、concat メソッドとまったく同じ結果が得られます。

まとめ

スプレッド演算子は、配列の結合をより直感的かつ読みやすいコードで実現できる強力な構文です。関数への可変長引数の渡しだけでなく、配列やオブジェクトのコピー・マージなど、モダンなJavaScript開発において幅広く活用されています。ぜひ日常のコーディングに取り入れてみてください。

  1. JavaScript関数で名前付き引数を使う方法｜分割代入で簡単に実現するテクニック

    JavaScriptにおける名前付き引数とは？ Pythonなどの言語には「名前付き引数（キーワード引数）」という機能が標準で備わっていますが、JavaScriptにはこの機能が組み込まれていません。しかし、オブジェクトの分割代入（Destructuring）を活用することで、名前付き引数と同じ挙動を簡単に実現できます。 基本的な仕組み 関数の引数としてオブジェクトを1つ受け取り、その中から必要なプロパティを分割代入で取り出します。各プロパティにはデフォルト値も同時に指定できるため、引数が省略された場合でもエラーにならず安全に処理できます。 サンプルコード 以下は、オブジェクトを引数として渡し

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

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