Extract Unique Values from an Array in JavaScript

Extracting unique values from an array means finding and getting only the different elements from a given array, eliminating duplicates. An array is a data structure that stores the same type of data in a linear form. Sometimes it contains duplicate items also.

To extract unique values from an array in JavaScript, you can do it by using the set object, the filter() method, the reduce() method, and the includes() method. In this article, we will filter out unique values and return an array containing unique elements.

Extract Unique Values from an Array

Extracting unique values from an array can be done in the following ways:

• Using Set Object
• Using filter() Method
• Using reduce() Method
• Using for Loop with includes() Method

Using Set Object

The Set object in JavaScript is the best method to extract unique values from an array. A Set is a built-in JavaScript object that stores unique values. The set object will help us to remove duplicate values from an array.

Example

In the following example, the set object is used to extract unique values from an array named numbers and print those unique values of the array.

function getUniqueValues(arr) {
   return [...new Set(arr)];
}
const numbers = [6,6,7,7,8,8];
console.log(getUniqueValues(numbers));

Output

[ 6, 7, 8 ]

Using filter() Method

The filter() method is another efficient method to extract unique values from an array. The filter() method is used to return a new array based on the specific condition passed by the elements of the given array. The filter() method will help you to check if an element appears for the first time in the array.

Example

In the following example, the filter() method is used. The getUniqueValues function takes an array and creates a new array with only the unique values. It checks if the current value's first occurrence index matches its current index, ensuring that duplicates are excluded.

function getUniqueValues(arr) {
    return arr.filter((value, index, self) => self.indexOf(value) === index);
}
const numbers = [1, 2, 2, 3, 4, 4, 5,6,6,7];
console.log(getUniqueValues(numbers));

Output

[
1, 2, 3, 4,
5, 6, 7
]

Using reduce() Method

Using the reduce() method is the simplest way to extract unique values from an array. This method executes a reducer function on each element of the array (from left to right) and returns a 'single value' as a result. The reduce() method iterates through the array and creates a new array by adding an element only if it isn't already included.

Example

The following is a simple example of using reduce() method to extract unique values from an array. In the following example, the getUniqueValues function uses the reduce method to create a new array of unique values from the input array. It checks if each item is already in the unique array; if not, it adds the item.

function getUniqueValues(arr) {
    return arr.reduce((unique, item) => {
        if (!unique.includes(item)) {
            unique.push(item);
        }
        return unique;
    }, []);
}

const numbers = [1, 2, 2, 3, 4, 4, 5];
console.log(getUniqueValues(numbers));

Output

[ 1, 2, 3, 4, 5 ]

Using includes() Method

The include() method is another simple and efficient method for extracting unique values from an array. The includes() method is used with the arrays to check if a particular element is present in the array. It returns a Boolean value as a result.

Example

The following code starts with an empty array called newArray and iterates through each item in the original array arr. It checks if each item is already in newArray, if it isn't, the item gets added. In the end, newArray holds only the unique values, and this is displayed in the console.

let arr = [1,1,2,2,3,3,4,4,5,5];

// Initialize an empty array to store unique values
let newArray = [];

// Iterate over the array to get unique values
for (let i = 0; i < arr.length; i++) {
    
    // Check if the element exists in the new array
    if (!newArray.includes(arr[i])) {
    
        // If not, then push the element to the new array
        newArray.push(arr[i]);
    }
}

// Display updated array
console.log("Updated Array: ", newArray);

Output

Updated Array:  [ 1, 2, 3, 4, 5 ]

Conclusion

In this article, we have four methods to extract unique characters from an array. All four methods are simple to use and efficient. You can use any of the above methods.