Count the Unique Elements in an Array in JavaScript

avatar

Borislav Hadzhiev

3 min

banner

Photo from Unsplash

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.
index.js
// โœ… 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 object only stores unique values.

index.js
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.

The last step is to access the size property on the Set. The property returns the number of values the Set contains.

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

index.js
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() #

To count the unique elements in an array:

  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.
index.js
const arr = ['a', 'b', 'a', 'c', 'b']; let uniqueCount = 0; arr.forEach((element, index) => { if (arr.indexOf(element) === index) { uniqueCount += 1; } });

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 the current index in the loop is equal to the index of the first occurrence of an value, we haven't encountered this value in any of the previous iterations.

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.

index.js
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 to count the unique elements in an array.

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

To count the unique elements in an array:

  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.
index.js
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.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.

Copyright ยฉ 2023 Borislav Hadzhiev