【concat】JavaScript 配列の要素に対する操作

この記事の対象

配列の基礎を知っていて、ES6に触れたことがある人
Webエンジニアに転職して1ヶ月経ち、覚えたことをアウトプット

concatとは？

concatはJavaScriptのメソッドで、引数として渡した配列内の要素をバラバラに分解し、元の配列の最後に追加します。

基本的な例

下記の例では、配列arr1とconcatの引数を用意します。
基本的にはconcatとは？で説明したとおりの処理になるので、実行結果も配列とconcatの引数がマージされます。
concatでは配列や引数がコピーされて全く新しい配列が作られるので元の配列や引数に変更を与えることはありません。

let arr1 = [1, 2, 3];
let arr2 = arr1.concat(4, 5, 6);

console.log(arr1); //[ 1, 2, 3 ]
console.log(arr2); //[ 1, 2, 3, 4, 5, 6 ]

配列の要素が配列の場合

基本的な例で挙げた引数とは違い、引数内の要素に配列を含みます。
その場合は、引数を要素ごとにバラらに分解まではできますが、要素である配列の分解まではできません。
そのため、新しい配列となるarr2には要素の一つとして配列がマージされます。

let arr1 = [1, 2, 3];
let arr2 = arr1.concat(4, [5, 6]);

console.log(arr1); //[ 1, 2, 3 ]
console.log(arr2); //[ 1, 2, 3, 4, [ 5, 6 ] ]