JavaScriptで配列の値をコピーする

JavaScriptで配列の値をコピーする(参照渡しではなく値渡しにする)方法をメモ。

値渡しと参照渡し

値渡しとは、名前の通り値を別の変数に渡すことです。

JavaScript

var str = 'A';
// 別の変数に代入
var tmp = str;
// 値の変更
tmp = 'B';
// 元の変数は変更されない
console.log(str); // A
console.log(tmp); // B

変数を別の変数に代入する場合、このイメージかと思います。
値渡しのデモページ
　

参照渡しの場合、値を別の変数に渡すのではなく、その値の場所を渡します。

JavaScript

var arr = ['A', 'B', 'C'];
// 配列を別の変数に代入
var tmp = arr;
// 値の変更
tmp[0] = 'D';
// 元の変数も変更されている
console.log(arr); // ['D', 'B', 'C']
console.log(tmp); // ['D', 'B', 'C']

参照渡しのデモページ
文字列や数値、真偽値などのプリミティブ型は値渡し、配列や連想配列などのオブジェクト型は参照渡しになります。
　

配列の場合

配列を参照渡しではなく値渡しでコピーしたい場合、concat()を使うことで行えます。

JavaScript

var arr = ['A', 'B', 'C'];
// 配列を別の変数に代入
var tmp = arr.concat();
// 値の変更
tmp[0] = 'D';
// 元の変数は変更されない
console.log(arr); // ['A', 'B', 'C']
console.log(tmp); // ['D', 'B', 'C']

もしくはfor文を使って新しく配列を作成する形でもできます。
concat()のデモページ
　

連想配列の場合

連想配列の場合も配列と同様で、参照渡しになります。

JavaScript

var arr = { 'A': 1,'B': 2 };
// 配列を別の変数に代入
var tmp = arr;
// 値の変更
tmp['A'] = 3;
// 元の変数も変更されている
console.log(arr); // { 'A': 3,'B': 2 }
console.log(tmp); // { 'A': 3,'B': 2 }

連想配列の参照渡しのデモページ
　

参照渡しではなく値渡しでコピーしたい場合、JSON.stringify()とJSON.parse()を使っていったんJSON文字列に変換することで行えます。

JavaScript

var arr = { 'A': 1,'B': 2 };
// 配列を別の変数に代入
var tmp = JSON.parse(JSON.stringify(arr));
// 値の変更
tmp['A'] = 3;
// 元の変数は変更されない
console.log(arr); // { 'A': 1,'B': 2 }
console.log(tmp); // { 'A': 3,'B': 2 }

連想配列の値渡しのデモページ
　

【参考サイト】

• JavaScriptで配列のコピー（値渡し） – Qiita
• 【Javascript】値渡しと参照渡しについてあらためてまとめてみる – Qiita