Skip to main content

How to Count Unique Elements in an Array in JavaScript

When working with arrays, you often need to analyze their contents. Two common questions are: "How many distinct, unique elements are in this array?" and "What is the count of each unique element?" These are different problems that require different solutions.

This guide will teach you the modern and standard methods for answering both of these questions. You will learn how to use a Set to get a simple count of unique elements and how to use reduce or a Map to create a full frequency count of each element.

Question 1: How Many Unique Elements Are There?​

If you only need to know the number of unique elements, the Set object is the perfect tool. A Set is a collection that only stores unique values, automatically discarding any duplicates.

For example, we need to find out how many different, unique values are in an array.

// Problem: How many unique fruits are in this list?
const fruits = ['apple', 'banana', 'apple', 'orange', 'banana', 'apple'];

The recommended solution uses new Set(). The logic is a simple, two-step process:

  1. Create a Set from the array, which will automatically remove all duplicates.
  2. Get the size property of the resulting Set.
const fruits = ['apple', 'banana', 'apple', 'orange', 'banana', 'apple'];

const uniqueFruitCount = new Set(fruits).size;

console.log(uniqueFruitCount); // Output: 3

This is the most concise, readable, and performant way to get a count of unique elements in an array.

Question 2: What is the Count of Each Unique Element?​

If you need to know how many times each element appears (a frequency count), you need to build an object or a Map that stores each unique element as a key and its count as the value.

For example, we need to produce an object that shows how many times each fruit appears.

// Problem: How to get { apple: 3, banana: 2, orange: 1 }?
const fruits = ['apple', 'banana', 'apple', 'orange', 'banana', 'apple'];

The reduce() method is the most concise functional approach for this. It iterates over the array and builds up a single "accumulator" object.

const fruits = ['apple', 'banana', 'apple', 'orange', 'banana', 'apple'];

const fruitCount = fruits.reduce((accumulator, fruit) => {
  accumulator[fruit] = (accumulator[fruit] || 0) + 1;
  return accumulator;
}, {});

console.log(fruitCount);        
// Output: { apple: 3, banana: 2, orange: 1 }

// You can now access the count of a specific fruit
console.log(fruitCount.apple);  
// Output: 3

An Alternative Solution (More Flexible): Using a Map​

A Map is often a more robust choice than a plain object, especially if your array elements are not strings. The logic is very similar but uses a for...of loop.

const fruits = ['apple', 'banana', 'apple', 'orange', 'banana', 'apple'];
const fruitCount = new Map();

for (const fruit of fruits) {
  const currentCount = fruitCount.get(fruit) || 0;
  fruitCount.set(fruit, currentCount + 1);
}

console.log(fruitCount);
// Output: Map(3) { 'apple' => 3, 'banana' => 2, 'orange' => 1 }

console.log(fruitCount.get('banana'));
// Output: 2

Conclusion​

Counting unique elements in an array involves two distinct problems, and modern JavaScript provides excellent tools for each.

  • To get a simple count of how many unique elements exist, the most efficient and readable method is to use a Set and its .size property: const count = new Set(myArray).size;
  • To get a frequency map (the count of each unique element), the reduce() method provides the most concise functional solution, while a Map offers a more flexible and robust alternative.

By identifying which question you need to answer, you can choose the appropriate modern tool and solve the problem cleanly and efficiently.

Table of Contents