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:
jsx
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():
jsx
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:
jsx
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
jsx
const apiResults1 = ["apple", "banana"];
const apiResults2 = ["cherry", "date"];
const allResults = apiResults1.concat(apiResults2);
Perfect for combining paginated or segmented API responses.
Build Arrays Dynamically
jsx
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:
jsx
let merged = [];
for (let item of list1) merged.push(item);
for (let item of list2) merged.push(item);
Just use:
jsx
let merged = list1.concat(list2);
Or:
jsx
let merged = [...list1, ...list2];
Examples of JavaScript Array Concatenate in Practice
Basic Concatenation
jsx
const one = [1, 2];
const two = [3, 4];
const combined = one.concat(two);
You can concatenate more than two arrays:
jsx
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:
jsx
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:
jsx
console.log(added.flat()); // [1, 2, 3, 4, 5]
Insert Values Between Arrays
jsx
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:
jsx
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
jsx
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:
jsx
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:
jsx
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.
jsx
// 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:
jsx
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.