Article Categories

Selected Reading

How to get all unique values in a JavaScript array?

Javascript Web Development Object Oriented Programming

There are multiple ways to get unique values from a JavaScript array. The most common approaches use Set, filter(), or reduce() methods.

Using Set (Recommended)

The Set object only stores unique values, making it the simplest approach:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Unique Values with Set</title>
</head>
<body>
    <script>
        let arr = [2, 3, 4, 2, 3, 4, "A", "A", "B", "B"];
        console.log("Original array:", arr);
        
        // Method 1: Using Set
        let uniqueArr = [...new Set(arr)];
        console.log("Unique values using Set:", uniqueArr);
    </script>
</body>
</html>

Original array: [2, 3, 4, 2, 3, 4, "A", "A", "B", "B"]
Unique values using Set: [2, 3, 4, "A", "B"]

Using filter() with indexOf()

This method keeps only the first occurrence of each element:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Unique Values with Filter</title>
</head>
<body>
    <script>
        let arr = [1, 2, 2, 3, 4, 4, 5];
        console.log("Original array:", arr);
        
        // Method 2: Using filter with indexOf
        let uniqueArr = arr.filter((item, index) => arr.indexOf(item) === index);
        console.log("Unique values using filter:", uniqueArr);
    </script>
</body>
</html>

Original array: [1, 2, 2, 3, 4, 4, 5]
Unique values using filter: [1, 2, 3, 4, 5]

Using reduce()

The reduce() method builds a new array by checking if each element already exists:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Unique Values with Reduce</title>
</head>
<body>
    <script>
        let arr = ["apple", "banana", "apple", "orange", "banana"];
        console.log("Original array:", arr);
        
        // Method 3: Using reduce
        let uniqueArr = arr.reduce((unique, item) => {
            return unique.includes(item) ? unique : [...unique, item];
        }, []);
        console.log("Unique values using reduce:", uniqueArr);
    </script>
</body>
</html>

Original array: ["apple", "banana", "apple", "orange", "banana"]
Unique values using reduce: ["apple", "banana", "orange"]

Comparison of Methods

Method	Performance	Readability	Browser Support
`Set`	Fastest	High	ES6+
`filter() + indexOf()`	Medium	Medium	ES5+
`reduce()`	Slowest	Low	ES5+

Interactive Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Get Unique Values</title>
    <style>
        body {
            font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
            padding: 20px;
        }
        .sample {
            font-size: 18px;
            font-weight: 500;
            color: rebeccapurple;
            margin: 10px 0;
        }
        .result {
            font-size: 18px;
            font-weight: 500;
            color: red;
            margin: 10px 0;
        }
        button {
            padding: 10px 20px;
            margin: 10px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>Get All Unique Values in Array</h1>
    <div class="sample"></div>
    <div class="result"></div>
    
    <button onclick="useSet()">Use Set Method</button>
    <button onclick="useFilter()">Use Filter Method</button>
    <button onclick="useReduce()">Use Reduce Method</button>
    
    <script>
        let resultEle = document.querySelector(".result");
        let sampleEle = document.querySelector(".sample");
        let arr = [2, 3, 4, 2, 3, 4, "A", "A", "B", "B", 1, 1];
        
        sampleEle.innerHTML = "Original array: [" + arr.join(", ") + "]";
        
        function useSet() {
            let unique = [...new Set(arr)];
            resultEle.innerHTML = "Set method: [" + unique.join(", ") + "]";
        }
        
        function useFilter() {
            let unique = arr.filter((item, index) => arr.indexOf(item) === index);
            resultEle.innerHTML = "Filter method: [" + unique.join(", ") + "]";
        }
        
        function useReduce() {
            let unique = arr.reduce((acc, item) => {
                return acc.includes(item) ? acc : [...acc, item];
            }, []);
            resultEle.innerHTML = "Reduce method: [" + unique.join(", ") + "]";
        }
    </script>
</body>
</html>

Conclusion

The Set method is the most efficient and readable approach for getting unique values. Use filter() with indexOf() for older browser compatibility, and reduce() when you need more control over the uniqueness logic.

AmitDiwan

Updated on: 2026-03-15T23:18:59+05:30

505 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next