Mastering Merge Two Arrays and Remove Duplicates in JavaScript

Today, we’ll dive into “Merge Two Arrays and Remove Duplicates in JavaScript,” an essential skill for any budding coder. If arrays have ever left you puzzled or cluttered your code with unnecessary data, this guide is just for you. Whether you’re handling data from different sources or cleaning up a data set, learning how to effectively merge and de-dupe arrays will boost your JavaScript prowess. Stick around to demystify these concepts with simple examples and real-life coding scenarios.

Why Duplicate Removal Matters

When working with arrays in JavaScript, it’s easy to end up with duplicate values—especially when combining data from multiple sources. But why is this a problem?

Problems Caused by Duplicates:

• Incorrect Data Aggregation: Imagine merging two user lists and sending multiple emails to the same person. That’s both unprofessional and annoying.
• Faulty Logic: Duplicates can mess up calculations, like averaging scores or counting unique items.
• Wasted Resources: Processing or storing duplicate data increases memory use and slows down performance.

Cleaner Code, Better Performance:

Removing duplicates ensures your array contains only the values you actually need. It makes your code:

• Easier to debug and maintain
• More predictable and efficient
• Optimized for faster execution, especially when working with large datasets

In short, eliminating duplicates isn’t just about neatness—it’s about writing smart, professional-level JavaScript.

Method 1 – Using JavaScript Set

One of the easiest and most efficient ways to remove duplicates from an array is by using the built-in Set object in JavaScript.

Code Example:

const array1 = [1, 2, 3];
const array2 = [2, 3, 4, 5];

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

How It Works:

• The spread operator (...) is used to combine array1 and array2.
• Set automatically stores only unique values.
• Wrapping the merged array in Set removes any duplicates.
• Another spread operator converts the Set back into a regular array.

Pros:

• Very concise and readable.
• Highly efficient for small to medium arrays.
• No need to write complex logic.

Cons:

• Doesn’t work well if you need deep equality (e.g., for objects or arrays within arrays).
• Slightly less flexible if you want custom duplicate-checking rules.

Method 2 – Using filter() and indexOf()

This method gives you more control over the duplicate removal process, using familiar array methods.

Code Example:

const array1 = [1, 2, 3];
const array2 = [2, 3, 4, 5];

const merged = array1.concat(array2);
const uniqueArray = merged.filter((item, index) => merged.indexOf(item) === index);

console.log(uniqueArray); // Output: [1, 2, 3, 4, 5]

Breakdown:

• concat() merges the two arrays.
• filter() checks each item:
  • indexOf(item) returns the first index where that item occurs.
  • If the current index is the same as indexOf(item), it’s the first time that item appears—so we keep it.

When to Use:

• Great when you need more control over filtering logic.
• Useful if you’re working with older JavaScript environments where Set is not supported.

Performance Consideration:

• indexOf() inside a filter() loop can lead to O(n²) time complexity for large arrays.
• Not ideal for performance-heavy use cases, but acceptable for small datasets.

Method 3 – Using concat() and Manual Loop

If you’re just starting with JavaScript or want to understand how things work under the hood, this manual method is perfect for learning.

Code Example:

const array1 = [1, 2, 3];
const array2 = [2, 3, 4, 5];

const merged = array1.concat(array2);
const uniqueArray = [];

for (let i = 0; i < merged.length; i++) {
  if (!uniqueArray.includes(merged[i])) {
    uniqueArray.push(merged[i]);
  }
}

console.log(uniqueArray); // Output: [1, 2, 3, 4, 5]

How It Works:

• concat() combines both arrays.
• A for loop goes through each item in the merged array.
• includes() checks if the item is already in the uniqueArray.
• If not, it’s added—ensuring only unique values make it through.

When to Use:

• Best for learning purposes to understand array logic.
• Useful when you want to add custom conditions inside the loop.

Drawbacks:

• Verbose and less readable compared to modern methods.
• Slower for large arrays due to repeated includes() checks.

Bonus – One-liner Using Spread Operator + Set

Need a quick solution? This one-liner is perfect for quick scripts and advanced developers who prefer concise code.

Code Example:

const uniqueArray = [...new Set([...array1, ...array2])];

