5 Approaches to Remove Duplicate Objects From an array in JavaScript

[ad_1]

To remove duplicate objects from array in javascript es6, es5; In this tutorial, we will show you 5 approaches to remove duplicate objects from an array in javascript es6, es5 using new set(), for loop, foreach(), filter() and reduce().

This tutorial has the main purpose to describe the best ways to remove duplicate objects from JavaScript Array based on specific property/key. Key means id, name, code, etc.

Remove duplicate objects from an array using js array methods like, new Set(), forEach() , for loop, reduce(), filter() with findIndex() methods.

Or you should also read this javascript array posts:

How to Remove duplicate objects from the JavaScript array?

You can easily achieve this by using these 5 approaches.

Ezoic

  • Approach 1 – Using new Set() Remove duplicate objects from array in JavaScript
  • Approach 2 – remove duplicate elements from array javascript using for loop
  • Approach 3 – Remove duplicate objects from array javascript using foreach
  • Approach 4 – JavaScript remove duplicate objects from an array using filter
  • Approach 5 – javascript remove duplicate objects from array using reduce

Consider that you have an id and name of JavaScript array objects. And it has contains duplicate objects. You can see below:

    var arr = [{
      id: 1,
      name: "php"
    },
    {
      id: 2,
      name: "mysql"
    },
    {
      id: 3,
      name: "laravel"
    },
    {
      id: 4,
      name: "codeigniter"
    },
    {
      id: 5,
      name: "wordpress"
    },
    {
      id: 6,
      name: "sql"
    },
    {
      id: 7,
      name: "jquery"
    },
    {
      id: 8,
      name: "javascript"
    },
    {
      id: 9,
      name: "python"
    },
    {
      id: 10,
      name: "django"
    },
    {
      id: 11,
      name: "joomla"
    },
    {
      id: 12,
      name: "laravel"
    },
    {
      id: 13,
      name: "php"
    },
    {
      id: 14,
      name: "codeigniter"
    },
    {
      id: 15,
      name: "angular"
    },
    {
      id: 16,
      name: "react"
    },
    {
      id: 17,
      name: "ruby"
    },
    {
      id: 18,
      name: "mysql"
    }
  ];

Let’s start removing duplicate objects from a javascript array using several javascript methods:

Ezoic

Approach 1 – Using new Set() Remove duplicate objects from array in JavaScript

You can use the new set() method to remove the duplicate objects from an array in javascript.

We have objects of array in javascript. And it has contains duplicate objects. You can see below:

    var arr = [{
      id: 1,
      name: "php"
    },
    {
      id: 2,
      name: "mysql"
    },
    {
      id: 3,
      name: "laravel"
    },
    {
      id: 4,
      name: "codeigniter"
    },
    {
      id: 5,
      name: "wordpress"
    },
    {
      id: 6,
      name: "sql"
    },
    {
      id: 7,
      name: "jquery"
    },
    {
      id: 8,
      name: "javascript"
    },
    {
      id: 9,
      name: "python"
    },
    {
      id: 10,
      name: "django"
    },
    {
      id: 11,
      name: "joomla"
    },
    {
      id: 12,
      name: "laravel"
    },
    {
      id: 13,
      name: "php"
    },
    {
      id: 14,
      name: "codeigniter"
    },
    {
      id: 15,
      name: "angular"
    },
    {
      id: 16,
      name: "react"
    },
    {
      id: 17,
      name: "ruby"
    },
    {
      id: 18,
      name: "mysql"
    }
  ];

Here we will create a custom javascript function using the new set() method for removing the objects from an array in javascript:

Ezoic

