DEV Community

loading...
Cover image for Remove duplicate value from array

Remove duplicate value from array

suprabhasupi profile image Suprabha ・2 min read

There are multiple ways to filter out duplicates from an array and return only the unique values.

1️⃣ Using Set πŸ”₯

What is Set?

Set is a new data object introduced in ES6. A Set is a collection of unique values.

Here,

  • The array is converted toΒ SetΒ and all the duplicate elements are automatically removed.
  • The spread syntaxΒ ...Β is used to include all the elements of theΒ SetΒ to a new array.
const arr = ["🌼", "🌴", "🌹", "🌡", "πŸ„", "🌹", "🌴"];

const filteredArr = [...new Set(arr)];
console.log(filteredArr); //["🌼", "🌴", "🌹", "🌡", "πŸ„"]
Enter fullscreen mode Exit fullscreen mode

Convert Set to an Array using Array.from

You can also use Array.from to convert a Set into an array:

const arr = ["🌼", "🌴", "🌹", "🌡", "πŸ„", "🌹", "🌴"];

const filteredArr = Array.from(new Set(arr));
console.log(filteredArr); //["🌼", "🌴", "🌹", "🌡", "πŸ„"]
Enter fullscreen mode Exit fullscreen mode

2️⃣ Using filter πŸ•Έ

If the element passes and returns true, it will be included in the filtered array and any element that fails or return false, it will be NOT be in the filtered array.

const arr = ["🌼", "🌴", "🌹", "🌡", "πŸ„", "🌹", "🌴"];

const filteredArr = arr.filter((item, index) => {
    return arr.indexOf(item) === index;
})
console.log(filteredArr); //["🌼", "🌴", "🌹", "🌡", "πŸ„"]
Enter fullscreen mode Exit fullscreen mode

3️⃣ Using forEach Method πŸš€

Using forEach, you can iterate over the elements in the array and push into the new array if it doesn’t exist in the array.

const arr = ["🌼", "🌴", "🌹", "🌡", "πŸ„", "🌹", "🌴"];

const filteredArr = (arr) => {
    let uniqueVal = [];
    arr.forEach(el => {
        if(!uniqueVal.includes(el)) {
            uniqueVal.push(el);
        }
    })
    return uniqueVal;
}
console.log(filteredArr(arr)); //["🌼", "🌴", "🌹", "🌡", "πŸ„"]
Enter fullscreen mode Exit fullscreen mode

4️⃣ Using Reduce Method 😎

The reduce method is used to reduce the elements of the array and combine them into a final array based on some reducer function that you pass.

const arr = ["🌼", "🌴", "🌹", "🌡", "πŸ„", "🌹", "🌴"];

const filteredArr = arr.reduce((acc, curr) => {
    return acc.includes(curr) ? acc : [...acc, curr];
}, [])
console.log(filteredArr(arr)); //["🌼", "🌴", "🌹", "🌡", "πŸ„"]
Enter fullscreen mode Exit fullscreen mode

5️⃣ Unique Method to the Array Prototype πŸ“”

In Javascript the array prototype constructor allows you to add new properties and methods to the Array object.

const arr = ["🌼", "🌴", "🌹", "🌡", "πŸ„", "🌹", "🌴"];

Array.prototype.filteredArr = function (){
    let arr = [];
    for(let i = 0; i < this.length; i++) {
        let current = this[i];
        if(arr.indexOf(current) < 0 ) arr.push(current);
    }
    return arr;
}
console.log(arr.filteredArr()); //["🌼", "🌴", "🌹", "🌡", "πŸ„"]
Enter fullscreen mode Exit fullscreen mode

Reference 🧐

🌟 Twitter πŸ‘©πŸ»β€πŸ’» suprabha.me 🌟 Instagram

Discussion (7)

Collapse
thebarefootdev profile image
thebarefootdev

Great coverage. All approaches covered. If using object arrays your predicates to map and filter can choose the unique key from the destructured current object.

Collapse
goutamdas profile image
Goutam Das

Nice comment

Collapse
goutamdas profile image
Goutam Das

nice reply

Thread Thread
goutamdas profile image
Collapse
sincovschi profile image
Eugene

If your array contains only truthy values and no objects, then you are good with this approach :)

Collapse
valeriavg profile image
Valeria • Edited

Good stuff!

If you're not planning on doing re-assignment, you can keep arrays (and objects overall const):

const arr=[]
arr.push('value')
Enter fullscreen mode Exit fullscreen mode
Collapse
oreoyona profile image
oreoyona

Thank you. I was looking for this.

Forem Open with the Forem app