javascriptのオブジェクトは参照渡しだから注意

スポンサーリンク
Pocket
LINEで送る

最近は、仕事でがりがりjavascriptを書いているので今回はjavascriptについて書いていく。

 

javascriptのオブジェクトについて

javascriptのオブジェクトは参照渡し。

まずは普通にオブジェクトを表示

var obj = {
  title: "進撃の巨人",
  description: "巨人が人を食べる漫画"
}
console.dir(obj) //{ title: '進撃の巨人', description: '巨人が人を食べる漫画' }

 

 

次に別の変数に代入してみる。

var obj = {
  title: "進撃の巨人",
  description: "巨人が人を食べる漫画"
}
var comic = obj
console.dir(obj)  //{ title: '進撃の巨人', description: '巨人が人を食べる漫画' }
console.dir(comic) //{ title: '進撃の巨人', description: '巨人が人を食べる漫画' }

 

こちらも普通に表示される。

では、comicのプロパティを変更してみる。

var obj = {
  title: "進撃の巨人",
  description: "巨人が人を食べる漫画"
}
var comic = obj
comic.title = "巨人の進撃"
console.dir(obj)  //{ title: '巨人の進撃', description: '巨人が人を食べる漫画' }
console.dir(comic) //{ title: '巨人の進撃', description: '巨人が人を食べる漫画' }

 

comicのtitleを変更したはずなのにobjの中身も変わってしまっている。

これは、メモリの番地が渡されるため。

objをcomicに代入したのでコピーされたものと思いきや、実はメモリの番地を渡される参照渡しが行われている。

変数名は違うが参照している場所は同じなのでどちらも変更されてしまうということ。

 

これに気をつけないとバグが起きやすいので注意。

スポンサーリンク

 

オブジェクトでも値渡しがしたい場合はlodashのcloneDeep関数を使う

オブジェクトを値渡ししたいという場面はよくあるのでそういう場合は、lodashのcloneDeepを使う。

 

lodashをインストール

npm install -D lodash

 

var cloneDeep = require('lodash/cloneDeep');
var obj = {
 title: "進撃の巨人",
 description: "巨人が人を食べる漫画"
}
var comic = cloneDeep(obj)
comic.title = "巨人の進撃"
console.dir(obj) { title: '進撃の巨人', description: '巨人が人を食べる漫画' }
console.dir(comic) { title: '巨人の進撃', description: '巨人が人を食べる漫画' }

 

cloneDeepを使うと、comicのtitleだけ変更されています。