When working with arrays, there are times when you want to merge multiple arrays together, for example data comes from different sources and you have to merge them into one array, there are many ways to merge arrays in Javascript. I will show you 3 ways in this article.
1. Spread Operator
Using the spread operator
allows you to spread an iterable collection (object or array) into another collection. Using this operator on arrays, you can merge values of arrays together.
1 2 3 4 5 6 | <span class="token keyword">const</span> array1 <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token number">1</span> <span class="token punctuation">,</span> <span class="token number">2</span> <span class="token punctuation">,</span> <span class="token number">3</span> <span class="token punctuation">]</span> <span class="token keyword">const</span> array2 <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token number">4</span> <span class="token punctuation">,</span> <span class="token number">5</span> <span class="token punctuation">,</span> <span class="token number">6</span> <span class="token punctuation">]</span> <span class="token keyword">const</span> merged <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token operator">...</span> array1 <span class="token punctuation">,</span> <span class="token operator">...</span> array2 <span class="token punctuation">]</span> <span class="token comment">// [1, 2, 3, 4, 5, 6]</span> |
For the merged array, we create a new array and spread the values of array1, then the values of array2. You can use this with multiple arrays like this:
1 2 3 4 5 6 7 | <span class="token keyword">const</span> array1 <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token number">1</span> <span class="token punctuation">,</span> <span class="token number">2</span> <span class="token punctuation">,</span> <span class="token number">3</span> <span class="token punctuation">]</span> <span class="token keyword">const</span> array2 <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token number">4</span> <span class="token punctuation">,</span> <span class="token number">5</span> <span class="token punctuation">,</span> <span class="token number">6</span> <span class="token punctuation">]</span> <span class="token keyword">const</span> array3 <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token number">7</span> <span class="token punctuation">,</span> <span class="token number">8</span> <span class="token punctuation">,</span> <span class="token number">9</span> <span class="token punctuation">]</span> <span class="token keyword">const</span> merged <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token operator">...</span> array2 <span class="token punctuation">,</span> <span class="token operator">...</span> array3 <span class="token punctuation">,</span> <span class="token operator">...</span> array1 <span class="token punctuation">]</span> <span class="token comment">// [4, 5, 6, 7, 8, 9, 1, 2, 3]</span> |
2. Array.concat
You can use array’s concat
method to merge the values of arrays together. Values can be numbers, strings, booleans, objects, or even arrays.
1 2 | array <span class="token punctuation">.</span> <span class="token function">concat</span> <span class="token punctuation">(</span> value1 <span class="token punctuation">,</span> value2 <span class="token punctuation">,</span> <span class="token operator">...</span> <span class="token punctuation">,</span> valueN <span class="token punctuation">)</span> |
By specifying an array as an argument, you can merge the original array with the specified array to form a new array. Here is an example:
1 2 3 4 5 6 | <span class="token keyword">const</span> array1 <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token number">1</span> <span class="token punctuation">,</span> <span class="token number">2</span> <span class="token punctuation">,</span> <span class="token number">3</span> <span class="token punctuation">]</span> <span class="token keyword">const</span> array2 <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token number">4</span> <span class="token punctuation">,</span> <span class="token number">5</span> <span class="token punctuation">,</span> <span class="token number">6</span> <span class="token punctuation">]</span> <span class="token keyword">const</span> merged <span class="token operator">=</span> array1 <span class="token punctuation">.</span> <span class="token function">concat</span> <span class="token punctuation">(</span> array2 <span class="token punctuation">)</span> <span class="token comment">// [1, 2, 3, 4, 5, 6]</span> |
You can also pass multiple arrays to concat like this:
1 2 3 4 5 6 7 | <span class="token keyword">const</span> array1 <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token number">1</span> <span class="token punctuation">,</span> <span class="token number">2</span> <span class="token punctuation">,</span> <span class="token number">3</span> <span class="token punctuation">]</span> <span class="token keyword">const</span> array2 <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token number">4</span> <span class="token punctuation">,</span> <span class="token number">5</span> <span class="token punctuation">,</span> <span class="token number">6</span> <span class="token punctuation">]</span> <span class="token keyword">const</span> array3 <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token number">7</span> <span class="token punctuation">,</span> <span class="token number">8</span> <span class="token punctuation">,</span> <span class="token number">9</span> <span class="token punctuation">]</span> <span class="token keyword">const</span> merged <span class="token operator">=</span> array2 <span class="token punctuation">.</span> <span class="token function">concat</span> <span class="token punctuation">(</span> array3 <span class="token punctuation">,</span> array1 <span class="token punctuation">)</span> <span class="token comment">// [4, 5, 6, 7, 8, 9, 1, 2, 3]</span> |
3. Array.push
The push
method of arrays allows you to push (add) values to the end of the array.
1 2 | array <span class="token punctuation">.</span> <span class="token function">push</span> <span class="token punctuation">(</span> value1 <span class="token punctuation">,</span> value2 <span class="token punctuation">,</span> <span class="token operator">...</span> valueN <span class="token punctuation">)</span> |
Using this method, you can push a new array to the original array to perform the merge. Unlike the above approaches, this will change the original array.
1 2 3 4 5 6 7 8 9 10 | <span class="token keyword">const</span> array1 <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token number">1</span> <span class="token punctuation">,</span> <span class="token number">2</span> <span class="token punctuation">,</span> <span class="token number">3</span> <span class="token punctuation">]</span> <span class="token keyword">const</span> array2 <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token number">4</span> <span class="token punctuation">,</span> <span class="token number">5</span> <span class="token punctuation">,</span> <span class="token number">6</span> <span class="token punctuation">]</span> <span class="token keyword">for</span> <span class="token punctuation">(</span> <span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span> <span class="token punctuation">;</span> i <span class="token operator"><</span> array2 <span class="token punctuation">.</span> length <span class="token punctuation">;</span> i <span class="token operator">++</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> array1 <span class="token punctuation">.</span> <span class="token function">push</span> <span class="token punctuation">(</span> array2 <span class="token punctuation">[</span> i <span class="token punctuation">]</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> array1 <span class="token punctuation">)</span> <span class="token comment">// [1, 2, 3, 4, 5, 6]</span> |
Here we use a for
loop to iterate over each value of array2, each time we push that value to the end of array1. At the end of the whole loop, we see that array1 has changed, it contains all the values of array2.
Instead of using a for
loop you can completely use the spread operator. The push
method accepts a list or arguments separated by commas (comma), you can spread the array’s values into this method and they will be pushed into the original array.
1 2 3 4 5 6 7 8 | <span class="token keyword">const</span> array1 <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token number">1</span> <span class="token punctuation">,</span> <span class="token number">2</span> <span class="token punctuation">,</span> <span class="token number">3</span> <span class="token punctuation">]</span> <span class="token keyword">const</span> array2 <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token number">4</span> <span class="token punctuation">,</span> <span class="token number">5</span> <span class="token punctuation">,</span> <span class="token number">6</span> <span class="token punctuation">]</span> array1 <span class="token punctuation">.</span> <span class="token function">push</span> <span class="token punctuation">(</span> <span class="token operator">...</span> array2 <span class="token punctuation">)</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> array1 <span class="token punctuation">)</span> <span class="token comment">// [1, 2, 3, 4, 5, 6]</span> |
You can apply it to many different arrays:
1 2 3 4 5 6 7 8 | <span class="token keyword">const</span> array1 <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token number">1</span> <span class="token punctuation">,</span> <span class="token number">2</span> <span class="token punctuation">,</span> <span class="token number">3</span> <span class="token punctuation">]</span> <span class="token keyword">const</span> array2 <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token number">4</span> <span class="token punctuation">,</span> <span class="token number">5</span> <span class="token punctuation">,</span> <span class="token number">6</span> <span class="token punctuation">]</span> <span class="token keyword">const</span> array3 <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token number">7</span> <span class="token punctuation">,</span> <span class="token number">8</span> <span class="token punctuation">,</span> <span class="token number">9</span> <span class="token punctuation">]</span> array3 <span class="token punctuation">.</span> <span class="token function">push</span> <span class="token punctuation">(</span> <span class="token operator">...</span> array2 <span class="token punctuation">,</span> <span class="token operator">...</span> array1 <span class="token punctuation">)</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> array3 <span class="token punctuation">)</span> <span class="token comment">// [7, 8, 9, 4, 5, 6, 1, 2, 3]</span> |