How can I merge two arrays and remove duplicate values in JavaScript?

How can I merge two arrays and remove duplicate values in JavaScript?

You can use the spread operator and the Set object to merge arrays and remove duplicates. Here's an example:

const array1 = [1, 2, 3];
const array2 = [2, 3, 4];
const mergedArray = [...new Set([...array1, ...array2])];
console.log(mergedArray); // Output: [1, 2, 3, 4]

What if the arrays contain objects instead of numbers?

If the arrays contain objects, you can use the filter method along with map to remove duplicates based on a specific property. Here's an example:

const array1 = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];
const array2 = [{ id: 2, name: 'Bob' }, { id: 3, name: 'Charlie' }];
const mergedArray = [...array1, ...array2].filter((value, index, self) =>
  index === self.findIndex((t) => (t.id === value.id))
);
console.log(mergedArray);

Can you explain how the filter and findIndex methods work in this context?

Sure! The filter method creates a new array with all elements that pass the test implemented by the provided function. In this case, we check if the current index is the same as the index of the first occurrence of the object with the same id using findIndex. This way, we only keep the first occurrence of each object.

Is there a more efficient way to do this?

Yes, you can use a Map to keep track of unique objects, which can be more efficient than using filter and findIndex. Here's how:

const array1 = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];
const array2 = [{ id: 2, name: 'Bob' }, { id: 3, name: 'Charlie' }];
const map = new Map();
const mergedArray = [...array1, ...array2].filter(item => !map.has(item.id) && map.set(item.id, true));
console.log(mergedArray);