Get Unique Values From Array in JavaScript

Get Unique Values From Array in JavaScript | Except for objects, primitive values in JavaScript are immutable values. Null, Undefined, Boolean, Number, Symbol, and String are examples of primitive values. You may find the solution to obtain an array of unique values in this lesson.

Use the new Set() constructor and pass the array that will return the array with unique values to discover a unique array and delete every duplicate value from the array in JavaScript.

There are other methods, such as:-

• Utilizing the new Set([1, 1, 2]) functionality of ES6;
• Utilize objects to avoid duplicates.
• Making use of a helper array.
• Implementing filter and using indexOf().
• Develop our special array prototype.

If you have a range of dates, you require more specialized techniques. We will see two of these in this article.

Examples: We must eliminate the array’s duplicate elements.
Array = [“Alex”, “Sid”, “Alex”, “Rick”, “Sam”, “Sid”];
Array with unique elements: [ ‘Alex’, ‘Sid’, ‘Rick’, ‘Sam’ ]

Unique Values From Array in JavaScript Using Set

Approach 1: Utilizing a set, obtain unique array values. The code is substantially shorter with ES6. The code sample below uses the Set object to store a group of distinct values before creating a new Array using the spread operator. See the example below.

The […new Set(arr)] technique is the precise way to obtain a singular JavaScript array. The spread operator is the triple dot (…).

const ages = [2, 5, 6, 6, 2, 1, 9, 8, 3];
const uniqueAges = [...new Set(ages)];

console.log(uniqueAges);

Output:-

[ 2, 5, 6, 1, 9, 8, 3 ]

The set’s constructor requires an iterable object, such as an Array, and the spread operator. Reverse the set into an Array.

const listArray = ["Alex", "Sid", "Alex", "Rick", "Sam", "Sid"];
const uniqueValues = [...new Set(listArray)];

console.log(uniqueValues);

Output:-

[ ‘Alex’, ‘Sid’, ‘Rick’, ‘Sam’ ]

Unique Values From Array in JavaScript Using filter()

Approach-2: A built-in JavaScript array method called filter() makes a new array out of all the components that pass the test run by the supplied function. The indexOf() built-in array method returns either -1 if the compiler cannot find an element or the first index in the array at which it can be located. 

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

const ages = [2, 5, 6, 6, 2, 1, 9, 8, 3];
const uniqueAges = ages.filter(unique);

console.log(uniqueAges);

Output:-

[ 2, 5, 6, 1, 9, 8, 3 ]

We used the two built-in javascript functions in the function mentioned above:- JavaScript array indexOf() and array filter(). A feature of ES6, called the arrow function, was also utilized. 

Each repeating value is removed using the filter function in the preceding code, and each array item is given a unique callback.

The array indexOf() method returns either -1 if the specified element cannot be found in the array or the first index at which it can be located. In this manner, we remove the values from an array and leave behind the remaining values, producing an array with unique values. The array will be looped over using the native method filter, which will remove all elements that fail the provided callback function unique.

The unique function determines whether the supplied value is the first instance. Otherwise, it is assumed to be a duplicate and won’t be duplicated. It also functions for arrays of mixed-value types. Also see:- Check Array Is Empty in JavaScript Example

If you enjoyed this post, share it with your friends. Do you want to share more information about the topic discussed above or do you find anything incorrect? Let us know in the comments. Thank you!

Search