Definition and Usage

The concat() function for arrays
concatenates one or more arrays or values in the order they are provided, creating a new array. (concatenate means to link together like a chain.)

This function is useful for merging multiple arrays into one or for concatenating arrays with individual values.

Features

  • Allows concatenating multiple arrays in the desired order.
  • Enables adding one or more values to an array in sequence.
  • Does not modify the original array and returns a new array with the combined results.
  • Elements from each array are concatenated in the order they are provided, creating a new merged array.

Basic Example

JavaScript 
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];

// Concatenate two arrays
const twoConcatArray = array1.concat(array2);
console.log(twoConcatArray); // Output: [1, 2, 3, 4, 5, 6]

// Concatenate three arrays
const array3 = [6, 7, 8];
const threeConcatArray = array1.concat(array2, array3);
console.log(threeConcatArray); // Output: [1, 2, 3, 4, 5, 6, 6, 7, 8]

// Concatenate array with one or more values
const arrayWithValues = array1.concat(9, 10, 11);
console.log(arrayWithValues); // Output: [1, 2, 3, 9, 10, 11]

Syntax

JavaScript 
arr.concat(value1[, ...[, valueN]])

arr refers to the array on which the concat() function is being called.

Parameters

Parameters of the concat() function
value1, valueN One or more arrays and/or values to concatenate into a new array.
You can specify multiple arrays and/or values to append to the array.

Return Values

Returns a new Array object by concatenating the provided arrays and/or values in the order they are passed.

Examples

Let's look at some examples

Concatenating Two Arrays

JavaScript 
// Create two arrays
const arr1 = [1, 2, 3];
const arr2 = [3, 4, 5];

// Use concat() to combine the two arrays
const concatenatedArray = arr1.concat(arr2);
console.log(concatenatedArray); // Output: [1, 2, 3, 3, 4, 5]

Concatenating Three Arrays

JavaScript 
// Create three arrays
const arr1 = [1, 2, 3];
const arr2 = [3, 4, 5];
const arr3 = [7, 8, 9];

// Use concat() to combine the three arrays
const concatenatedArray = arr1.concat(arr2, arr3);
console.log(concatenatedArray); // Output: [1, 2, 3, 3, 4, 5, 7, 8, 9]

Concatenating Values to an Array

JavaScript 
// Create an array to use with concat()
const arr1 = ["a", "b", "c"];

// Use concat() to add values to the array
const concatenatedArray = arr1.concat(1);
console.log(concatenatedArray); // Output: ['a', 'b', 'c', 1]

The concat() function connects array elements as they are, so duplicates may occur. To remove duplicates, you can use one of the following methods:

  • Using the Set() object
  • Using the filter() function

Using the Set() Object

The Set() object is a collection that can only store unique elements.
You can store the array merged with concat() into a Set() object, then use the spread (...) syntax to convert it back into an array.

JavaScript 
// Create two arrays
const arr1 = [1, 2, 3];
const arr2 = [3, 4, 5];

// Use concat() to combine the two arrays
const concatenatedArray = arr1.concat(arr2);

// Use Set to remove duplicates
// Use spread (...) syntax to convert back to an array
const uniqueArray = [...new Set(concatenatedArray)];

console.log(uniqueArray); // Output: [1, 2, 3, 4, 5]

Using the filter() Function

You can use the filter() function to iterate over the merged array and remove duplicate elements.

JavaScript 
// Create two arrays
const arr1 = [1, 2, 3];
const arr2 = [3, 4, 5];

// Use concat() to combine the two arrays
const concatenatedArray = arr1.concat(arr2);

// Use filter() to remove duplicates
const uniqueArray = concatenatedArray.filter((item, index) => {
    return concatenatedArray.indexOf(item) === index;
});

console.log(uniqueArray); // Output: [1, 2, 3, 4, 5]

Code Explanation
The filter() method for arrays iterates over each element of the array and uses a callback function to determine which elements to include. It returns a new array containing the filtered elements.

Code Explanation
The indexOf() method for arrays searches the array for the element passed as an argument and returns the index of the first occurrence found.

Specifications

Specification for JavaScript Array concat() Function
Specification
concat() ECMAScript Language Specification
#sec-array.prototype.concat

Browser compatibility

Browser compatibility for JavaScript Array concat() Function
Method
Desktop Chrome
Chrome
DesktopDesktop Edge
Edge
Desktop Firefox
Firefox
Safari
Safari
concat() 1 12 1 1

References

See also