Get all unique values in a JavaScript array

In this tutorial, I will show how to get all unique values in a JavaScript array. In JavaScript, an array is a handy way to store a list of items. Sometimes, we might want to find and collect all the unique values from an array.

We can get all unique values in a JavaScript array by using various methods and techniques that are mentioned below.

We can retrieve all unique values in a JavaScript array in the following ways:

• Using Set method.
• Using the filter() method.
• Using a for-loop.
• Using a for…of loop.
• Using reduce() method.
• Using indexOf() Method.
• Using forEach() Method.

Now, I am going to explore the above-mentioned methods one by one and show how we can get all unique values in a JavaScript array.

Using Set method

The Set() method is the simplest and most efficient technique to get unique values from an array. Sets eliminate duplicates automatically, so we can create a Set from the array and then convert it back to an array if needed.

Example

const Array = [1, 2, 3, 2, 1, 4, 2, 4, 5];
const uniqueArray = [...new Set(Array)];
console.log(uniqueArray);

Output:

[ 1, 2, 3, 4, 5 ]

Using the filter() method

We can use the filter() method to get unique values in an array. This method iterates through the array and filters out the unique values.

Example

const Array = [1, 2, 3, 2, 1, 4, 2, 4, 5];

let uniqueArray = [];
 
function getUniqueValues(arr) {
    let uniqueArray = arr.filter(function (v, i, self) {
 
        return i == self.indexOf(v);
    });
 
    return uniqueArray;
}
 
console.log(getUniqueValues(Array));

Output:

[ 1, 2, 3, 4, 5 ]

Using a for-loop

We can use a for loop to manually iterate through each element in the array, check for uniqueness, and build a new array containing only the unique values. This approach will filter out the duplicate elements and then add those unique elements to the output array.

Example

const Array = [1, 2, 3, 2, 1, 4, 2, 4, 5];

//Create an empty array to store unique values
const uniqueArray = [];

//To iterate through the original array
for (let i = 0; i < Array.length; i++) {
  // To check if the current value is already in the uniqueArray
  if (!uniqueArray.includes(Array[i])) {
    //To add it to the uniqueArray
    uniqueArray.push(Array[i]);
  }
}

console.log(uniqueArray);

Output:

[ 1, 2, 3, 4, 5 ]

Using a for…of loop

We can also use a for…of loop to iterate through the array and build a new array containing only the unique values.

Example

const Array = [1, 2, 3, 2, 1, 4, 2, 4, 5];

const uniqueArray = [];

// To iterate through each value in the original array
for (const value of Array) {
  // To check if the current value is not already in uniqueArray
  if (!uniqueArray.includes(value)) {
    // To add the current value to the uniqueArray
    uniqueArray.push(value);
  }
}

console.log(uniqueArray);

Output:

[ 1, 2, 3, 4, 5 ]

Using reduce() method

We can use reduce() method to get all unique values from a JavaScript array. Then we will check if the current value is not already in the ‘accumulator’ using the include() method. After that, we will use push() method to add those unique values to the accumulator array.

Example

const Array = [1, 2, 3, 2, 1, 4, 2, 4, 5];

function getUniqueValues(arr) {
    let uniqueArray = arr.reduce(function (acc, curr) {
        if (!acc.includes(curr))
            acc.push(curr);
        return acc;
    }, []);
    return uniqueArray;
}
console.log(getUniqueValues(Array));

Output:

[ 1, 2, 3, 4, 5 ]

Using indexOf() Method

We can use the indexOf() method to find the first index of occurrence of an array element. We can loop through the array items, and push them into the new array if they don’t present in the resulting array.

Example

const Array = [1, 2, 3, 2, 1, 4, 2, 4, 5];

function getUniqueValues(arr) {
    let uniqueArray = [];
    for (i = 0; i < arr.length; i++) {
        if (uniqueArray.indexOf(arr[i]) === -1) {
            uniqueArray.push(arr[i]);
        }
    }
    return uniqueArray;
}
console.log(getUniqueValues(Array));

Output:

[ 1, 2, 3, 4, 5 ]

Using forEach() Method

We can use the forEach() method to iterate over the elements in the array, and we can push them into the new array if it doesn’t exist in the array.

Example

const Array = [1, 2, 3, 2, 1, 4, 2, 4, 5];

function getUniqueValues(arr) {
    let uniqueArray = [];
    arr.forEach(element => {
        if (!uniqueArray.includes(element)) {
            uniqueArray.push(element);
        }
    });
    return uniqueArray;
}
console.log(getUniqueValues(Array));

Output:

[ 1, 2, 3, 4, 5 ]