How to remove Duplicate objects from Array in JavaScript?

How to remove Duplicate objects from Array in JavaScript?

You can use the following javascript methods like, new Set(), forEach() method, for loop, reduct(), filter() with findIndex() for remove duplicate objects from javascript array.In this tutorial, we will explain to you with many ways to remove duplicate objects from an array in javascript.

In this tutorial, we will explain to you with many ways to remove duplicate objects from an array in javascript.

This tutorial purpose is to explain and share the best ways to remove duplicate objects from JavaScript Array based on specific property/key. Key means id, name, code, etc.

How to remove duplicate objects from array in JavaScript?

You can use the following javascript methods like, new Set(), forEach() method, for loop, reduct(), filter() with findIndex() for remove duplicate objects from javascript array.

In the below, we will demonstrate to you javascript methods with examples for removing duplicate objects from the array.

Consider that we 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 to removing duplicate objects from a javascript array using several javascript methods:

First Method – Remove duplicate objects from array in JavaScript Using new Set()

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

We have objects of the 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:

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'))

Second Method – JavaScript remove duplicate objects array using for loop

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

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'))

Third Method – 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.

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'))

Fourth Method – 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.

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'))

Five Method – javascript remove duplicate objects from array using reduce

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

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)


You may like more javascript array methods with examples, Find below:

Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

What’s new in HTML6

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Functional Programming for JavaScript Developers

Functional Programming for JavaScript Developers

Functional Programming for JavaScript Developers. Learn Functional Programming and how it enables developers to move from imperative to declarative programming. Solidify your knowledge of functional JavaScript programming, including objects, arrays, and prototypes. Learn higher-order functions, closures, scope, master key functional methods like map, reduce and filter and promises and ES6+ asynchronous JavaScript. Learning how to build and manage asynchronous functional programs is perhaps the most important part of becoming an effective JavaScript programmer.

Functional Programming for JavaScript Developers

Learn functional programming and how it enables developers to move from imperative to declarative programming

Improve your code with functional patterns like pure functions, compose & map/reduce/filter...plus advanced concepts like fusion, transducing and monads!

Solidify your knowledge of functional JavaScript programming, including objects, arrays, and prototypes

Learn higher-order functions, closures, scope, master key functional methods like map, reduce and filter and promises and ES6+ asynchronous JavaScript. Go beyond the fundamentals of asynchronous JavaScript and use features and techniques that will help you reduce code and create smarter applications.

Learning how to build and manage asynchronous functional programs is perhaps the most important part of becoming an effective JavaScript programmer.

What you'll learn

  • On the surface, this course is designed for beginning and intermediate JS developers who want to learn the fundamentals in order to understand and use functional programming in both ES5 and ES6. However, this course is also perfect for people preparing to enter into competitive JavaScript bootcamps