Create Unique Array of Objects in JavaScript [SOLVED]

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)