配列のコピー

###変数を代入する
変数を代入した場合、コピーとはならず同じデータを参照されるようになる。
そのため片方で行った変更がもう片方に影響を与えてしまう。

var a = [1, 2, 3];
var b = a;
// 変数bに対して行った値の変更が変数aにも影響を与えてしまう。
b[0] = 9;
console.log(b);
// [9, 2, 3]
console.log(a);
// [9, 2, 3]

コピーには種類があり、浅いコピーと深いコピーがある。
他の変数に影響を与えないようにしたい場合、深いコピーをする必要がある。

slice(浅いコピー)

var array = [
  {name: "yamada"},
  {name: "tanaka"},
];

var copyArray = array.slice();
copyArray[0].name = "sasaki";
console.log(array);
// {name: "sasaki"},{name: "tanaka"}
console.log(copyArray);
// {name: "sasaki"},{name: "tanaka"}

concat(浅いコピー)

var array = [
  {name: "yamada"},
  {name: "tanaka"},
];

var copyArray = array.concat();
copyArray[0].name = "sasaki";
console.log(array);
// {name: "sasaki"},{name: "tanaka"}
console.log(copyArray);
// {name: "sasaki"},{name: "tanaka"}

JSON.stringifyを使用する(深いコピー)

この方法では、Date オブジェクトや function など 文字列化すると壊れるオブジェクトが含まれていると正しくコピーできないようだ。

var array = [
  {name: "yamada"},
  {name: "tanaka"},
];

var copyArray = JSON.parse(JSON.stringify(array));
copyArray[0].name = "sasaki";
console.log(array);
// {name: "yamada"},{name: "tanaka"}
console.log(copyArray);
// {name: "sasaki"},{name: "tanaka"}

他にはjQueryのExtend関数やlodashのcloneDeepを使うと
実現できるようだ。