JavaScript Array concat() Method

What You’ll Learn

The concat() method merges arrays into a new array without touching the originals. This tutorial covers syntax, five worked examples, comparisons with spread syntax, shallow-copy behavior, and when to pick concat over mutating helpers like push.

Introduction

Arrays often need to be combined—merging a shopping cart with saved items, joining paginated API results, or building a playlist from multiple sources. The concat() method is the classic, non-destructive way to do that in JavaScript.

Unlike push or splice, concat() never changes the arrays you pass in. It returns a fresh array containing every element in order.

Understanding the concat() Method

concat() walks each argument: if the argument is an array (or array-like with a length), its elements are appended; otherwise the value itself becomes one new slot in the result.

Reach for concat when you want a merged snapshot without side effects. In modern code, [...first, ...second] is equally common—both produce a shallow, one-level merge.

📝 Syntax

General form of Array.prototype.concat:

const newArray = array1.concat(array2, array3, value1, value2);

Parameters

• array1 — the array you call the method on (the starting elements).
• array2, array3, … — optional arrays whose elements are appended in order.
• value1, value2, … — optional non-array values appended as single elements.

Return value

• A new array containing all merged elements.
• Original arrays remain unchanged.

Common patterns

• a.concat(b) — merge two arrays.
• a.concat(b, c) — merge three or more in one call.
• [].concat(original) — shallow copy trick.

Examples Gallery

Open DevTools Console (F12) and paste each snippet, or use the Try-it links. Example numbers match lab numbers (?tryit=1 through 5).

const fruits1 = ["apple", "orange"];
const fruits2 = ["banana", "grape"];

const mergedFruits = fruits1.concat(fruits2);

console.log(mergedFruits);
// ["apple", "orange", "banana", "grape"]

console.log(fruits1); // unchanged: ["apple", "orange"]

["apple","orange","banana","grape"]

const fruits1 = ["apple", "orange"];
const fruits2 = ["banana", "grape"];
const moreFruits = ["kiwi", "mango"];

const mergedFruits = fruits1.concat(fruits2, moreFruits);

console.log(mergedFruits);
// ["apple", "orange", "banana", "grape", "kiwi", "mango"]

["apple","orange","banana","grape","kiwi","mango"]

const originalArray = [1, 2, 3];
const copiedArray = [].concat(originalArray);

copiedArray.push(4);

console.log(copiedArray);    // [1, 2, 3, 4]
console.log(originalArray);  // [1, 2, 3]

[1, 2, 3, 4]
[1, 2, 3]

const nums = [1, 2];
const extended = nums.concat(3, 4, 5);

console.log(extended);
// [1, 2, 3, 4, 5]

const withLabel = ["a", "b"].concat("separator", ["c", "d"]);
console.log(withLabel);
// ["a", "b", "separator", "c", "d"]

[1, 2, 3, 4, 5]
["a","b","separator","c","d"]

const selectedFruits = ["apple", "banana"];
const tropicalFruits = ["kiwi", "mango"];
const shouldIncludeTropical = true;

const finalFruits = selectedFruits.concat(
  shouldIncludeTropical ? tropicalFruits : []
);

console.log(finalFruits);
// ["apple", "banana", "kiwi", "mango"]

["apple","banana","kiwi","mango"]

🚀 Common Use Cases

• Immutable merges — build new lists in Redux-style reducers without mutating state.
• Pagination — append the next page: allItems.concat(nextPage).
• Shallow clones — duplicate a top-level array before editing.
• Default + user data — concat defaults with user selections.
• Legacy compatibility — works in every JavaScript environment, including very old browsers.
• Functional pipelines — chain with map/filter without side effects.

📝 Notes

• concat() flattens only one level of array arguments.
• For deep clones, use structured cloning, a library, or recursive copy—not concat alone.
• Array.prototype.concat is not the same as String.prototype.concat (strings behave differently).
• Spread syntax cannot easily append a single array as one nested element without wrapping it: [...a, b] spreads b.
• Empty arrays as arguments are harmless—they add zero elements.
• Performance: for very large arrays, consider pre-allocating or using loops if profiling shows a bottleneck.

💡 Best Practices