Vanilla JavaScriptで配列をマージする方法 ― ES5とES6の実装例をわかりやすく解説

これまでの記事では、JavaScriptのpush()メソッドを使って配列に要素を追加・削除する方法を学びました。

しかし、既存の配列に「別の配列そのもの」を追加したい場合はどうすればよいのでしょうか。つまり、2つの異なる配列を1つに結合（マージ）したい場合です。

JavaScriptで2つ以上の配列をマージするには、Array.prototype.push.apply()を使用します。

例として、果物かごが2つあるとしましょう。すべての果物を1つのかごにまとめたい――そんなとき、この方法が役立ちます。

ES5での配列のマージ方法

var fruitBasketOne = ["apple", "banana", "grapes"]
var fruitBasketTwo = ["orange", "apricot", "pear"]
Array.prototype.push.apply(fruitBasketOne, fruitBasketTwo)

// 結果：['apple', 'banana', 'grapes', 'orange', 'apricot', 'pear']
console.log(fruitBasketOne)

// 結果：["orange", "apricot", "pear"]
console.log(fruitBasketTwo)

このコードでは、2番目の配列が1番目の配列にマージされます。ここで注意したいのは、2番目の配列fruitBasketTwoはメモリ上にそのまま残るという点です。このメソッドは元の配列を削除しません。

ES6のスプレッド構文で配列をマージする

ES6以降では、スプレッド演算子（...）を使うことで、さらにシンプルに記述できます。

let fruitBasketOne = ["apple", "banana", "grapes"]
let fruitBasketTwo = ["orange", "apricot", "pear"]
fruitBasketOne.push(...fruitBasketTwo)

// 結果：['apple', 'banana', 'grapes', 'orange', 'apricot', 'pear']
console.log(fruitBasketOne)

push(...fruitBasketTwo)のように書くだけで、2番目の配列の全要素が展開されて1番目の配列に追加されます。ES5のapply()を使った方法よりも直感的で読みやすいのが魅力です。

ブラウザ互換性について

1つ目のpush.apply()を使う方法は、すべてのモダンブラウザに対応しており、少なくともIE6までさかのぼって動作します。

一方、スプレッド演算子を使う2つ目の方法はモダンブラウザ限定です。ただし、Babelのようなトランスパイラ（プリプロセッサ）を使えば、ES5互換のコードにコンパイルできるため、古いブラウザでも動作させることが可能です。

配列のマージは日常的な開発でよく使われるテクニックです。状況に応じてES5方式とES6方式を使い分けられるようにしておきましょう。