JavaScript Reference
Array.prototype.concat()
Merge arrays into a new array without mutating. Returns a shallow copy.
Last updated: October 2026
Definition: Array.prototype.concat() merges two or more arrays into a new array. It does not modify the original arrays. It accepts both arrays and individual values as arguments and flattens array arguments by one level [citation:1][citation:13].
🎬 Live Example
Five concat patterns. Click any button to see the output.
💡 concat never mutates. The originals stay untouched.
Basic Syntax
array.concat(value1, value2, ...)
// Returns a new array
// Does NOT mutate the original
// Flattens array arguments by one level🎯 Syntax & Parameters
| Parameter | Type | Description |
|---|---|---|
valueN | any | Arrays or values to merge. Array args are flattened one level. |
Merge Two Arrays
const a = [1, 2];
const b = [3, 4];
const merged = a.concat(b);
// merged: [1, 2, 3, 4]
// a: [1, 2] (unchanged)
// b: [3, 4] (unchanged)Merge Multiple Arrays
const result = [1].concat([2], [3], [4]);
// [1, 2, 3, 4]
// Chainable
const chained = [1].concat([2]).concat([3]);
// [1, 2, 3]Pro tip: concat returns a new array, so it's chainable — unlike push which returns a number.
Mix Arrays and Values
const arr = [1, 2];
arr.concat(3, 4, [5, 6]);
// [1, 2, 3, 4, 5, 6]
// Values are added as single elements
// Array args are spread one levelOnly One Level Deep
const nested = [1, 2].concat([[3, 4]]);
// [1, 2, [3, 4]] ← NOT fully flattened
// Use flat() for deeper flattening:
[1, 2].concat([[3, 4]]).flat();
// [1, 2, 3, 4]Important: concat flattens array arguments by one level only. Nested arrays inside those arguments stay nested.
Real-World: Immutable State Merge
// React / Redux pattern
const initialState = { items: [1, 2] };
// ❌ Mutating
// state.items.push(3);
// ✅ Non-mutating with concat
const newState = {
...state,
items: state.items.concat([3])
};
// state.items: [1, 2]
// newState.items: [1, 2, 3]This is the classic immutable update pattern — concat never surprises you by mutating.
🎯 concat vs push vs spread vs flat
| Method | Mutates? | Flatten depth |
|---|---|---|
concat | No | 1 level |
push | Yes | None |
[...a, ...b] | No | 1 level |
flat() | No | Configurable |
⚠️ Common Mistakes
- Expecting deep flattening. concat only goes one level. Use
flat(Infinity)for full flattening. - Thinking concat mutates. It never does. The originals stay untouched.
- Confusing concat with push. push mutates and returns length; concat returns a new array.
- Using concat in a loop. Each call creates a new array. Use push or spread accumulation instead.
- Assuming concat clones objects. It's a shallow copy — object references are shared.
❓ Frequently Asked Questions
What does Array.concat() do in JavaScript?
Array.concat() merges two or more arrays into a new array without modifying the original arrays. It returns a new array containing elements from the original array followed by the elements of each argument.
What is the difference between concat and push?
concat returns a new array and does not modify the originals. push mutates the original array by adding elements to it. Use concat for immutable merging, push for in-place additions.
Does concat flatten nested arrays?
No. concat only flattens one level of array arguments. Nested arrays inside those arguments remain nested. Use flat() or flatMap() for deeper flattening.
Can concat merge arrays and values together?
Yes. concat accepts both arrays and individual values. arr.concat([1, 2], 3, 4) adds the array elements followed by the numbers 3 and 4 to the new array.
Is concat faster than spread for merging arrays?
They are similar in performance for small arrays. Spread ([...a, ...b]) is more modern and readable. concat can be marginally faster on very large arrays in some engines, but the difference is rarely significant.