The JavaScript array.concat() method
The concat() method joins arrays together into a new array, leaving the originals untouched. [1, 2].concat([3, 4]) returns [1, 2, 3, 4]. Because it doesn't mutate, it's the immutable way to combine arrays — though the spread operator [...a, ...b] now does the same job and reads more clearly.
Overview
concat() merges arrays. Call it on one array, pass it one or more others, and you get back a brand-new array with everything strung together in order. You can also pass plain values, not just arrays, and they're appended too. Critically, none of the source arrays are changed — the result is a fresh array, which makes concat() safe to use in code that avoids mutation.
That non-mutating nature is the difference from push(): push bolts items onto the existing array and changes it; concat builds a new one and leaves the old ones alone. When you're combining lists in, say, React state, that distinction matters.
These days the spread operator does the same thing with less ceremony — [...first, ...second] is concat in modern clothing, and many developers prefer it for readability. One subtle behavior to know: concat() only flattens one level, so nested arrays inside an argument stay nested. The copy is shallow, like slice().
Syntax
const merged = array.concat(otherArray)
const merged = array.concat(arr1, arr2, value1 /* ... */)
// modern equivalent with the spread operator
const merged = [...array, ...otherArray]Parameters
The array.concat() method accepts the following parameters.
| Parameter | Description |
|---|---|
value1 ... valueN |
Arrays and/or values to join onto the end of the array. Arrays are merged one level deep; other values are appended as-is. |
Example
<pre id="out" style="font:15px ui-monospace,monospace"></pre>
<script>
const week1 = ['Mon', 'Tue'];
const week2 = ['Wed', 'Thu'];
const both = week1.concat(week2);
document.getElementById('out').textContent =
'merged: ' + both.join(', ') + '\n' +
'original: ' + week1.join(', '); // week1 unchanged
</script>Best practices
- Use
concat()(or the spread operator) when you need a new combined array and must not change the originals. - Prefer the spread syntax
[...a, ...b]in modern code — it's shorter and clearer for most cases. - Reach for push() instead when you do want to grow an existing array in place.
- Remember it flattens only one level — a nested array passed in stays nested.
Frequently asked questions
What does concat() do in JavaScript?
What is the difference between concat() and push()?
concat() returns a new array and leaves the originals alone; push() mutates the existing array. Use concat for immutability, push to grow in place.Is the spread operator the same as concat()?
[...a, ...b] produces the same result as a.concat(b) and is often preferred for readability.Does concat() flatten nested arrays?
flat().