While working in javascript arrays, we often encounter a situation where we need to pull the unique values from an array. This article will see different ways to extract unique values into a separate array using various example illustrations.
Table of Contents:
- Get unique values from an array using filters
- Get unique values from an array using SET
- Get unique values from an array using objects
- Get unique values from an array using iteration
Get unique values from an array using filters
Javascript’s filter() method returns a new array consisting of all the elements that pass the test implemented by the provided function.
Example:-
Get the unique values from array [“Hello”, “This”, “Is”,”Language”,”This”, “Is” ]
Code:-
function getUniqueArray(_array) { // in the newArray get only the elements which pass the test implemented by the filter function. // the test is to check if the element's index is same as the index passed in the argument. let newArray = _array.filter((element, index, array) => array.indexOf(element) === index); return newArray } let myArray = ["Hello", "This", "Is","Language","This", "Is" ]; console.log(getUniqueArray(myArray));
Output:-
Frequently Asked:
- Javascript : Check if an object is array
- Get a Subset of Javascript’s Object Properties (4 ways)
- Javascript: Get unique values in an array
- Javascript: Get max element of an array
[ 'Hello', 'This', 'Is', 'Language' ]
Explanation:-
- Here, the filter() method is applied to all elements of the array.
- In the method filter(element, index, array), the index of each element(first argument) is compared with the index(second argument) of the array(third argument).
- A new array is created for the elements of equal matches.
Get unique values from an array using SET
Javascript’s Set is to store unique values.
Example:-
Get the unique values from array [“Hello”, “This”, “Is”,”Language”,”This”, “Is” ]
Code:-
function getUniqueArray(_array) { //store the _array elements in the Set and then create a newArray from this Set let newArray =[... new Set(_array)]; return newArray } let myArray = ["Hello", "This", "Is","Language","This", "Is" ]; console.log(getUniqueArray(myArray));
Output:-
[ 'Hello', 'This', 'Is', 'Language' ]
Explanation:-
- In the above code, the original array myArray elements are stored in a Set.
- A new array newArrray is then created, taking all the elements of the Set created. Since the Set contains unique values, the newly created array has unique values only.
Get unique values from an array using Object
Example:-
Get the unique values from array [“Hello”, “This”, “Is”,”Language”,”This”, “Is” ]
Code:-
function getUniqueArray(_array) { var obj = {}; var uniqueArray = []; for (var i = 0; i < _array.length; i++) { if (obj[_array[i]] == undefined) // add the array elements to object , where the element is key and the same element is value // keys of the object can only have unique values { obj[_array[i]] = i; // add the keys of the object to a new array as elements of the array uniqueArray.push(_array[i]); } } return uniqueArray; } let myArray = ["Hello", "This", "Is","Language","This", "Is" ]; console.log(getUniqueArray(myArray));
Output:-
[ 'Hello', 'This', 'Is', 'Language' ]
Explanation:-
- In the above code, the original array myArray elements are stored in an Object where each array element is passed as a key, and the same element is passed as the value of the object key-value pairs.
- A new array uniqueArray is then created from all the keys of the object created.Â
- Since the keys of an object are unique, the newly created array has unique values only.
Get unique values from an array using iteration
Example:-
Get the unique values from array [“Hello”, “This”, “Is”,”Language”,”This”, “Is” ]
Code:-
function containsElement(_array,_value) { for (var i = 0; i < _array.length; i++) { // check if new array already contains the element if (_array[i] === _value) return true; } return false; }; function getUniqueArray(_array) { var newArray = []; for (var i = 0; i < _array.length; i++) { if (!containsElement(newArray,_array[i])) { // if the element is not found in the newArray push it. newArray.push(_array[i]); } } return newArray; } let myArray = ["Hello", "This", "Is","Language","This", "Is" ]; console.log(getUniqueArray(myArray));
Output:-
[ 'Hello', 'This', 'Is', 'Language' ]
Explanation:-
- In the above code, two functions are created containsElement() and getUniqueArray().
- In function getUniqueArray() , a new array newArray[] is created, all the elements of the array are traversed in a for loop. The method containsElement(newArray,_array[i]) is called at every traversal where newArray and element of the array are passed as arguments. The containsElement() checks if the passed element is already present in the array. If yes, then do not push the element in the newArray. Else push the element to the newArray.
Read More:
- Javascript: Insert an item to array at specific index
- Javascript: Check if an array is empty
- Javascript: Convert array to string (4 ways)
I hope this article helped you to get unique values from a javascript array. Good Luck !!!