Merging Arrays on JavaScript

In this article we’ll explore types of JavaScript array merging.

Array Concat

The concat method allows you to take an array, combine it with another array, and return a new array.

const arrayOne = [‘a’, ‘b’, ‘c’];
const arrayTwo = [‘d’, ‘e’, ‘f’];
const arrayJoin = arrayOne.concat(arrayTwo);

console.log(arrayJoin); //[“a”, “b”, “c”, “d”, “e”, “f”]

The Spread Operator

Spread operator comes with JavaScript ES6, ES6 spread operator helps to create a shallow copy.

const arrayOne = [‘a’, ‘b’, ‘c’];
const arrayTwo = [‘d’, ‘e’, ‘f’];

console.log([…arrayOne,…arrayTwo]);//[“a”, “b”, “c”, “d”, “e”, “f”]

Array Push

Above 2 methods, contact and spread operator join arrays and create new array without changing existing arrays but this push method change existing array without creating new array. if user want to add array to another array with out creating new array this is the method to use.

const arrayOne = [‘a’, ‘b’, ‘c’];
const arrayTwo = [‘d’, ‘e’, ‘f’];

arrayOne.push(…arrayTwo);

console.log(arrayOne);//[“a”, “b”, “c”, “d”, “e”, “f”]