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.

Quick Answer: How to Concatenate Arrays in JavaScript

The two most common and recommended ways to concatenate arrays in JavaScript are the concat() method and the spread operator (...). Both create a new array without changing the original arrays. The spread operator is generally preferred for its cleaner, more modern syntax.

1. Using the Spread Operator (...):

const array1 = ['a', 'b'];
const array2 = ['c', 'd'];
const newArray = [...array1, ...array2];
// Result: ['a', 'b', 'c', 'd']

2. Using the concat() Method:

const array1 = ['a', 'b'];
const array2 = ['c', 'd'];
const newArray = array1.concat(array2);
// Result: ['a', 'b', 'c', 'd']

For most use cases, the spread operator is the modern standard for array concatenation.

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.

Comparison of Concatenation Methods

Choosing the right method depends on whether you need to modify the original array or create a new one.

| Method | Modifies Original Array? | Returns | Primary Use Case | | --- | --- | --- | --- | | Spread ... | No | A new, combined array | Modern standard. Cleanly merging arrays and other values. | | concat() | No | A new, combined array | Classic method for merging two or more arrays. | | push(...arr) | Yes | The new length of the modified array | Appending items to an existing array for performance or mutation needs. |

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.

Key Takeaways for JavaScript Array Concatenation

• Spread Operator is Preferred: For modern JavaScript, the spread operator (...) is the cleanest and most common way to combine arrays: const newArr = [...arr1, ...arr2];.
• concat() is the Classic Method: The concat() method is a reliable alternative that achieves the same result: const newArr = arr1.concat(arr2);.
• Don't Mutate by Accident: Both the spread operator and concat() create a new array and leave the original arrays unchanged. This is usually the desired behavior.
• Use push() to Modify an Array: If you intentionally want to add items from one array to another without creating a new one, use push() with the spread operator: arr1.push(...arr2);.
• Concatenation vs. join(): Use concatenation to merge arrays into a new array. Use join() when you need to convert an array into a single string.