How to Count Certain Elements of an Array in JavaScript

1. Use the .filter Method to Count Certain Elements of an Array in JavaScript
2. Use .reduce Method to Execute a Callback Function in JavaScript
3. Use the .prototype Array Entity to Write Custom Methods or Properties in JavaScript

Introducing the .filter method that can be used literally to filter array elements based on a condition, we can use it in addition to the .length property to count certain elements of an array. A function provides the condition of the .filter method, passed as a parameter.

Also, we will introduce the .reduce method that executes a function for each element in the array and return a single value.

The function passed as a parameter can be either an arrow function or a common function as a callback function. It will dictate what elements the .filter will add to the returned array or what the .reduce method will do for each element in the array.

Use the .filter Method to Count Certain Elements of an Array in JavaScript

The .filter is a method of the Array entity that returns a new array filtered by the provided condition. Returning a new array means that the original array, which the method is called, will stand immutable.

For example, if we want all elements that is equal to the value one in an array, we can use the .filter as below:

// Input
let array = ['one', 'two', 'three', 'four', 'five']
array = array.filter(element => element == 'one')
console.log(array)

Output:

// Output
[ 'one' ]

As expected, the .filter method returned an array based on the element == 'one' condition. So if the actual element of the array is equal to 'one', then the filter will add this element to the returned array.

But what is happening inside the .filter method? We can see better by using a common function structure to the condition() function:

// Input
let array = ['one', 'two', 'three', 'four', 'five']
array = array.filter(function condition(element) {
  if (element == 'one') return true
    return false
})
console.log(array)

With this, we have the same first example output:

// Output
[ 'one' ]

The condition() function receives an element as a parameter, and if this element is equal to a certain value, in this case, 'one', it returns true and, if not, returns false.

So, the .filter method adds any element that the condition results in true; as the original array has only the first element as one, the .filter returns only one element.

Note that the condition() function is declared inside the .filter method. If you declare it outside and call it inside the filter, it will not work because the element is part of the callback scope.

A callback function is passed as a parameter to another function called the outer function.

The outer function will call the callback function to do something; in the case of the .filter method, it will call the condition() callback function to filter the array based on its condition.

Back to our objective, the .filter will finally return a new array with an array.length elements, and each one is an element whose callback function returned a value equivalent to true. We can easily do this with the .length property to count these filtered elements.

The .length is a property of the array entity that returns the number of elements in an array. This number is always greater than the highest index in that array because the first element is always on the index equals 0.

// Input
let array = [1, 2, 3, 4, 5]
console.log(array.length)

Output:

// Output
5

The number of elements in the array is 5. 5 is greater than the index of the value 5, which is 4.

Putting all together, as an example, we can use the following: How to get the number of all test notes of a school greater than seven? The array of the test notes is in the example.

// Input
let notes =
    [7.0, 6.7, 7.3, 9.8, 5.6, 7.1, 7.8, 6.2, 8.0, 9.0, 4.5, 6.9, 7.5, 8.5, 6.4]
greaterThanSeven = notes.filter(value => value > 7)
console.log(greaterThanSeven.length)

Output:

// Output (The array returned by the .filter is: [7.3, 9.8, 7.1, 7.8, 8, 9, 7.5, 8.5])
8

So, 8 is the number of notes greater than 7 of all 15 notes in the original notes array.

Use .reduce Method to Execute a Callback Function in JavaScript

We can use the .reduce array entity method as another option. This method is used to execute a callback function (and the .filter) on each array element, but it will finally return a single value.

A simple example to the .reduce working, is the sum of all element in an array:

// Input
let array = [1, 2, 3, 4, 5].reduce((previous, current) => previous + current)
console.log(array)

Output:

// Output
15

But we can use this method another way by passing the initial value. In the previous example, we can see that the previous begin with the first index element in the array, being the callback function, this way:

/*
previous + current = result
1 + 2 = 3
3 + 3 = 6
6 + 4 = 10
10 + 5 = 15 -> final result
*/

This sum works because if we don’t pass a second parameter (as the callback function is the first parameter) to the .reduce method, it will consider the previous as the first element of the array in the first iteration.

But if we want to count certain elements in the array? We cannot use the first element as the previous because it could result in a wrong value.

The example below is about counting how many 2 numbers are in the array:

// Input
let array = [1, 2, 3, 4, 5].reduce((sum, value) => (value == 2 ? sum + 1 : sum))
console.log(array)

Output:

// Output
2

As we can see, the result is 2, but the correct answer is 1. It happened because the sum is initialized with the first element 1, as we don’t pass any other parameter beyond the callback function.

To do the correction, we can just pass a 0 as the second .reduce parameter:

// Input
let array =
    [1, 2, 3, 4, 5].reduce((sum, value) => (value == 2 ? sum + 1 : sum), 0)
console.log(array)

Output:

// Output
1

This way, the .reduce is making sum + 1 every time the current element is equal to 2, with the sum initialized with 0.

Use the .prototype Array Entity to Write Custom Methods or Properties in JavaScript

As a plus, instead of using all these logics every time we need to count certain elements in an array, we can use the .prototype array entity property to write custom methods or properties to this entity.

To make a .countCertainElements method to the array entity, we can use the following structure:

// Input
// Declaring the prototype .countCertainElements method
Array.prototype.countCertainElements = function(value) {
  return this.filter(arrayElement => arrayElement == value).length
} let array1 = [1, 2, 2, 2, 3, 4, 5]
console.log(array1.countCertainElements(2))

Output:

// Output
3

We can do the same for the .reduce:

// Input
// Declaring the prototype .countCertainElements method
Array.prototype.countCertainElements = function(value) {
  return this.reduce((sum, element) => (element == value ? sum + 1 : sum), 0)
} let array1 = [1, 2, 2, 2, 3, 4, 5]
console.log(array1.countCertainElements(2))

Output:

// Output
3