なぜこの記事を書こうと思ったのか

Reactを使用した開発経験が1年を超え、自分のコードにおける書き方や意図を言語化できるようになってきました。最近ではコードレビューを担当する機会も増えましたが、他の人が書いたコードに登場するスプレッド構文について、「これはどういう処理でしょうか？」と確認する場面が頻繁にあります。

そのため、スプレッド構文で可能なことやその活用方法を整理し、記事としてまとめてみようと思いました。この記事を通じて、自分の理解を深めると同時に、同じ疑問を持つ方々に役立つ情報を提供できればと思います。

そもそもスプレッド構文とは？

JavaScriptのスプレッド構文とは、ECMAScript 6（ES6）で導入された機能です。
配列の連結、配列のシャローコピーの作成、文字の配列への変換、オブジェクトの結合や複製、関数やコンストラクタへの動的な値の受け渡しなど、さまざまな用途で使用できます。

特に配列のシャローコピー作成や、配列の連結では自分の中でも使用してきています。
が、「オブジェクトの結合」, 文字の配列への変換などはあまりやってきてなかったなぁなどという印象です。

実際に使ってみる

配列のコピー作成

React環境では主に、state更新時などで使用しますね。
pushなどの破壊的メソッドの対策にも使用します。

  const arr = [1, 2, 3];
  const value = [...arr];
  console.log(value);
  //結果 -> [1,2,3]

配列の結合

配列管理で一番使っている気がします。

  const arr1 = [1,2,3];
  const arr2 = [3,4,5]
  const value = [...arr1, ...arr2];
  console.log(value) 
  //結果 -> [1, 2, 3, 3, 4, 5]

オブジェクトの結合

同じキー名が両方のオブジェクトに存在する場合、後に書かれたオブジェクトの値で上書きされます。

  const obj = { name: "taro", age: 10 };
  const obj2 = { name: "jiro", age: 10 };

  console.log({...obj, ...obj2})
  // 結果 ->  {name: 'jiro', age: 10}

オブジェクトの結合②

一方のオブジェクトに存在しないキー名がある場合、そのキーと値は結合後のオブジェクトに追加されます。

  const obj = { name: "taro", age: 10 };
  const obj2 = { name: "jiro", age: 10, from: "tokyo" };

  console.log({ ...obj, ...obj2 });
  // 結果 ->  name: {'jiro', age: 10, from: 'tokyo'}

オブジェクトの結合③

一方のオブジェクトにしか存在しないキーは、結合後のオブジェクトにそのまま残ります。
ただし、同じキーが存在する場合は、後に書かれたオブジェクトの値で上書きされます。

  const obj = { name: "jiro", age: 10, from: "tokyo" };
  const obj2 = { name: "taro", age: 10 };

  console.log({ ...obj, ...obj2 });
  // 結果 ->  name: {'jiro', age: 10, from: 'tokyo'}

オブジェクトの結合④

2つのオブジェクトでキー名が異なる場合は、そのまま結合されます。

  const prof01 = { name: "jiro", age: 10 };
  const prof02 = { from: "tokyo", like: "baseball" };

  console.log({...prof01, ...prof02})
  // 結果 -> {name: 'jiro', age: 10, from: 'tokyo', like: 'baseball'}

最後に

可変引数などだけはまた別途更新してみたいと思います。
ありがとうございました。