How to (not) check an entire array for a condition [one vs. all]

Chuqian Susan Li
Frontend Weekly
Published in
3 min readDec 27, 2017

So I came across this spectacle the other day.

which attempted to validate the entire array of elements by validating each individual element and assigning a variable to the result. Each. Iteration.

This is how to check an array improperly.

The above example checks the validity of each element sure. But the “overall result” is overrided at each iteration such that only the last element in the array has influence over the overall result.

There are better ways to do this. More functional ways in fact :)

Suppose my array is this:

var arrayToCheck = [
{ number: 1, name: 'one' },
{ number: 2, name: 'two' },
{ number: 3, name: 'three' },
];

and the condition I want to check is number > 1 .

Filter and Count

One way to check the entire array is to use the .filter() function and count the number of valid elements left like so:

The above method checks if at least 1 element in the array is greater than 1;

.some() and .every()

The JavaScript .some() and .every() functions are great for checking validity across the entire array. Based on the same array that we used before:

Both of those return statements return a true or false result;

Reduce

The master of all array methods, .reduce() , is back at it again showing us how it can supplement every array method with itself :) .

Reduce allows us to iterate through an array and accumulate a value whether that’s an object, a string, a number, a boolean, or anything we can possibly think of. In this instance a boolean is most critical.

The first example gives hasElement an initial value of false and iterates through the array to see if an element fulfills the condition. If it does, then hasElement is true and we return it. In line 4, if hasElement is false, then true is the default based on the condition passed in line 3.

The second example gives isEntireArrayValid an initial value of true . Reduce callbacks return the next value of the accumulator and so by returning the AND of isEntireArrayValid and element.number > 1 then it ensures that the conditional check if maintained throughout the entire array. In the first iteration, if element.number > 1 then the return is an AND between true and true which gives true. However, should any iteration not pass the condition, the return is true AND false which gives false. Thus the returned reduce statement gives a true or false result based on the entire array passing the condition.

For with return/break/if

While the examples above clearly solve the array checking issue, one can still implement a for loop to check it. The only problem with the initial solution was the fact that the loop still continued to override or run if the condition was either not met or met.

It can most definitely be done with for loops and a bit of code.

The above example can also be inverted logically to produce the same result (only checked for falsey not truthy).

Now we can get some work done :)

--

--