Ex:-

    var arr = [{
      id: 1,
      name: "php"
    },
    {
      id: 2,
      name: "mysql"
    },
    {
      id: 3,
      name: "laravel"
    },
    {
      id: 4,
      name: "codeigniter"
    },
    {
      id: 5,
      name: "wordpress"
    },
    {
      id: 6,
      name: "sql"
    },
    {
      id: 7,
      name: "jquery"
    },
    {
      id: 8,
      name: "javascript"
    },
    {
      id: 9,
      name: "python"
    },
    {
      id: 10,
      name: "django"
    },
    {
      id: 11,
      name: "joomla"
    },
    {
      id: 12,
      name: "laravel"
    },
    {
      id: 13,
      name: "php"
    },
    {
      id: 14,
      name: "codeigniter"
    },
    {
      id: 15,
      name: "angular"
    },
    {
      id: 16,
      name: "react"
    },
    {
      id: 17,
      name: "ruby"
    },
    {
      id: 18,
      name: "mysql"
    }
  ];
function removeDuplicateObjectFromArray(array, key) {
  var check = new Set();
  return array.filter(obj => !check.has(obj[key]) && check.add(obj[key]));
}
console.log(removeDuplicateObjectFromArray(arr, 'name'))

javascript remove duplicate objects from array

Approach 2 – remove duplicate elements from array javascript using for loop

In the second approach, we will create a new javascript function using for loop to remove duplicate objects from the javascript array.

Ezoic

You can pass the duplicate objects array with the key in this function and it will return the unique array.

Ex:-

    var arr = [{
      id: 1,
      name: "php"
    },
    {
      id: 2,
      name: "mysql"
    },
    {
      id: 3,
      name: "laravel"
    },
    {
      id: 4,
      name: "codeigniter"
    },
    {
      id: 5,
      name: "wordpress"
    },
    {
      id: 6,
      name: "sql"
    },
    {
      id: 7,
      name: "jquery"
    },
    {
      id: 8,
      name: "javascript"
    },
    {
      id: 9,
      name: "python"
    },
    {
      id: 10,
      name: "django"
    },
    {
      id: 11,
      name: "joomla"
    },
    {
      id: 12,
      name: "laravel"
    },
    {
      id: 13,
      name: "php"
    },
    {
      id: 14,
      name: "codeigniter"
    },
    {
      id: 15,
      name: "angular"
    },
    {
      id: 16,
      name: "react"
    },
    {
      id: 17,
      name: "ruby"
    },
    {
      id: 18,
      name: "mysql"
    }
  ];
function removeDuplicateObjectFromArray(array, key) {
    let check = {};
    let res = [];
    for(let i=0; i<array.length; i++) {
        if(!check[array[i][key]]){
            check[array[i][key]] = true;
            res.push(array[i]);
        }
    }
    return res;
}
console.log(removeDuplicateObjectFromArray(arr, 'name'))
javascript remove duplicate objects from array

Approach 3 – Remove duplicate objects from array javascript using foreach

You can use the javascript forEach() method to remove the duplicate objects from an array in javascript.

Ezoic

Here we will create a javascript function using forEach, which is used to remove duplicate objects from an array in javascript. You can see the method below:

Ex:-

    var arr = [{
      id: 1,
      name: "php"
    },
    {
      id: 2,
      name: "mysql"
    },
    {
      id: 3,
      name: "laravel"
    },
    {
      id: 4,
      name: "codeigniter"
    },
    {
      id: 5,
      name: "wordpress"
    },
    {
      id: 6,
      name: "sql"
    },
    {
      id: 7,
      name: "jquery"
    },
    {
      id: 8,
      name: "javascript"
    },
    {
      id: 9,
      name: "python"
    },
    {
      id: 10,
      name: "django"
    },
    {
      id: 11,
      name: "joomla"
    },
    {
      id: 12,
      name: "laravel"
    },
    {
      id: 13,
      name: "php"
    },
    {
      id: 14,
      name: "codeigniter"
    },
    {
      id: 15,
      name: "angular"
    },
    {
      id: 16,
      name: "react"
    },
    {
      id: 17,
      name: "ruby"
    },
    {
      id: 18,
      name: "mysql"
    }
  ];
