Javascript: Get unique values in an array

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:-

[ '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 !!!