今回はJavaScriptのオブジェクトをコピーする際の注意と、最近知った新しいコピーのやり方を紹介する。

スプレッド構文でオブジェクトをコピーする

まずは正解から。

1
2
3
4
5
6
7
8
9
var hoge = {
  age: 30
};
var piyo = {...hoge}
 
piyo.age = 20;
 
console.log(hoge.age); // 出力結果: 30
console.log(piyo.age); // 出力結果: 20

4行目、見慣れない書き方でpiyoにhogeをコピーしているが、これがスプレッド構文と呼ばれる書き方で、以下と同じコードを短縮して書くことができるものだ。

1
2
3
var piyo = {
  age: 30
};

オブジェクトのコピーは他の方法でも書くことができるが、調べた限りこれが一番シンプルだ。

間違った例

オブジェクトのコピーについて、一応間違った例も紹介しておく。

1
2
3
4
5
6
7
8
9
var hoge = {
  age: 30
};
var piyo = hoge;
 
piyo.age = 20;
 
console.log(hoge.age); // 出力結果: 20
console.log(piyo.age); // 出力結果: 20

4行目、単純にオブジェクトを変数に代入するだけではコピーとならず、piyoとhogeは同じオブジェクトを参照していることになる。