Do you love working with arrays in ? They are awesome for storing and managing multiple values in one variable. But sometimes, you may have a problem with duplicate objects in your array. This can mess up your code’s performance, memory, and logic. JavaScript Don’t worry; I have some solutions for you! Use a set() to get rid of duplicate objects in your array Use a map to filter out duplicate objects in your array Use Lodash to simplify the process of removing duplicate objects in your array In this blog, you will learn how to do all these things! Method 1: Using to remove duplicate set() The sets are awesome! is one of the . They let you store unique values of any kind. You can even put objects in them. How cool is that? To make a set from an array, use the new Set() non-primitive data types in JavaScript Set() Here’s an example of using Set() to remove duplicate numbers: const numbers = [1, 2, 3, 4, 5, 1, 2, 3];
const uniqueNumbers = new Set(numbers);
console.log(uniqueNumbers); 
// Output: { 1, 2, 3, 4, 5 } Look at this! The set has no duplicates from the . How cool is that? You can turn the set into an array again with or the array Array.from() spread operator (…). Here’s how you do it: const numbers = [1, 2, 3, 4, 5, 1, 2, 3];
const uniqueNumbers = new Set(numbers);
const arrayFromSet = Array.from(uniqueNumbers);
console.log(arrayFromSet); 
// Output: [ 1, 2, 3, 4, 5 ]

const arrayFromSpread = [...uniqueNumbers];
console.log(arrayFromSpread); 
// Output: [ 1, 2, 3, 4, 5 ] Here’s a cool trick to get rid of duplicates in a JavaScript array. Make a set from the array and turn it back into an array. Like this: You might think you can use to remove duplicates from an array of objects. Let's try: Set() const colors = [
  { id: 1, name: "Red", hexCode: '#FF0000' },
  { id: 2, name: "Green", hexCode: '#00FF00' },
  { id: 3, name: "Blue", hexCode: '#0000FF' },
  { id: 1, name: "White", hexCode: '#000000' },
  { id: 1, name: "Red", hexCode: '#FF0000' },
  { id: 3, name: "Blue", hexCode: '#0000FF' },
];
const uniqueColors = [...new Set(colors)];
console.log(uniqueColors);
/*
  { id: 1, name: "Red", hexCode: '#FF0000' },
  { id: 2, name: "Green", hexCode: '#00FF00' },
  { id: 3, name: "Blue", hexCode: '#0000FF' },
  { id: 1, name: "White", hexCode: '#000000' },
  { id: 1, name: "Red", hexCode: '#FF0000' },
  { id: 3, name: "Blue", hexCode: '#0000FF' },
*/ But that won’t work. Why? Because doesn’t care about the properties of the objects. The only care about their references. That means two objects that look identical but have different references are not identical for . For example: Set() Set() set() const color1 = { id: 1, name: "Red", hexCode: '#FF0000' };
const color2 = { id: 1, name: "Red", hexCode: '#FF0000' };
console.log(color1 === color2);
// Output: false In the above code, and look the same, but they are not. They live in different places in the computer’s memory. So, thinks they are different, too, and keeps them both. color1 color2 Set() But don’t worry; there are other ways to remove objects that look the same. You can use an or . You will see this in detail in the next sections. map Lodash The advantages of this method are: It is simple and easy to use It is fast and efficient Work only with value types The disadvantages of this method are: It does not work with objects It does not allow you to specify a custom criterion for uniqueness Method 2: Remove duplicate objects from an array using a Map() A is like a table with two columns: one for and one for . You can use any value as a key or a value, even an object. To make a map from an array, you need a function that tells how to fill the table. The function takes an element and its position in the array and returns a pair of keys and values. For example: map() keys values const numbers = [1, 2, 3, 4, 5, 1, 2, 3];
const mapFromNumbers = new Map(numbers.map((n, index) => [n, index]));
console.log(mapFromNumbers);
//  Output: Map { 1 => 5, 2 => 6, 3 => 7, 4 => 3, 5 => 4 } The map has the array’s values as keys and their last positions as values. You can make the map an array again with or Array.from() spread operator (…) For example: const numbers = [1, 2, 3, 4, 5, 1, 2, 3];
const mapFromNumbers = new Map(numbers.map((num, index) => [num, index]));
const arrayFromMap = Array.from(mapFromNumbers);
console.log(arrayFromMap); 
// Output: [ [ 1, 5 ], [ 2, 6 ], [ 3, 7 ], [ 4, 3 ], [ 5, 4 ] ]

