JavaScript 配列を結合するconcatを使う際の注意点

JavaScriptのconcatは配列を結合するときに使用します。

基本的な使い方は以下の通りです。

const arr1 = ['A', 'B', 'C'];
const arr2 = ['D', 'E', 'F'];

const arr3 = arr1.concat(arr2);
console.log(arr3); //["A", "B", "C", "D", "E", "F"]

新しく作成されたarr3は新しい配列です。そのため、元の配列には影響を与えません。

const arr1 = ['A', 'B', 'C'];
const arr2 = ['D', 'E', 'F'];

const arr3 = arr1.concat(arr2);
arr3[0] = 'Z';　//arr3の0番目の要素をZに変更する

console.log(arr3); //["Z", "B", "C", "D", "E", "F"]
console.log(arr1); //["A", "B", "C"] 元の配列は変わっていない

しかし、配列の中の値がオブジェクトの場合に注意する必要があります。

const arr1 = [{name: 'A'}, {name: 'B'}, {name: 'C'}];
const arr2 = [{name: 'D'}, {name: 'E'}, {name: 'F'}];

const arr3 = arr1.concat(arr2);
arr3[0].name = 'ZZZ';

console.log(arr3); 
/*[{
  name: "ZZZ"
}, {
  name: "B"
}, {
  name: "C"
}, {
  name: "D"
}, {
  name: "E"
}, {
  name: "F"
}]
*/

console.log(arr1);
/* arr1内のオブジェクトも変更されてしまう
[{
  name: "ZZZ"
}, {
  name: "B"
}, {
  name: "C"
}]
*/

arr3とarr1の配列は、同じオブジェクトを参照しています。

そのため、上記のようにarr3内のオブジェクトを変更した場合、arr1のオブジェクトも変わってしまいますので注意が必要です。

JavaScript, プログラミング入門

Posted by たみぼうず