Remove Duplicates from Arrays and Strings in JavaScript

Removing duplicates is a common problem in programming that can arise in various contexts, such as cleaning up data or ensuring unique entries. You might be asked this question during an interview, as it’s quite simple, and may warm you up to more difficult questions.

In this article, we will explore two solutions in JavaScript: one for removing duplicates from arrays and the other for removing duplicates from strings (although they’re very similar).

It is quite simple indeed, although if you are new to programming, you might not be familiar with the ways in which you can accomplish this. In this article, we will show you how to do it.

Removing Duplicates from Arrays

There are usually multiple ways to achieve something when you are programming. That’s exactly why we will take a look at two seperate ways to remove duplicates from an array. The first, we will go with an iterative approach, using a for loop, and in the second, we’ll use the Set object.

Iterative Approach

function removeDuplicates(arr) {
    const uniqueArr = [];

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

removeDuplicates([1, 1, 2, 3, 4, 5, 4, 1]); // [ 1, 2, 3, 4, 5 ]
removeDuplicates(['a', 'b', 'a', 'c', 'b']); // [ 'a', 'b', 'c' ]

There are a few things to note in the code above. First, we are declaring an empty array, uniqueArr. As you might already know, this empty array will store the unique values the code comes accross as it loops through the original array, arr.

Our code runs through the arr array, checking if uniqueArr contains the value or not. If it doesn’t, then push that value into uniqueArr.

Using a Set

JavaScript’s Set object automatically ensures that all values are unique. We can leverage this feature to remove duplicates from an array. It is incredibly simple and almost feels like cheating, but here we are.

function removeDuplicates(arr) {
    return [...new Set(arr)];
}

removeDuplicates([1, 2, 2, 3, 4, 4, 5]); // [ 1, 2, 3, 4, 5 ]

Using the Filter method

Another way to remove duplicates is by using the filter method in combination with indexOf.

function removeDuplicates(arr) {
    return arr.filter((item, index) => arr.indexOf(item) === index);
}

removeDuplicates([1, 2, 2, 3, 4, 4, 5]); // [ 1, 2, 3, 4, 5 ]

First, the filter method creates a shallow copy of a portion of an array, filtering it down to just the elements from the array that pass the test. indexOf returns the first index at which a given element can be found in the array, or -1 if it is not present.

As an example, we can create an array of random fruit:

const fruit = ['apple', 'banana', 'cherry'].

And if we wanted to check the indexOf an element, we can do so by using the method: fruit.indexOf('banana');, which will return 1, the index of banana.

Removing Duplicates from Strings

There’s not really a big difference in these solutions, just minor things you should be aware of. We almost didn’t include strings in this article, but it’s probably worth noting the minor differences. So let’s explore them.

Iterative Approach

function removeDuplicates(str) {
    let result = '';
    for (let i = 0; i < str.length; i++) {
        if (!result.includes(str[i])) {
            result += str[i];
        }
    }
    return result;
}

removeDuplicates('javascript'); // javscript

Using a Set

function removeDuplicates(str) {
    return [...new Set(str)].join('');
}

removeDuplicates('javascript'); // javscript

Using the Filter Method

function removeDuplicates(str) {
    return str.split('').filter((char, index) => str.indexOf(char) === index).join('');
}

removeDuplicates('javascript'); //javscript

So, as you can see, there really isn’t much difference in the code blocks above. We just introduced the split() and join() method in order to work with the strings. We’re also not pushing() into the empty string variable in the iterative solution, as that is an array method.

Conclusion

As we said in the introduction, you may be asked this during an interview, to measure your abilities with JavaScript. We explored three different ways to accomplish the same goal, and it is worth being familiar with all of them. For instance, if you were to use the filter method, the interviewer may ask you to come up with another solution that doesn’t use the filter method.

We hope you enjoyed this article. Let us know what you think in the comments below!