2 Ways to Resolve Duplication in JavaScript Arrays and Objects

Do you know how to deal with duplication?

Dev by RayRay
Mar 4 · 5 min read

In this article, I want to show you how simple it is to get rid of duplicated data. There are a few places duplicated data can appear for whatever reason.

There’s nothing more annoying than duplicated data in your JavaScript. So let’s get into a practical walk-through of how you can work against it.

I highly suggest not simply copying and pasting my code. Of course, you can — but please follow my explanation to understand how it works.

1. Array With Duplicated Strings or Numbers

const dupStrings = ['Angular', 'React', 'VueJS', 'Svelte', 'React']
const dupNumbers = [1,2,3,4,5,6,2,4,6,7,8,9,0]

The first array has some duplicated strings, and the other array has duplicated numbers in it.

To get rid of the duplicated data, we’re going to use Set. Set only accepts unique values.

"Set objects are collections of values. You can iterate through the elements of a set in insertion order. A value in the Set may only occur once; it is unique in the Set's collection.” — MDN Web Docs

console.log(new Set(dupStrings))// Set(5) {"Angular", "React", "VueJS", "Svelte", ""}console.log(new Set(dupNumbers))// Set(10) {1, 2, 3, 4, 5, 6, 7, 8, 9, 0}

When we put the arrays in a Set and output it to the console, you’ll see the duplicated values are removed from the array.

In the CodeSandbox below, you can see how it works.

Check out the CodeSandbox

But now, we turned it into a Set, and we need the cleaned array back so we can do our JavaScript magic further.

The easiest way to do this is by using the ... spread syntax inside the array brackets [...]. Let’s put that into a function so we can reuse it everywhere in our application.

Now we need to create a function from it so we can reuse it on other places.

In our function, we define a parameter, array, which we expect to be an array. We check this in the if statement.

  • !array: We simply check if the array is null or undefined
  • !Array.isArray(array): We use the array helper method to check if the value of array is, indeed, an array. If you put the ! before it, we check if the output is false .
  • array.length === 0: We use this to check if the array has a length of 0 — this indicates an empty array

If one of the conditions are met, we let the function return the array that has been given in the function.

If the conditions aren’t met, it’ll put the array in the new Set(), and we turn it into an array by using the ... spread syntax.

Finally, we need to call the function.

unDuplicateArraySingleValues(array)

Check in the example below if everything works correctly.

Check the CodeSandbox

2. Array With Duplicated Objects

Let’s define an example array of objects with duplicate information

const dupObjects = [
{ id: 1, name: "a", value: "c" },
{ id: 2, name: "b", value: "d" },
{ id: 2, name: "c", value: "e" },
{ id: 3, name: "d", value: "c" }
];

You can see there are a few property values that are duplicated.

I think it sounds obvious that you don’t want any duplicated information in your array of objects.

So we need a function that checks our array and, based on a given property, checks if there’s an other object that has a property with the same information.

This function starts the same as in the previous example. So it’d be a good idea to make a new function for that. In this example, we keep it the same.

In our function, we define a parameter, array, which we expect to be an array. We check this in the if statement.

  • !array: We simply check if the array is null or undefined
  • !Array.isArray(array): We use the array helper method to check if the value of array is, indeed, an array. If you put the ! before it, we check if the output is false.
  • array.length === 0: We use this to check if the array has a length of 0 — this indicates an empty array.
  • !property: With this, we check if the property value is false — which means we check for null, undefined, or 0 . Because if any of these are the case, we can’t check for duplicate information in our objects.

Then we create a variable, objectArrayKeys, in which we store an array of the values of the properties we’ve given in the propertyName parameter.

In uniqueKeys, we remove duplicate values. But we make use of our previous function. This function returns a new array with only unique values.

At last, we return an array with only unique objects based on the uniqueKeys array.

Finally, we need to call the function.

unDuplicateArrayObjects(dupObjects, "id")

In the example below, check changing the property names in the function so we can verify everything works correctly.

Check out the CodeSandbox

Conclusion

I hope you learned how to get rid of duplicated data in your array with single values or an array with objects.

I personally have googled this question thousands of times. That’s why I’ve written this tutorial for you.

Image for post
Image for post

Hi, I’m Ray a Dutch 🇳🇱 JavaScript Developer and love to share my knowledge which I gained from being a Developer since 2009. I write stories about JavaScript, TypeScript, Angular, and anything related to life as a developer.

You can follow me on Twitter and Instagram or subscribe to my newsletter which I send when I post a new story.

Happy Coding 🚀

Advice for programmers.

Thanks to Yenson Lau and Zack Shapiro

Dev by RayRay

Written by

I write stories about Frontend Dev, JavaScript, Typescript, Angular, NodeJS, Serverless Functions, JAM Stack, FaunaDB, Netlify, Apple, iOS— https://byrayray.dev

Better Programming

Advice for programmers.

Dev by RayRay

Written by

I write stories about Frontend Dev, JavaScript, Typescript, Angular, NodeJS, Serverless Functions, JAM Stack, FaunaDB, Netlify, Apple, iOS— https://byrayray.dev

Better Programming

Advice for programmers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store