How to merge two arrays in JavaScript and de-duplicate items ?

To merge two arrays in JavaScript and remove duplicates, you can use various techniques depending on whether your arrays contain primitives (like numbers, strings) or objects. Below is a detailed guide with examples, edge cases, and performance considerations.

1. Merging Primitive Arrays (Numbers, Strings)

Method 1: Using Set (Most Efficient)

A Set automatically removes duplicates, and the spread operator (...) converts it back to an array:

const arr1 = [1, 2, 3];
const arr2 = [3, 4, 5];

// Merge and deduplicate
const merged = [...new Set([...arr1, ...arr2])];
// Result: [1, 2, 3, 4, 5]

How It Works:

1. [...arr1, ...arr2] merges the arrays: [1, 2, 3, 3, 4, 5].
2. new Set() removes duplicates.
3. [...new Set()] converts the Set back to an array.

Method 2: Using filter and indexOf (Less Efficient)

This works but is slower for large arrays (O(n²) time complexity):

const merged = arr1.concat(arr2).filter((item, index, self) => {
  return self.indexOf(item) === index;
});
// Result: [1, 2, 3, 4, 5]

2. Merging Arrays of Objects

Objects are compared by reference, so deduplication requires checking a unique identifier (e.g., id).

Method 1: Using reduce and Map (Efficient)

Track seen IDs using a Map or object for O(n) time:

const arr1 = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];
const arr2 = [{ id: 2, name: 'Bob' }, { id: 3, name: 'Charlie' }];

const merged = [...arr1, ...arr2].reduce((acc, obj) => {
  if (!acc.seen.has(obj.id)) {
    acc.seen.set(obj.id, true); // Track IDs
    acc.result.push(obj);
  }
  return acc;
}, { seen: new Map(), result: [] }).result;

// Result: [{ id: 1 }, { id: 2 }, { id: 3 }]

Method 2: Using filter and find

Less efficient (O(n²)) but simpler for small datasets:

const merged = [...arr1, ...arr2].filter(
  (obj, index, self) => 
    index === self.findIndex((o) => o.id === obj.id)
);

3. Merging Multiple Arrays

Combine any number of arrays and deduplicate:

const arrays = [
  [1, 2],
  [3, 4],
  [2, 5]
];

// Flatten and deduplicate
const merged = [...new Set(arrays.flat())];
// Result: [1, 2, 3, 4, 5]

4. Edge Cases & Advanced Scenarios

Mixed Data Types

Set treats 1 (number) and '1' (string) as distinct:

const merged = [...new Set([1, '1', 2, '2'])];
// Result: [1, '1', 2, '2']

Null/Undefined Values

Set preserves null, undefined, and NaN:

const merged = [...new Set([null, undefined, NaN, NaN])];
// Result: [null, undefined, NaN]

Nested Arrays

Use recursion or JSON.stringify for nested duplicates (caution: order matters):

const arr1 = [[1, 2], [3, 4]];
const arr2 = [[1, 2], [5, 6]];

const merged = [...new Set([...arr1, ...arr2].map(JSON.stringify))]
  .map(JSON.parse);
// Result: [[1, 2], [3, 4], [5, 6]]

5. Performance Comparison

Method	Time Complexity	Use Case
Set	O(n)	Primitives (best performance)
Map/reduce	O(n)	Objects with unique IDs
filter + find	O(n²)	Small object arrays
filter + indexOf	O(n²)	Small primitive arrays

6. Key Takeaways

• Primitives: Use Set for simplicity and speed.
• Objects: Track uniqueness with Map or a unique property (e.g., id).
• Order: The merged array preserves the first occurrence of each item.
• Edge Cases: Handle null, undefined, and mixed data types carefully.

Full Example Workflow

// Example 1: Merge two arrays of primitives
const numbers1 = [1, 2, 3];
const numbers2 = [3, 4, 5];
const mergedNumbers = [...new Set([...numbers1, ...numbers2])];
// [1, 2, 3, 4, 5]

// Example 2: Merge arrays of objects with unique IDs
const users1 = [{ id: 1 }, { id: 2 }];
const users2 = [{ id: 2 }, { id: 3 }];
const mergedUsers = [...users1, ...users2].reduce((acc, user) => {
  if (!acc.seen.has(user.id)) {
    acc.seen.set(user.id, true);
    acc.result.push(user);
  }
  return acc;
}, { seen: new Map(), result: [] }).result;
// [{ id: 1 }, { id: 2 }, { id: 3 }]

// Example 3: Merge nested arrays
const nested1 = [[1, 2], [3, 4]];
const nested2 = [[1, 2], [5, 6]];
const mergedNested = [...new Set([...nested1, ...nested2].map(JSON.stringify))]
  .map(JSON.parse);
// [[1, 2], [3, 4], [5, 6]]

By choosing the right method for your data type and use case, you can efficiently merge and deduplicate arrays in JavaScript.