Count Occurrences of each Element in Array in JavaScript

# Table of Contents

1. Count Occurrences of each Element in an Array in JavaScript
2. Count Occurrences of each Element in an Array using reduce()
3. Count the Occurrences of each element in an array using forEach()
4. Check how many times an Element appears in an Array using filter()
5. Count the Occurrences of each element in an array using a for loop

# Count Occurrences of each Element in an Array in JavaScript

To count the occurrences of each element in an array:

1. Declare a variable that stores an empty object.
2. Use the for...of loop to iterate over the array.
3. On each iteration, increment the count for the current element if it exists or initialize the count to 1.

Copied!
// ✅ Count occurrences of each element in an array
const arr = ['a', 'b', 'a', 'a', 'c', 'c'];

const count = {};

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

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

console.log(count.a); // 👉️ 3
console.log(count.b); // 👉️ 1

The same approach can be used if you only need to count the occurrences of a specific element in the array.

Copied!
// ✅ Count occurrences of a specific element in an array
const arr = ['a', 'b', 'a', 'a'];

let count = 0;

for (const element of arr) {
  if (element === 'a') {
    count += 1;
  }
}

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

We declared a new variable and set it to an empty object.

The for...of loop allows us to iterate over the array.

If the element is present in the object, we increment the corresponding value, otherwise, we initialize the key to 1.

The keys in the object are the array elements and the values are the occurrences of each element in the array.

This approach also works if your array consists of numbers.

Copied!
const arr = [1, 1, 1, 2, 3, 3];

const count = {};

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

console.log(count); // 👉️ {1: 3, 2: 1, 3: 2}

This seems a bit confusing as object keys can only be of type string or symbol in JavaScript.

However, you can still access the object's keys either way.

Copied!
console.log(count[1]); // 👉️ 3
console.log(count['1']); // 👉️ 3

You can also use the Array.reduce() method.

# Count Occurrences of each Element in an Array using reduce()

This is a three-step process:

1. Use the Array.reduce() method to iterate over the array.
2. Initialize the accumulator variable to an object.
3. Increment the value for the current array element by 1 or initialize it to 1.

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

const count = arr.reduce((accumulator, value) => {
  accumulator[value] = ++accumulator[value] || 1;

  return accumulator;
}, {});

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

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

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

On each iteration, we check if the current array element exists as a key in the object.

If the key exists, we increment its value by 1, otherwise, we initialize the key to 1.

You can also use a Map object instead of a regular object.

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

const count = arr.reduce((accumulator, value) => {
  accumulator.set(value, (accumulator.get(value) || 0) + 1);

  return accumulator;
}, new Map());

// 👇️ Map(3) { 'b' => 3, 'a' => 2, 'c' => 1 }
console.log(count);

console.log(count.get('a')); // 👉️ 2
console.log(count.get('b')); // 👉️ 3
console.log(count.get('c')); // 👉️ 1

// 👇️ [ 'b', 'a', 'c' ]
console.log([...count.keys()]);

// 👇️ [ 3, 2, 1 ]
console.log([...count.values()]);

// 👇️ [ [ 'b', 3 ], [ 'a', 2 ], [ 'c', 1 ] ]
console.log([...count.entries()]);

We passed a Map object as the second argument to the reduce() function instead of a regular object.

On each iteration, we set the current element as a key in the Map and increment its value or initialize it to 1.

The Map.keys() method returns the array elements and the Map.values() method returns the number of occurrences of each element in the array.

The Map.entries() method returns a two-dimensional array where the first element is the array value and the second element is the number of times the value is contained in the array.

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

Copied!
function occurrencesOfEach(array) {
  const occurrences = array.reduce((accumulator, value) => {
    accumulator[value] = ++accumulator[value] || 1;

    return accumulator;
  }, {});

  return occurrences;
}

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

const result = occurrencesOfEach(arr);

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

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

The function takes an array as a parameter and returns an object that stores the number of occurrences of each element in the array.

You can also use the Array.forEach() method.

# Count the Occurrences of each element in an array using forEach()

This is a four-step process:

1. Declare a variable that stores an empty object.
2. Use the forEach() method to iterate over the array.
3. Check if each element is contained as a key in the object.
4. If the condition is met, increment the value, otherwise, initialize the count to 1.

Copied!
// ✅ count occurrences of each element in an array
const arr = ['b', 'a', 'c', 'b', 'b', 'a'];

const count = {};

arr.forEach(element => {
  if (count[element]) {
    count[element] += 1;
  } else {
    count[element] = 1;
  }
});

// 👇️ { b: 3, a: 2, c: 1 }
console.log(count);

The same approach can be used if you need to count the occurrences of a specific element in an array.

Copied!
// ✅ count occurrences of a specific element in an array
const arr = ['a', 'b', 'a', 'a'];

let count = 0;

arr.forEach(element => {
  if (element === 'a') {
    count += 1;
  }
});

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

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

On each iteration, we check if the current element is contained as a key in the object.

If the condition is met, we increment the key's value, otherwise, we initialize the value to 1.

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

Copied!
function occurrencesOfEach(array) {
  const count = {};

  array.forEach(element => {
    if (count[element]) {
      count[element] += 1;
    } else {
      count[element] = 1;
    }
  });

  return count;
}

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

const result = occurrencesOfEach(arr);

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

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

The function takes an array as a parameter and returns an object containing the count of occurrences of each of the array elements.

# Check how many times an Element appears in an Array using filter()

This is a three-step process:

1. Use the Array.filter() method to iterate over the array.
2. Check if each element is equal to the specified value.
3. Access the length property on the result.

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

const count = arr.filter(element => {
  return element === 'a';
}).length;

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

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

On each iteration, we check if the current element is equal to the specified value and return the result.

The filter() method returns a new array containing only the values for which the callback function returned a truthy value.

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

// 👇️ [ 'a', 'a', 'a' ]
console.log(
  arr.filter(element => {
    return element === 'a';
  }),
);

The last step is to access the length property on the array to get the number of times the element appears in the array.

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

Copied!
function countOccurrences(array, value) {
  return array.filter(element => {
    return element === value;
  }).length;
}

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

console.log(countOccurrences(arr, 'a')); // 👉️ 3
console.log(countOccurrences(arr, 'b')); // 👉️ 1
console.log(countOccurrences(arr, 'c')); // 👉️ 0

The function takes an array and a value as parameters and returns the number of times the value is contained in the array.

You can also use a basic for loop to count the occurrences of each element in an array.

# Count the Occurrences of each element in an array using a for loop

This is a four-step process:

1. Declare a variable that stores an empty object.
2. Use a for loop to iterate over the array.
3. Check if each element is contained as a key in the object.
4. If the condition is met, increment the value, otherwise, initialize the count to 1.

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

const count = {};

for (let index = 0; index < arr.length; index++) {
  const element = arr[index];

  if (count[element]) {
    count[element] += 1;
  } else {
    count[element] = 1;
  }
}

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

This code sample achieves the same result. However, we use a basic for loop, instead of the for...of loop or the Array.forEach() method.

# 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 the Unique Elements in an Array in JavaScript