Count the Unique Elements in an Array in JavaScript

# Count the Unique Elements in an Array in JavaScript

To count the unique elements in an array:

1. Pass the array to the Set() constructor.
2. Access the size property on the Set object.
3. The size property will return the number of unique elements in the array.

Copied!
// ✅ count the unique elements in an array
const arr = ['a', 'b', 'a', 'c', 'b'];

const uniqueCount = new Set(arr).size;
console.log(uniqueCount); // 👉️ 3

// -------------------------------------

// ✅ count the unique elements in an array as an object

const uniqueCount2 = {};

for (const element of arr) {
  if (uniqueCount2[element]) {
    uniqueCount2[element] += 1;
  } else {
    uniqueCount2[element] = 1;
  }
}

console.log(uniqueCount2); // 👉️ { a: 2, b: 2, c: 1 }

console.log(uniqueCount2.a); // 👉️ 2
console.log(uniqueCount2.b); // 👉️ 2
console.log(uniqueCount2.c); // 👉️ 1

The Set() constructor object only stores unique values.

Copied!
const arr = ['a', 'b', 'a', 'c', 'b'];

const set1 = new Set(arr);
console.log(set1); // 👉️ Set(3) { 'a', 'b', 'c' }

Even if the supplied array contains duplicates, they won't get added to the Set.

Trying to add duplicate values to a Set object has no effect as the values get ignored.

Copied!
const set1 = new Set();

console.log(set1); // 👉️ Set(0) {}

set1.add('a');
set1.add('a');
set1.add('a');

set1.add('b');

console.log(set1); // 👉️ Set(2) { 'a', 'b' }

console.log(set1.size); // 👉️ 2

We tried to add the value a to the Set multiple times, but only one element with a value of a is contained in the Set.

An alternative approach is to use the Array.forEach() method.

# Count the Unique Elements in an Array using Array.forEach()

This is a three-step process:

1. Use the Array.forEach() method to iterate over the array.
2. Check if calling the indexOf() method with the element is equal to the current index.
3. If the condition is met, increment the unique element count by 1.

Copied!
const arr = ['a', 'b', 'a', 'c', 'b'];

let uniqueCount = 0;

arr.forEach((element, index) => {
  if (arr.indexOf(element) === index) {
    uniqueCount += 1;
  }
});

console.log(uniqueCount); // 👉️ 3

The function we passed to the Array.forEach() method gets called with each element in the array.

We used the Array.indexOf() method to check if this is the first occurrence of the element in the array.

The indexOf() method returns the index of the first occurrence of a value in an array.

If this is the first time we encounter the value, we increment the uniqueCount variable by 1.

If you have to do this often, define a reusable function.

Copied!
function getUniqueCount(array) {
  let uniqueElements = 0;

  array.forEach((element, index) => {
    if (arr.indexOf(element) === index) {
      uniqueElements += 1;
    }
  });

  return uniqueElements;
}

const arr = ['a', 'b', 'a', 'c', 'b'];

const uniqueCount = getUniqueCount(arr);
console.log(uniqueCount); // 👉️ 3

The getUniqueCount() function takes an array as a parameter and returns the number of unique values there are in the array.

You can also use a basic for loop.

# Count the Unique Elements in an Array using a for loop

This is a three-step process.

1. Use a for loop to iterate over the array.
2. Check if calling the indexOf() method with the element is equal to the current index.
3. If the condition is met, increment the unique element count by 1.

Copied!
const arr = ['a', 'b', 'a', 'c', 'b'];

let uniqueCount = 0;

for (let index = 0; index < arr.length; index++) {
  if (arr.indexOf(arr[index]) === index) {
    uniqueCount += 1;
  }
}

console.log(uniqueCount); // 👉️ 3

We used a basic for loop to iterate over the array instead of the Array.forEach() method.

On each iteration, we check if the current array value is contained multiple times in the array.

If the first occurrence of the index of the current array value is not equal to the current index, then the value is contained multiple times in the array.

Which approach you pick is a matter of personal preference. I'd use the Set() constructor as I find it quite direct and easy to read.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

• Count the Duplicates in an Array in JavaScript
• Count Elements in an Array that match a Condition using JS
• Count the Elements in Div or all elements with Class in JS
• Count Occurrences of each Element in Array in JavaScript
• Count the Number of Regex Matches using JavaScript