Explanation:

• Combines both arrays using the spread operator: [...]
• Set removes duplicates instantly.
• Another spread turns the Set back into an array—all in one line.

Best For:

• Quick scripts or when writing clean and short code is a priority.
• Advanced users who are comfortable with ES6+ features.

Tip:

• Works best for primitive values (numbers, strings).
• For arrays or objects inside arrays, you’ll need a custom approach.

Combining Arrays Efficiently

javascript
function mergeAndRemoveDuplicates(arr1, arr2) {
    const mergedArray = [...arr1, ...arr2];
    return [...new Set(mergedArray)];
}

// Example usage:
const array1 = [1, 2, 3, 4];
const array2 = [3, 4, 5, 6];
const result = mergeAndRemoveDuplicates(array1, array2);
console.log(result); // Output: [1, 2, 3, 4, 5, 6]
  

Explanation of the Code
Let’s break down this handy piece of code for you: an excellent way to merge two arrays and remove any duplicates along the way!

1. The function `mergeAndRemoveDuplicates` is defined to accept two parameters, `arr1` and `arr2`.


2. Inside the function, we use the spread operator (`…`) to create a new array called `mergedArray`, combining the elements of `arr1` and `arr2` into one neat package.


3. To ensure all those pesky duplicates are kicked out, we wrap `mergedArray` in a `Set`. This clever JavaScript object automatically removes duplicates for you.


4. Finally, we convert this `Set` back into an array using the spread operator once more, and voilà, you’ve got a clean, merge all ready to go!


5. An example usage illustrates how it works, taking two arrays—`array1` and `array2`—and demonstrating the function’s output, which results in a merged array without duplicates.

Output

[1, 2, 3, 4, 5, 6]

Real-Life Uses of Merging Arrays and Removing Duplicates in JavaScript

1. Inventory Management at a Retail Company: A retail company uses JavaScript to handle their inventory system. They often receive separate lists of products available online and in physical stores. By merging these arrays and removing duplicates, they ensure their central inventory reflects accurate data with no repetitive entries.
   


2. User Data Consolidation for a Social Media Platform: A social media platform collects user data from multiple sources like mobile apps and web applications. By using JavaScript to merge arrays of user information and remove duplicates, they maintain an efficient and clean database for better user experiences and targeted advertising.
   


3. Email Marketing Lists for a Marketing Agency: Marketing agencies often deal with email lists from various campaigns. By merging these lists and eliminating duplicates, they avoid sending multiple emails to the same contact, enhancing efficiency. They achieve this using JavaScript to manage and store valuable client contact information effectively.
   


4. Client Database Synchronization for a SaaS Company: A SaaS company gathers client information from different services. They use JavaScript to merge arrays from disparate databases, ensuring their main client database is up-to-date with unique and accurate entries. This helps them in providing tailored services and keeping communication streamlined.

Array Merge Quiz

1. What is the first step when merging two arrays in JavaScript?
   
   a) Use the concat method
   
   b) Iterate with a for loop
   
   c) Remove duplicates
   
2. How can you efficiently remove duplicates from a merged array?
   
   a) By creating a function
   
   b) Using Set
   
   c) Manually iterating
   
   


3. Which method combines arrays into one?
   
   a) split()
   
   b) filter()
   
   c) concat()
   
   
4. What data structure automatically eliminates duplicates?
   
   a) Map
   
   b) Set
   
   c) List
   


5. After merging, which function transforms a Set back into an array?
   
   a) from()
   
   b) array()
   
   c) map()
   
   

Discover the power of our AI-driven js online compiler. It allows you to instantly write, run, and test your JavaScript code with ease. Whether you’re a beginner or a pro, the seamless integration of AI ensures a fast and efficient coding experience.

Conclusion

‘Merge Two Arrays and Remove Duplicates in JavaScript’ is a fantastic exercise for enhancing your coding skills, teaching you efficient data handling. Why not give it a try? You’ll feel accomplished by mastering these skills. For more programming tips, visit Newtum.

Edited and Compiled by

This article was compiled and edited by @rasikadeshpande, who has over 4 years of experience in writing. She’s passionate about helping beginners understand technical topics in a more interactive way.

About The Author