Remove duplicate items from an array with a custom function in JavaScript

In JavaScript, arrays often contain duplicate values that need to be removed. This article demonstrates how to create a custom function to eliminate duplicates and return an array with unique elements only.

Understanding the Problem

We need to create a function that accepts an array as input and returns a new array containing only unique items, excluding any duplicates. For example, given the array [0, 0, 2, 2, 3, 3], the function should return [0, 2, 3].

Algorithm Overview

The algorithm iterates through the input array and adds items to a result array only if they haven't been encountered before. We'll use JavaScript's Map object to efficiently track previously seen elements.

Steps:

1. Create a function that accepts an array parameter
2. Initialize an empty result array and a Map to track seen elements
3. Loop through each element in the input array
4. If the element hasn't been seen before, add it to the Map and push it to the result array
5. Return the result array with unique elements

Implementation with Map

// Function to remove duplicate items from an array
function removeDuplicateItems(array) {
    var result = [];
    var seen = new Map();
    
    for (let i = 0; i < array.length; i++) {
        if (!seen.has(array[i])) {
            seen.set(array[i], true);
            result.push(array[i]);
        }
    }
    return result;
}

const array = [11, 21, 21, 31, 41, 41, 51];
console.log("Original array:", array);
console.log("Unique elements:", removeDuplicateItems(array));

Original array: [ 11, 21, 21, 31, 41, 41, 51 ]
Unique elements: [ 11, 21, 31, 41, 51 ]

Alternative Approach with Set

JavaScript's Set object automatically handles uniqueness, providing a more concise solution:

function removeDuplicatesWithSet(array) {
    return [...new Set(array)];
}

const numbers = [5, 10, 5, 20, 10, 30];
console.log("Using Set method:", removeDuplicatesWithSet(numbers));

Using Set method: [ 5, 10, 20, 30 ]

Comparison of Methods

Performance Analysis

Both approaches have O(n) time complexity, where n is the length of the input array. The Map-based solution provides explicit control over the deduplication process, while the Set approach offers cleaner, more readable code for simple deduplication tasks.

Conclusion

Custom functions using Map provide efficient duplicate removal with O(n) time complexity. For simple cases, the Set approach offers even cleaner code while maintaining the same performance characteristics.