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

This is image title

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

This is image title

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

This is image title

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

This is image title

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)

This is image title You may like more javascript array methods with examples, Find below:

javascript programming development

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Learning JavaScript: Development Environments for JavaScript Programming

One of the nice things about learning JavaScript these days is that there is a plethora of choices for writing and running JavaScript code. In this article, I’m going to describe a few of these environments and show you the environment I’ll be using in this series of articles.

How long does it take to develop/build an app?

This article covers A-Z about the mobile and web app development process and answers your question on how long does it take to develop/build an app.

9 JavaScript Tricks making programming life much easier

Making my programming life much easier and they look pretty cool in the editor. 9 JavaScript Tricks I Live By. Destructuring, Dynamic Property Names, map(), filter(), Template Literals, Short Circuit Conditionals, The Spread Operator Spreads values from one (or more) array(s) into another to form a single array, some(), Returns true if at least one of the elements in your array satisfies the condition you’re passing in. False otherwise, includes().

Introduction to Sets in JavaScript

All You Need to Know about Sets in JS. Sets are a new object type introduced in ES6 (ES2015). Although they are lesser known, they can be very useful and powerful. This tutorial will help you learn all you need to know about them. You will learn about what sets in JavaScript are, how they work and how to use them.

Objects, [[Prototype]] and Prototypal Inheritance in JavaScript

Prototypal inheritance is one of the topics in programming every developer should know. This tutorial will help you learn what prototypal inheritance is, how it works and how to use it. You will learn about [[Prototype]], __proto__, how to change prototypes and much much more.