JavaScript Array Concatenate: Syntax, Usage, and Examples

In JavaScript, you can combine two or more arrays into one using several techniques. This process is known as array concatenation. Whether you’re merging lists of items, combining results from different sources, or building dynamic datasets, the ability to JavaScript array concatenate values efficiently is an essential skill. JavaScript provides multiple ways to concatenate arrays, including the concat() method, the spread operator (...), and even push() in some advanced use cases.

How to Concatenate Arrays in JavaScript

Using concat()

The concat() method returns a new array containing the merged values of the original arrays:

const numbers1 = [1, 2, 3];
const numbers2 = [4, 5, 6];

const result = numbers1.concat(numbers2);
console.log(result); // [1, 2, 3, 4, 5, 6]

This is the most direct way to concatenate an array in JavaScript.

Using the Spread Operator (...)

The spread operator is a modern and cleaner alternative to concat():

const a = ["a", "b"];
const b = ["c", "d"];

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

The spread syntax is easy to read and also allows you to insert elements anywhere.

Concatenation Inside push() (Advanced)

You can use Array.prototype.push() along with the spread operator to append elements in-place:

const list1 = [1, 2];
const list2 = [3, 4];

list1.push(...list2);
console.log(list1); // [1, 2, 3, 4]

This modifies the original array, unlike concat() which returns a new one.

When to Use Concatenate Array JavaScript Techniques

Merge Multiple Data Sources

const apiResults1 = ["apple", "banana"];
const apiResults2 = ["cherry", "date"];

const allResults = apiResults1.concat(apiResults2);

Perfect for combining paginated or segmented API responses.

Build Arrays Dynamically

const defaultSettings = ["darkMode", "compactView"];
const userSettings = ["notificationsOn"];

const activeSettings = [...defaultSettings, ...userSettings];

This is cleaner and safer than manually pushing or looping.

Simplify Loop-Based Merging

Instead of doing this:

let merged = [];

for (let item of list1) merged.push(item);
for (let item of list2) merged.push(item);

Just use:

let merged = list1.concat(list2);

Or:

let merged = [...list1, ...list2];

Examples of JavaScript Array Concatenate in Practice

Basic Concatenation

const one = [1, 2];
const two = [3, 4];

const combined = one.concat(two);

You can concatenate more than two arrays:

const all = one.concat(two, [5, 6], [7]);
console.log(all); // [1, 2, 3, 4, 5, 6, 7]

Concatenate Nested Arrays

concat() does not flatten nested arrays:

const nested = [1, [2, 3]];
const added = nested.concat([4, 5]);
console.log(added); // [1, [2, 3], 4, 5]

Use .flat() if you need to flatten:

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

Insert Values Between Arrays

const pre = [1];
const post = [3];

const final = [...pre, 2, ...post];
console.log(final); // [1, 2, 3]

The spread operator lets you drop in values anywhere during concatenation.

Learn More About Concatenation in JavaScript

Preserve Original Arrays

When using concat() or spread, the original arrays stay unchanged:

const a = [1];
const b = [2];

const combined = a.concat(b);

console.log(a); // [1]
console.log(b); // [2]

This makes these methods safe for non-destructive operations.

Use in Functions for Variable-Length Arguments

function mergeArrays(...arrays) {
  return [].concat(...arrays);
}

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

This pattern allows flexible array combination.

JavaScript Concatenate Arrays With Empty Arrays

Empty arrays don’t affect the result:

const one = [1, 2];
const empty = [];

const output = one.concat(empty);
console.log(output); // [1, 2]

This makes it safe to concatenate with possibly undefined or blank data.

Mixing Types in Array Concatenation

JavaScript arrays can hold any data type:

const mixed = [1, "a"].concat([true, null]);
console.log(mixed); // [1, "a", true, null]

This flexibility allows powerful combinations of values, though it may require careful type checking later.

Performance Tips

• Use concat() or spread for readability.
• Prefer push(...arr) if you're optimizing for performance in very large arrays.
• Avoid mutating the original array unless intentional.

// Faster but modifies the original
arr1.push(...arr2);

// Slower but safer
let newArr = arr1.concat(arr2);

Array Concatenation vs join()

Remember that join() creates a string, not a new array:

const list = ["one", "two"];
const sentence = list.join(" and ");
console.log(sentence); // "one and two"

Use join() for output, and concat() or spread for structural merging.

JavaScript array concatenate operations let you combine arrays quickly and flexibly using tools like concat() and the spread operator. Whether you're aggregating lists, merging settings, or assembling results, the ability to concatenate an array in JavaScript is fundamental. By mastering these techniques, you can write cleaner code and handle data combinations more efficiently in any project.