Create Unique Array of Objects in JavaScript [SOLVED]


JavaScript

Introduction

Arrays can contain elements of different data types and the same element as many types as possible, but we might have a situation where we need an unique array. An unique array is an array where no elements exist more than once.

In this article, we will discuss the ways to create unique array in JavaScript.

 

Different methods to get unique array in JavaScript

Method-1: Use the Set object

Within the JavaScript environment, there is a native and built-in object called Set, which allows us to store unique values of any data type.

The collections of values within a Set object may only occur once, and the interesting thing about Set is that if you try to add a new value that already exists within the Set, it will not add it. Also, the value equality is based on the SameValueZero algorithm.

To set up a Set object, we need a Set constructor.

const unique = new Set([1, 2, 3, 4, 5, 5, 5]);

console.log(unique);

Output

Set(5) { 1, 2, 3, 4, 5 }

As you can see, the repeating 5s are not present within the Set object. But if we need the array as an array and not a Set object, we can make use of the spread operator with the Set constructor.

const unique = [...new Set([1, 2, 3, 4, 5, 5, 5])];

console.log(unique);

Output

[ 1, 2, 3, 4, 5 ]

Now, we have only one 5 and have an array.

 

Method-2: Use the filter method

JavaScript has a prototype method called filter which allows us to filter down an array based on a test provided via a callback function and create a shallow copy. Therefore, we can create a test that we can check within the callback function that we can use to remove repeating elements within the said array.

The callback function that is passed to the filter method takes three arguments - value, index, and self - which will be used in the test. The value represents the element at each iterative instance, and the index represents the index of the element at that point, and the self represents the array we are applying the filter method on.

So to remove repeating elements, we can make use of the indexOf method to check if the given value is the first occurring, and if not, it must be a duplicate and will not be copied.

const arr = ["a", "e", 12, 45, 78, 78, "a"];

const unique = arr.filter((value, index, self) => {
    return self.indexOf(value) == index;
});

console.log(unique);

Output

[ 'a', 'e', 12, 45, 78 ]

 

Summary

To create JavaScript unique array, we can make use of the Set constructor and the higher-order filter method. For the Set constructor, we will make use of the spread operator to create a new array that contains only unique elements. However, for the filter method, we need to create a test using the indexOf method.

 

References

Set() constructor - JavaScript | MDN (mozilla.org)
Array.prototype.filter() - JavaScript | MDN (mozilla.org)

 

Olorunfemi Akinlua

Olorunfemi Akinlua

He is boasting over five years of experience in JavaScript, specializing in technical content writing and UX design. With a keen focus on programming languages, he crafts compelling content and designs user-friendly interfaces to enhance digital experiences across various domains. You can connect with him on his LinkedIn profile.

Can't find what you're searching for? Let us assist you.

Enter your query below, and we'll provide instant results tailored to your needs.

If my articles on GoLinuxCloud has helped you, kindly consider buying me a coffee as a token of appreciation.

Buy GoLinuxCloud a Coffee

For any other feedbacks or questions you can send mail to admin@golinuxcloud.com

Thank You for your support!!

Leave a Comment