実行環境 Node.js 15.2.1

公開日 March 6, 2021, GMT+9

コード例の出力としてconsole.logを使用しています。

使用方法がわからない場合は以下のページを参照してからコード例を確認してください。

console.logの使用方法

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' ]

1次情報

Array.prototype.concat() - MDN web docs