スプレッド構文

JavaScript

JavaScriptでたびたび見かけるスプレッド構文についてまとめます。

構文

...obj; // こういう感じ

配列の場合の例

const arr = [1,2,3,4,5];
const arr2 = [...arr, 6,7,8];
console.log(arr2); //[1, 2, 3, 4, 5, 6, 7, 8]

オブジェクトの場合の例

const user = {
  name: "taro",
  age: 20
}

const user2 = {
  ...user
}

console.log(user2);
//結果（userオブジェクトと同じになる）
{
name:"taro",
age:20
}

配列にしてもオブジェクトにしても、スプレッド構文を使用した変数が展開されるイメージを持つのがいいのかもしれない。

オブジェクトは特定の変数を上書きできる。

例えば以下のようにすると、

const user = {
  name: "taro",
  age: 20
}

const user2 = {
  ...user,
  age: 30
}
console.log(user2);
//こうなる
{
name:"taro",
age:30
}

プロパティnameは元のuserオブジェクトを引き継いでおり、ageプロパティだけ新しく定義されているのがわかる。

分割代入

スプレッド構文の親戚みたいなものか。

const arr = [1,2,3];
const [a, b, c] = arr;
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

const obj = {
  color: "red",
  animal: "fox",
  kind: "udon"
}
const { color, ...rest } = obj;
console.log(color);
console.log(rest);
// 結果
red
{
animal:"fox",
kind:"udon"
}

まとめ

使えるようになると便利