concat() JavaScript Array Method – How to Merge Arrays

Whenever you use concat() on an array, the method does the following:

1. It concatenates (merges) its calling array with its arguments.
2. It creates and populates a new array with the merged values.

Note

• concat() does not alter the original array.
• A calling array is an array on which you used concat(). So, in array1.concat(array2), array1 is the calling array.
• concat() is sometimes written as Array.prototype.concat() because it is a method of the Array object’s prototype property.

Syntax of the concat() Method

concat() accepts one or more arguments. Here is the syntax:

callingArray.concat(item1, item2, ..., itemX)

The item arguments are the values you wish to concatenate into the callingArray.

Examples

Below are examples of the concat() method.

Merge an array with another array

// Define two arrays:
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];

// Merge array1 with array2:
const newArray = array1.concat(array2);

// Log the newArray to the console:
console.log(newArray);

// The invocation above will return:
// [1, 2, 3, 4, 5, 6]

Try it on StackBlitz

The snippet above used concat() to concatenate (merge) array1 with array2.

Merge an array with three other arrays

// Define four arrays:
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const array3 = ["a", "b"];
const array4 = ["pink", 100, true];

// Merge array1 with array2, array3, and array4:
const newArray = array1.concat(array2, array3, array4);

// Log the newArray to the console:
console.log(newArray);

// The invocation above will return:
// [1, 2, 3, 4, 5, 6, "a", "b", "pink", 100, true]

Try it on StackBlitz

The snippet above used concat() to concatenate four arrays.

Merge an array with a nested array

// Define two arrays:
const array1 = [1, 2, 3];
const array2 = [4, ["a", "b"], 5, 6, ["pink", 100, true]];

// Merge array1 with array2:
const newArray = array1.concat(array2);

// Log the newArray to the console:
console.log(newArray);

// The invocation above will return:
// [1, 2, 3, 4, ["a", "b"], 5, 6, ["pink", 100, true]]

Try it on StackBlitz

The snippet above used concat() to merge array1 with a nested array.

AD

Merge two nested arrays

// Define two arrays:
const array1 = [1, ["pink", 100, true], 2, 3];
const array2 = [4, ["a", "b"], 5, 6];

// Merge array1 with array2:
const newArray = array1.concat(array2);

// Log the newArray to the console:
console.log(newArray);

// The invocation above will return:
// [1, ["pink", 100, true], 2, 3, 4, ["a", "b"], 5, 6]

Try it on StackBlitz

The snippet above used concat() to merge two nested arrays.

Merge an array with a number

// Define an array:
const array1 = [1, 2, 3];

// Merge array1 with a number:
const newArray = array1.concat(4);

// Log the newArray to the console:
console.log(newArray);

// The invocation above will return:
// [1, 2, 3, 4]

Try it on StackBlitz

The snippet above used concat() to merge array1 with a number.

Merge an array with three numbers

// Define an array:
const array1 = [1, 2, 3];

// Merge array1 with three numbers:
const newArray = array1.concat(4, 75, 29);

// Log the newArray to the console:
console.log(newArray);

// The invocation above will return:
// [1, 2, 3, 4, 75, 29]

Try it on StackBlitz

The snippet above used concat() to merge array1 with three numbers.

Merge an array with two strings

// Define an array:
const array1 = [1, 2, 3];

// Merge array1 with two strings:
const newArray = array1.concat("a", "b");

// Log the newArray to the console:
console.log(newArray);

// The invocation above will return:
// [1, 2, 3, "a", "b"]

Try it on StackBlitz

The snippet above used concat() to merge array1 with two strings.

Merge an array with a number, string, and another array

// Define two arrays:
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];

// Merge array1 with a number, string, and array2:
const newArray = array1.concat(910, "CodeSweetly", array2);

// Log the newArray to the console:
console.log(newArray);

// The invocation above will return:
// [1, 2, 3, 910, "CodeSweetly", 4, 5, 6]

Try it on StackBlitz

The snippet above used concat() to concatenate array1 with three other items.

Merge an array with an object

// Define an array:
const array1 = [1, 2, 3];

// Merge array1 with an object:
const newArray = array1.concat({ year: 2022, month: "October" });

// Log the newArray to the console:
console.log(newArray);

// The invocation above will return:
// [1, 2, 3, {year: 2022, month: "October"}]

Try it on StackBlitz

The snippet above used concat() to merge array1 with an object.