JavaScriptArraysBeginner

Array.concat()

Returns a new array by combining arrays and/or values (non-mutating).

Review the syntaxStudy the examplesOpen the coding app
array.concat(...itemsOrArrays)
Open Coding Reference

This static page keeps the syntax and examples indexed for search, while the coding app handles interactive exploration and saved references.

What it does

Overview

Returns a new array by combining arrays and/or values (non-mutating).

The concat() method is used to merge two or more arrays or values into a single new array. It does not change the existing arrays but instead returns a shallow copy that contains the elements from the original array followed by the elements of each argument. Technically, concat() iterates through the arguments; if an argument is an array (or array-like with Symbol.isConcatSpreadable set to true), its elements are appended individually. If the argument is a primitive or an object, the value itself is appended. Performance notes: concat() has O(N + M) complexity where N and M are the lengths of the arrays being merged. Because it creates a new array and performs shallow copying, it can be memory-intensive for extremely large datasets compared to in-place mutation methods like push(). A key edge case is that it only flattens arguments by exactly one level; nested arrays remain nested within the result.

Quick reference

Syntax

array.concat(...itemsOrArrays)

Inputs

Parameters

itemsOrArraysany[] · Arrays or values to add.

See it in practice

Examples

1

Basic Array and Value Merging

const letters = ['a', 'b'];
const numbers = [1, 2];
const alphaNumeric = letters.concat(numbers, 3);

console.log(alphaNumeric);
Output:
['a', 'b', 1, 2, 3]

Combines an array of strings, an array of numbers, and a literal number into one new array.

2

Shallow Copy Behavior with Objects

const obj = { role: 'admin' };
const list1 = [obj];
const list2 = list1.concat({ role: 'guest' });

// Modifying the original object affects the concatenated array
obj.role = 'superuser';
console.log(list2[0].role);
Output:
'superuser'

Demonstrates that concat() performs a shallow copy. References to objects are preserved, so changes to the original object are reflected in the new array.

3

One-Level Flattening Limitation

const source = [1, 2];
const nested = [[3, 4]];
const result = source.concat(nested);

console.log(result);
console.log(result.length);
Output:
[1, 2, [3, 4]] 3

Shows that concat() only flattens the immediate array argument. The array [3, 4] is treated as a single element of the result because it was wrapped in an outer array.

Debug faster

Common Errors

1

LogicError

Cause: Assuming the method mutates the original array in place.

Fix: Always assign the return value to a variable, as concat() returns a new array.

const arr = [1, 2];
arr.concat([3]); // Error: arr is still [1, 2]
2

LogicError

Cause: Expecting deep flattening of multi-dimensional arrays.

Fix: Use Array.prototype.flat() with a depth argument if you need to merge and flatten multiple levels.

const arr = [1].concat([[2, [3]]]); // Results in [1, [2, [3]]] instead of [1, 2, 3]

Runtime support

Compatibility

Node.js, BrowserAll browsersES3+

Source: MDN Web Docs

Common questions

Frequently Asked Questions

Returns a new array by combining arrays and/or values (non-mutating).

itemsOrArrays: Arrays or values to add.

LogicError: Always assign the return value to a variable, as concat() returns a new array. LogicError: Use Array.prototype.flat() with a depth argument if you need to merge and flatten multiple levels.