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.

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.

Create a function

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

How does the function work?

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)

Test the function

Check in the example below if everything works correctly.

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.

Create a function

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.

How does the function work?

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

Test the function

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

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.

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 🚀

Read More From Me

Build Fast, JSON-Powered Forms on Angular With NGX Formly
_Forms can be a nightmare — let’s make them better_medium.com

You Don’t Need a JavaScript Framework
_Sometimes React, Angular, or Vue.js might be too much_medium.com

2 Ways to Resolve Duplication in JavaScript Arrays and Objects
_Do you know how to deal with duplication?_medium.com

7 Steps to Dockerize Your Angular 9 App With Nginx
_Set up your Angular 9 app in a Docker environment and deploy it in no time_medium.com