concat() JavaScript Array Method – How to Merge Arrays
Whenever you use concat() on an array, the method does the following:
- It concatenates (merges) its calling array with its arguments.
- It creates and populates a new array with the merged values.
concat()
does not alter the original array.- A calling array is an array on which you used
concat()
. So, inarray1.concat(array2)
,array1
is the calling array. concat()
is sometimes written asArray.prototype.concat()
because it is a method of theArray
object'sprototype
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.
How to 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]
The snippet above used concat()
to concatenate (merge) array1
with array2
.
How to 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]
The snippet above used concat()
to concatenate four arrays.
How to 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]]
The snippet above used concat()
to merge array1
with a nested array.
How to 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]
The snippet above used concat()
to merge two nested arrays.
How to 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]
The snippet above used concat()
to merge array1
with a number.
How to 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]
The snippet above used concat()
to merge array1
with three numbers.
How to 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"]
The snippet above used concat()
to merge array1
with two strings.
How to 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]
The snippet above used concat()
to concatenate array1
with three other items.
How to 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"}]
The snippet above used concat()
to merge array1
with an object.
Overview
concat()
populates a new array with the concatenation of its calling array and its arguments.