Remove duplicates from array with URL values in JavaScript

Suppose, we have an array of objects like this ?

const arr = [
    {
        url: 'www.example.com/hello',
        id: "22"
    },
    {
        url: 'www.example.com/hello',
        id: "22"
    },
    {
        url: 'www.example.com/hello-how-are-you',
        id: "23"
    },
    {
        url: 'www.example.com/i-like-cats',
        id: "24"
    },
    {
        url: 'www.example.com/i-like-pie',
        id: "25"
    }
];

We are required to write a JavaScript function that takes in one such array of objects. The function should remove duplicate objects from the array based on their id keys. We are required to do this without using any libraries like underscore.

Method 1: Using Object Map and Splice (In-Place)

This approach modifies the original array by tracking seen IDs and removing duplicates:

const arr = [
    {
        url: 'www.example.com/hello',
        id: "22"
    },
    {
        url: 'www.example.com/hello',
        id: "22"
    },
    {
        url: 'www.example.com/hello-how-are-you',
        id: "23"
    },
    {
        url: 'www.example.com/i-like-cats',
        id: "24"
    },
    {
        url: 'www.example.com/i-like-pie',
        id: "25"
    }
];

const removeDuplicate = (arr = []) => {
    const map = {};
    for(let i = 0; i 

[
    { url: 'www.example.com/hello', id: '22' },
    { url: 'www.example.com/hello-how-are-you', id: '23' },
    { url: 'www.example.com/i-like-cats', id: '24' },
    { url: 'www.example.com/i-like-pie', id: '25' }
]


Method 2: Using Filter and Set (Functional Approach)

This approach creates a new array without modifying the original:

const arr = [
    { url: 'www.example.com/hello', id: "22" },
    { url: 'www.example.com/hello', id: "22" },
    { url: 'www.example.com/hello-how-are-you', id: "23" },
    { url: 'www.example.com/i-like-cats', id: "24" },
    { url: 'www.example.com/i-like-pie', id: "25" }
];

const removeDuplicatesFilter = (arr) => {
    const seen = new Set();
    return arr.filter(obj => {
        if (seen.has(obj.id)) {
            return false;
        }
        seen.add(obj.id);
        return true;
    });
};

const uniqueArr = removeDuplicatesFilter(arr);
console.log(uniqueArr);


[
    { url: 'www.example.com/hello', id: '22' },
    { url: 'www.example.com/hello-how-are-you', id: '23' },
    { url: 'www.example.com/i-like-cats', id: '24' },
    { url: 'www.example.com/i-like-pie', id: '25' }
]


Comparison

Key Points

• The splice method has O(n) complexity for each removal, making the first approach slower for large arrays
• Set provides O(1) lookup time, making the filter approach more efficient
• Choose the in-place method when memory is limited and the functional approach when performance matters

Conclusion

Both methods effectively remove duplicates based on ID. The filter + Set approach is generally preferred for better performance and immutability. Use the splice method when you need to modify the original array in place.