const arrayFromSpread = [...mapFromNumbers];
console.log(arrayFromSpread); 
// Output: [ [ 1, 5 ], [ 2, 6 ], [ 3, 7 ], [ 4, 3 ], [ 5, 4 ] ] Here’s a cool trick to get rid of duplicates in a JavaScript array. You make a from the array and then turn it back into an array. Like this: map const colors = [
  { id: 1, name: "Red", hexCode: '#FF0000' },
  { id: 2, name: "Green", hexCode: '#00FF00' },
  { id: 3, name: "Blue", hexCode: '#0000FF' },
  { id: 1, name: "White", hexCode: '#000000' },
  { id: 1, name: "Red", hexCode: '#FF0000' },
  { id: 3, name: "Blue", hexCode: '#0000FF' },
];

const mapFromColors = new Map(
  colors.map(c => [c.id, c])
);

const uniqueColors = [...mapFromColors.values()];
console.log(uniqueColors);
/* Output:
[ {"id":1,"name":"Red","hexCode":"#FF0000"},
  {"id":2,"name":"Green","hexCode":"#00FF00"},
  {"id":3,"name":"Blue","hexCode":"#0000FF"}
] */ The advantages of this method are: It is flexible and customizable. It allows you to specify a custom criterion for uniqueness, such as a property or a function. The disadvantages of this method are: It is more complex and verbose. It may not work with complex objects that have circular references or non-primitive keys. Method 3: Remove duplicate objects from an array using the Lodash library is awesome! It’s a JavaScript library that helps you do many things with data. You can use to manipulate arrays, objects, , numbers, and more. It’s easy to get in your project. You can use npm or a CDN to install and import it. Lodash Lodash JavaScript strings Lodash Here’s how to add the reference to the Loadsh library: // Using npm
npm install --save lodash
const _ = require("lodash");

// Using CDN
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script> Do you want to remove duplicate objects from an array? You can use Lodash’s method. It’s easy and powerful. You just need to give it two things: the and the or the criterion. _.uniqBy() array property The property is a key of the object, like a string or a symbol. The criterion is a function that returns a value to compare. Here’s an example of how to remove duplicate objects from an array using Loadsh: const colors = [
  { id: 1, name: "Red", hexCode: '#FF0000' },
  { id: 2, name: "Green", hexCode: '#00FF00' },
  { id: 3, name: "Blue", hexCode: '#0000FF' },
  { id: 1, name: "White", hexCode: '#000000' },
  { id: 1, name: "Red", hexCode: '#FF0000' },
  { id: 3, name: "Blue", hexCode: '#0000FF' },
];

const uniqueColorsById = _.uniqBy(colors, "id");
console.log(uniqueColorsById);

/* Output:
[ {"id":1,"name":"Red","hexCode":"#FF0000"},
{"id":2,"name":"Green","hexCode":"#00FF00"},
{"id":3,"name":"Blue","hexCode":"#0000FF"}]
*/ The advantages of this method are: It is convenient and readable It provides many options and features for removing duplicates The disadvantages of this method are: It requires an external dependency It may not be compatible with older browsers or environments Best practices for working with arrays and objects in JavaScript Check the length and type using the JavaScript typeof keyword before doing anything with it. Use to declare your variables unless you need to change them. const Use clear and meaningful names for your variables and functions. End your statements with semicolons. Compare values with (`= `) strict equality operators ` and `! Test and verify your code with or other debugging tools. console.log() Conclusion You just learned a cool skill! You can now remove duplicate objects from an array in JavaScript. How awesome is that? There are different ways to do this. You learned three of them: using a set, a map, or Lodash. Each duplicate removal method has its pros and cons. If you want to remove duplicate value types from an array, you can Set() method. If you want to remove duplicate objects from an array, use Map() or Loadsh method. I hope you learned something new from this blog. I would love to hear your thoughts or questions in the comments. Also published . here

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Buy My Book

Too Long; Didn't Read

Make resilience your competitive advantage

Mastering JavaScript Arrays: Eliminating Duplicate Objects

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

The Noonification: Reduce Javascript: Master the Basics (1/11/2023)

The Noonification: Satoshi Might Be a Bitcoin ETF Skeptic (1/13/2024)

The Noonification: Small Puddle of Freedom (11/25/2022)

The Noonification: How to Use AI for Your B2B Marketing (11/11/2022)

105 Stories To Learn About Functional Programming

The Noonification: Reduce Javascript: Master the Basics (1/11/2023)

The Noonification: Satoshi Might Be a Bitcoin ETF Skeptic (1/13/2024)

The Noonification: Small Puddle of Freedom (11/25/2022)

The Noonification: How to Use AI for Your B2B Marketing (11/11/2022)

105 Stories To Learn About Functional Programming

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps