【JavaScript】スプレッド演算子って？

JavaScript

Reactを勉強し始めてからやたらとスプレッド演算子を使う場面に遭遇する。現場でもあまり使ったことないし、あんまり自分の中で理解できてなかったので、軽くまとめてみました。

スプレッド演算子の基本

ざっくりいうと、配列やオブジェクトに格納されている要素をバラして別の配列やオブジェクトに格納できる書き方です。
コードで見てみるとこんな感じ。

const user = {
  id: 1,
  profile: {
    name: 'zima',
    age: 20
  }
}
const newUser = {
  ...user,
  id: 2
}

console.log(newUser);

上記のコードは、newUserに対してオブジェクトをコピーしてからidを2に上書きをしています。出力結果は以下。

id: 2
profile: {name: 'zima', age: 20}

スプレッド演算子の注意点

スプレッド演算子でコピーをすると、浅いコピー（シャローコピー）となります。シャローコピーとは、コピー元オブジェクトがさらにオブジェクトや配列をプロパティとして持っていた場合に、その内側のオブジェクトの参照がそのままコピーされるコピー方法です。そのため、内側のオブジェクトの値を変更すると、コピー元のオブジェクトの値まで変更されてしまいます。コードで見てみると、次のような挙動になります。コードで見てみるとこんな感じです。

const user = {
  id: 1,
  profile: {
    name: 'zima',
    age: 20
  }
}
const newUser = {
  ...user,
}

newUser.profile.age = 30;

console.log(newUser); // 30で表示される
console.log(user);    // こっちも30で表示される！

profileオブジェクトは同じもの（同じ参照）を共有しているため、newUser.profile.ageを書き換えるとuser.profile.ageも上書きされるって感じですね。

繰り返しになるけどこれはオブジェクトや配列の場合だけで、プリミティブ値の時は参照は共有されません。

以上！

コメント

タイトルとURLをコピーしました