How to merge two arrays?

Brief Answer

There are several ways to merge two arrays in JavaScript:

Spread operator — [...arr1, ...arr2] — most modern way 🆕
Concat method — arr1.concat(arr2) — classic way 📚
Push method — arr1.push(...arr2) — modifies first array ⚠️

const arr1 = [1, 2];
const arr2 = [3, 4];
 
// Spread — creates new array
const merged1 = [...arr1, ...arr2]; // [1, 2, 3, 4]
 
// concat — also creates new array
const merged2 = arr1.concat(arr2); // [1, 2, 3, 4]
 
// push — modifies first array!
arr1.push(...arr2); // arr1 becomes [1, 2, 3, 4]

Full Answer

Merging arrays is like merging two streams of water into one! There are different ways to do it 🌊

Spread Operator (Most Common)

The simplest and clearest way — use three dots:

const fruits = ['apple', 'banana'];
const vegetables = ['carrot', 'potato'];
 
// Merge into new array
const food = [...fruits, ...vegetables];
// ['apple', 'banana', 'carrot', 'potato']
 
// Can add elements at edges
const menu = ['start', ...fruits, ...vegetables, 'end'];

Concat Method

Classic way that works in all browsers:

const arr1 = [1, 2];
const arr2 = [3, 4];
const arr3 = [5, 6];
 
// Merge two arrays
const result1 = arr1.concat(arr2); // [1, 2, 3, 4]
 
// Can merge several at once
const result2 = arr1.concat(arr2, arr3); // [1, 2, 3, 4, 5, 6]
 
// Can add separate elements
const result3 = arr1.concat(arr2, 7, 8); // [1, 2, 3, 4, 7, 8]

Push Method (Modifies Array)

Important: this way modifies the first array!

const arr1 = [1, 2];
const arr2 = [3, 4];
 
// Modifies arr1!
arr1.push(...arr2); // arr1 becomes [1, 2, 3, 4]
// Returns length: 4

When to Use What

Spread and concat — for creating new array

// ✅ When you need to preserve originals
const newArr = [...oldArr1, ...oldArr2];
 
// ✅ Same with concat
const newArr2 = oldArr1.concat(oldArr2);

Push — when you need to modify array

// ✅ When you need to modify first array
originalArr.push(...newElements);

Common Mistakes

Forgetting array modification

// ❌ Mistake — modifies original array
const arr1 = [1, 2];
const arr2 = [3, 4];
arr1.push(...arr2); // arr1 is now [1, 2, 3, 4]!
 
// ✅ Correct — create new array
const merged = [...arr1, ...arr2]; // arr1 unchanged

Confusion with nested arrays

const arr1 = [1, 2];
const arr2 = [3, 4];
 
// ❌ Creates nested array
const wrong = [arr1, arr2]; // [[1, 2], [3, 4]]
 
// ✅ Correct — merges elements
const right = [...arr1, ...arr2]; // [1, 2, 3, 4]

Simple Rules

Spread [...a, ...b] — modern and clear way 🆕
concat — classic way, works everywhere 📚
push — modifies array, others — create new one ⚠️
Doesn’t nest — merges elements, doesn’t create nested arrays 🎯
Preserve originals — create new array if needed 🆕

Knowing different ways to merge arrays helps choose the right tool for each task! 💪

Want more articles to prepare for interviews? Subscribe to EasyAdvice, bookmark the site and improve yourself every day 💪