Merging Arrays in JavaScript

To merge arrays in JavaScript, you can use the array.concat(), array.push() methods, and the spread operator ("..."). The concat() method is used to concatenate two or more arrays into one. The concat() method does not change existing arrays but returns a new array that has the result of the merge. The push() method allows you to add one or more elements to the end of an existing array; this method changes the original array. The spread operator ("...") is a new and handy way to merge JavaScript arrays, available since ECMAScript 6. In this JavaScript Arrays Merge Example, we use the array.concat() method. Below you can see more examples of merging JavaScript arrays. Click Execute to run the JavaScript Merge Array Example online and see the result.
Merging Arrays in JavaScript Execute
let arr1 = ['JavaScript', 'Merge'];
let arr2 = ['Arrays', 'Example'];

let result = arr1.concat(arr2);

console.log(result);
Updated: Viewed: 761 times

How to combine to arrays in JavaScript?

To combine to arrays in JavaScript, you can use the built-in array.concat() method. The array.concat() method takes arrays as arguments and returns the concatenated array. The concat() method takes one or more arrays as parameters and adds them to the array on which this method was called. The array.concat() method returns the newly created array after merging all the arrays passed as parameters to the method.

JavaScript Array concat() Syntax
array.concat(array1, array2, ...)

Where:
  • array1, array2: one or more arrays are intended to be combined with the "array"
JavaScript Arrays Combine Example
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];

let result = arr1.concat(arr2);

console.log(result);

// output: [1, 2, 3, 4, 5, 6]

How to merge multiple arrays using spread operator in JavaScript?

You can concatenate JavaScript arrays using the spread operator. Write two or more variables inside an array, prefixed with a spread operator ("..."), and JavaScript will merge them into one new array.

JavaScript Merge Arrays with Spread Operator Syntax
let result = [...array1, ...array2]

Where:
  • ...array1, ...array2: the arrays must be merged.
JavaScript Arrays Merge with Spread Operator Example
let arr1 = ['JavaScript', 'Merge'];
let arr2 = ['Arrays', 'Example'];

let result = [...arr1, ...arr2, 'String'];

console.log(result);

// output: ['JavaScript', 'Merge', 'Arrays', 'Example', 'String']

Merge JavaScript arrays with push() method

The array.concat() method and the spread operator create a new array, but sometimes it is necessary not to create a new array, but to modify an existing array. You can use the array.push() method for this. The push() method adds the provided elements to the end of the existing array.

JavaScript Merge Arrays using push() Example
let array = ['JavaScript'];

array.push('Arrays', 'Merge');

console.log(array)

// output: ['JavaScript', 'Arrays', 'Merge']

You can also add one or more elements to the beginning of an array using the array.unshift() method:

JavaScript Merge Arrays using unshift() Example
let array = ['JavaScript'];

array.unshift('Arrays', 'Merge');

console.log(array)

// output: ['Arrays', 'Merge', 'JavaScript']

Since the array.push() method can take multiple elements, we can append the entire array using the spread operator when calling the push() method:

JavaScript Array push() with Spread Operator Example
let arr1 = ['JavaScript', 'Merge'];
let arr2 = ['Arrays', 'Example'];

arr1.push(...arr2);

console.log(arr1);

// output: ['JavaScript', 'Merge', 'Arrays', 'Example']

See also