Merge arrays immutably
Combine two or more lists into one without changing the originals.
JavaScript · Function
concat
Array.prototype.concat() returns a new array formed from the calling array and supplied arrays or values. It does not mutate the source arrays and spreads array arguments only one level.
How it works
Call concat() on an array with zero or more arrays or values. It creates a new shallow array, spreading array arguments by one level and appending non-array values as individual elements.
Syntax
concat()
concat(value1)
concat(value1, value2)
concat(value1, value2, /* …, */ valueN)Parameters
| Name | Type | Description |
|---|---|---|
value1, …, valueN | any | Arrays and/or values to concatenate into a new array. Array arguments are spread by one level unless their spreadability behavior prevents it. |
Returns
A new Array instance containing the calling array's elements followed by the concatenated arguments.
Key points
- Use concat() to combine an array with other arrays.
- The source arrays remain unchanged, so the operation is non-mutating.
- Each argument may be an array or any value.
- Calling concat() with no arguments makes a shallow copy.
- Arrays are spread by default, and array-like objects can opt into spreading.
- The result is a new array containing references to the original elements.
Common mistakes
- Only one array level is spread; nested arrays remain nested.
- Sparse-array holes remain holes in the resulting array.
- concat() is non-mutating; use the returned array rather than expecting an input array to change.
- Plain objects are appended as one element rather than being flattened.
Example: Merge arrays without mutation
const first = [1, 2];
const second = [3, 4];
const combined = first.concat(second, 5);
console.log(combined); // [1, 2, 3, 4, 5]
console.log(first); // [1, 2]Creates a new array from both input arrays and an additional value while leaving the original arrays unchanged.
When to use it
Append values
Add one or more values while producing a separate result.
Create a shallow copy
Duplicate an array shallowly before making changes.
Control spreading
Flatten one level of array-like input when Symbol.isConcatSpreadable is enabled.
Related
Array.prototype.flat()Array.prototype.push()Array.prototype.slice()Symbol.isConcatSpreadableSpread syntax (...)