concat（Array、配列）
このページでは豊富な例を用いてJavaScript（js）のArrayオブジェクトのconcatメソッドの使い方を学ぶことができます。
concatメソッドはArrayオブジェクト（配列）のメソッドの1つです。
呼び出し元の配列に対して、引数に指定した「配列または値」を結合した新しい配列を返り値として返します。引数は複数取ることができます。
concatメソッドが生成する返り値の配列の要素は、呼び出し元および引数で与えた配列・値の浅いコピー（シャローコピー）であることに注意してください。
// 記述例
const 新しく生成された配列 = 結合させたい配列1.concat(結合させたい配列2);
const 新しく生成された配列 = 結合させたい配列.concat(結合させたい値);TL;DR
基本
// 引数に与えた配列を結合させた配列を返す
const array1 = ['js', 'javascript'];
const array1_1 = ['ts', 'typescript'];
const returnValue1 = array1.concat(array1_1);
console.log(returnValue1);
==> [ 'js', 'javascript', 'ts', 'typescript' ]
// 呼び出し元の配列には変更なし
console.log(array1);
==> [ 'js', 'javascript' ]
// 引数にも変化はなし
console.log(array1_1);
==> [ 'ts', 'typescript' ]
// 複数の配列を引数に指定する
const array2 = ['js'];
const array2_1 = [0, 1, 2];
const array2_2 = [true, false];
const returnValue2 = array2.concat(array2_1, array2_2);
console.log(returnValue2);
==> [ 'js', 0, 1, 2, true, false ]
// n次元配列の場合
const array3 = ['js'];
const array3_1 = [100, [true, false], [['A', 'B'], [0, 1, 2]]];
const returnValue3 = array3.concat(array3_1);
console.log(returnValue3);
==> [ 'js', 100, [ true, false ], [ [ 'A', 'B' ], [ 0, 1, 2 ] ] ]
// 引数なし（浅いコピー・シャローコピーの生成）
const array4 = [0, 1, 2];
const returnValue4 = array4.concat();
console.log(returnValue4);
==> [ 0, 1, 2 ]引数に配列でない値を指定
// concatの引数は配列ではなくともよい
const array1 = ['js', 'javascript'];
const returnValue1 = array1.concat('TypeScript');
console.log(returnValue1);
==> [ 'js', 'javascript', 'TypeScript' ]
// 複数の引数を指定する
const array2 = ['Foo'];
const returnValue2 = array2.concat('Bar', 0, true);
console.log(returnValue2);
==> [ 'Foo', 'Bar', 0, true ]concatは浅いコピー
// concatは浅いコピー（シャローコピー）を生成する
const array1 = [{ id: 1 }, true];
const array1_1 = [{ id: 2 }, false];
const returnValue1 = array1.concat(array1_1);
console.log(returnValue1);
==> [ { id: 1 }, true, { id: 2 }, false ]
// 生成された新しい配列を変更する
returnValue1[0].id = 100;
returnValue1[2].id = 200;
returnValue1[1] = 'Foo';
returnValue1[3] = 'Bar';
// オブジェクト（配列やObjectなど）は浅いコピーなのでコピー元も変更される
console.log(returnValue1);
==> [ { id: 100 }, 'Foo', { id: 200 }, 'Bar' ]
console.log(array1);
==> [ { id: 100 }, true ]
console.log(array1_1);
==> [ { id: 200 }, false ]
const array2 = [['A', 'B']];
const returnValue2 = array2.concat(300, 400);
console.log(returnValue2);
==> [ [ 'A', 'B' ], 300, 400 ]
// コピー元の配列を変更すると新しく生成された配列も変更される
array2[0][0] = 'AAA';
console.log(array2);
==> [ [ 'AAA', 'B' ] ]
console.log(returnValue2);
==> [ [ 'AAA', 'B' ], 300, 400 ]解説
// 記述例
const 新しく生成された配列 = 結合させたい配列1.concat(結合させたい配列2);
const 新しく生成された配列 = 結合させたい配列.concat(結合させたい値);基本
Arrayオブジェクト（配列）のconcatメソッドは、「呼び出した配列」に対して「引数で与えた配列」を結合・連結させた新しい配列を返り値として返します。
「呼び出した配列」および「引数で与えた配列」に対しては変更を行いません。
引数には複数の配列を指定することができ（不定数の引数）、引数に与えた順に返り値の配列の要素として結合・連結されていきます。
返り値の配列の要素は、「呼び出した配列」と「引数で与えた配列」の要素の浅いコピー（シャローコピー）であることに注意してください。
const array1 = ['A', 'B', 'C'];
const array1_1 = [true, false];
const returnValue1 = array1.concat(array1_1);
console.log(returnValue1);
==> [ 'A', 'B', 'C', true, false ]
// 呼び出し元配列に変更なし
console.log(array1);
==> [ 'A', 'B', 'C' ]
// 引数にも変更なし
console.log(array1_1);
==> [ true, false ]
// 複数の配列の指定
const array2 = [0, 1];
const array2_1 = [true];
const array2_2 = ['A', 'B', 'C'];
const returnValue2 = array2.concat(array2_1, array2_2);
console.log(returnValue2);
==> [ 0, 1, true, 'A', 'B', 'C' ]
// n次元配列の場合
const array3 = [true];
const array3_1 = ['A', ['B', 'C'], [[0, 1]]];
const returnValue3 = array3.concat(array3_1);
console.log(returnValue3);
==> [ true, 'A', [ 'B', 'C' ], [ [ 0, 1 ] ] ]
// 引数なし
const array4 = ['A', 'B', 'C'];
const returnValue4 = array4.concat();
console.log(returnValue4);
==> [ 'A', 'B', 'C' ]引数に配列でない値を指定
concatメソッドは引数として「配列ではない値」も指定することができます。
配列ではない値を指定する場合も、引数を複数指定することができます。
const array1 = ['A', 'B'];
const returnValue1 = array1.concat('C');
console.log(returnValue1);
==> [ 'A', 'B', 'C' ]
// 複数の引数を指定
const array2 = ['A'];
const returnValue2 = array2.concat('B', 100, false);
console.log(returnValue2);
==> [ 'A', 'B', 100, false ]concatは浅いコピー
concatメソッドで生成される返り値の配列の要素は、「呼び出し元の配列」と「引数で与えた配列」の要素の浅いコピー（シャローコピー）です。
そのため、
プリミティブ型
ではない要素のプロパティが変更された場合は、「返り値の配列」と「コピー元となった配列」の双方に変更が反映されます。
const array1 = [{ name: 'apple' }, 1];
const array1_1 = [{ name: 'banana' }, 2];
const returnValue1 = array1.concat(array1_1);
console.log(returnValue1);
==> [ { name: 'apple' }, 1, { name: 'banana' }, 2 ]
// 新しく生成された配列を変更する
returnValue1[0].name = 'APPLE';
returnValue1[2].name = 'BANANA';
returnValue1[1] = 100;
returnValue1[3] = 200;
console.log(returnValue1);
==> [ { name: 'APPLE' }, 100, { name: 'BANANA' }, 200 ]
console.log(array1);
==> [ { name: 'APPLE' }, 1 ]
console.log(array1_1);
==> [ { name: 'BANANA' }, 2 ]
const array2 = [[true, 1]];
const returnValue2 = array2.concat('A');
console.log(returnValue2);
==> [ [ true, 1 ], 'A' ]
// コピー元の配列を変更する
array2[0][0] = false;
array2[0][1] = 100;
console.log(array2);
==> [ [ false, 100 ] ]
console.log(returnValue2);
==> [ [ false, 100 ], 'A' ]