function removeDuplicateObjectFromArray(array, key) {
    var check = {};
    var res = [];
    array.forEach(element => {
        if(!check[element[key]]) {
            check[element[key]] = true;
            res.push(element);
        }
    });
    return res;
}
console.log(removeDuplicateObjectFromArray(arr, 'name'))
javascript remove duplicate objects from array

Approach 4 – JavaScript remove duplicate objects from an array using filter

You can use the JavaScript filter method with findIndex() to remove the duplicate objects from an array in javascript.

Ezoic

You can see the function and example below. In this javascript pass the array and key and it will return the new array with unique objects.

Ex:-

    var arr = [{
      id: 1,
      name: "php"
    },
    {
      id: 2,
      name: "mysql"
    },
    {
      id: 3,
      name: "laravel"
    },
    {
      id: 4,
      name: "codeigniter"
    },
    {
      id: 5,
      name: "wordpress"
    },
    {
      id: 6,
      name: "sql"
    },
    {
      id: 7,
      name: "jquery"
    },
    {
      id: 8,
      name: "javascript"
    },
    {
      id: 9,
      name: "python"
    },
    {
      id: 10,
      name: "django"
    },
    {
      id: 11,
      name: "joomla"
    },
    {
      id: 12,
      name: "laravel"
    },
    {
      id: 13,
      name: "php"
    },
    {
      id: 14,
      name: "codeigniter"
    },
    {
      id: 15,
      name: "angular"
    },
    {
      id: 16,
      name: "react"
    },
    {
      id: 17,
      name: "ruby"
    },
    {
      id: 18,
      name: "mysql"
    }
  ];
function removeDuplicateObjectFromArray(array, key) {
    return array.filter((obj, index, self) =>
        index === self.findIndex((el) => (
            el[key] === obj[key]
        ))
    )
}
console.log(removeDuplicateObjectFromArray(arr, 'name'))

javascript remove duplicate objects from array

Approach 5 – javascript remove duplicate objects from array using reduce

You can use the javascript reduce() method for removing duplicate objects from an array using reduce.

Ezoic

Ex:-

    var arr = [{
      id: 1,
      name: "php"
    },
    {
      id: 2,
      name: "mysql"
    },
    {
      id: 3,
      name: "laravel"
    },
    {
      id: 4,
      name: "codeigniter"
    },
    {
      id: 5,
      name: "wordpress"
    },
    {
      id: 6,
      name: "sql"
    },
    {
      id: 7,
      name: "jquery"
    },
    {
      id: 8,
      name: "javascript"
    },
    {
      id: 9,
      name: "python"
    },
    {
      id: 10,
      name: "django"
    },
    {
      id: 11,
      name: "joomla"
    },
    {
      id: 12,
      name: "laravel"
    },
    {
      id: 13,
      name: "php"
    },
    {
      id: 14,
      name: "codeigniter"
    },
    {
      id: 15,
      name: "angular"
    },
    {
      id: 16,
      name: "react"
    },
    {
      id: 17,
      name: "ruby"
    },
    {
      id: 18,
      name: "mysql"
    }
  ];
    var uniqueArray = arr.reduce((filter, current) => {
      var dk = filter.find(item => item.name === current.name);
      if (!dk) {
        return filter.concat([current]);
      } else {
        return filter;
      }
    }, []);
   console.log(uniqueArray)
javascript remove duplicate objects from array

Recommended JavaScript Tutorials

EzoicEzoic

[ad_2]

Jaspreet Singh Ghuman

Jaspreet Singh Ghuman

Jassweb.com/

Passionate Professional Blogger, Freelancer, WordPress Enthusiast, Digital Marketer, Web Developer, Server Operator, Networking Expert. Empowering online presence with diverse skills.

jassweb logo

Jassweb always keeps its services up-to-date with the latest trends in the market, providing its customers all over the world with high-end and easily extensible internet, intranet, and extranet products.

Contact
Jassweb, Rai Chak, Punjab, India. 143518