JavaScriptで2つの配列を結合する方法

JavaScriptで2つの配列を結合する方法は、主に2つあります。元の配列を変更せずに、新しい配列として結合結果を取得したい場合は、concatメソッドを使います。以下のように記述します。

concatメソッドの例

let arr1 = [1, 2, 3, 4];
let arr2 = [5, 6, 7, 8];
let arr3 = arr1.concat(arr2);
console.log(arr1);
console.log(arr2);
console.log(arr3);

実行結果

このコードを実行すると、次の出力が得られます。

[1, 2, 3, 4]
[5, 6, 7, 8]
[1, 2, 3, 4, 5, 6, 7, 8]

concatメソッドは新しい配列を返すため、元の配列（arr1・arr2）は変更されない点に注目してください。

一方、既存の配列自体を書き換えて結合したい（破壊的に結合したい）場合は、pushメソッドとapplyを組み合わせます。applyは、配列の要素を展開して個別の引数として関数に渡す仕組みです。

pushとapplyを使った例

let arr1 = [1, 2, 3, 4];
let arr2 = [5, 6, 7, 8];
Array.prototype.push.apply(arr1, arr2);
console.log(arr1);
console.log(arr2);

実行結果

このコードを実行すると、次の出力が得られます。

[1, 2, 3, 4, 5, 6, 7, 8]
[5, 6, 7, 8]

この場合、結合先である最初の配列（arr1）そのものが変更される点に注意してください。

補足：スプレッド構文による結合

ES2015以降では、スプレッド構文（...）を使うことで、より簡潔に配列を結合できます。

let arr1 = [1, 2, 3, 4];
let arr2 = [5, 6, 7, 8];
let arr3 = [...arr1, ...arr2];
console.log(arr3); // [1, 2, 3, 4, 5, 6, 7, 8]

用途に応じて、非破壊的なconcatやスプレッド構文、破壊的なpush+applyを使い分けるのがおすすめです。