Javascript Array Every Method
📣 Sponsor
Sometimes with arrays, we want to test every element for a certain condition. While individual conditions can be tested easily with an if
statement, it becomes a little trickier with multiple array elements. As such, Javascript provides a method on arrays called every
which will test every element for a specific test. If all pass the test, the overall every
method will pass true
. If one or more fail the test, then the overall every
method will return false
.
Checking every element of an array for a test
Suppose we have an array where we want to test if every number is above 15. This is a perfect place to use every
. Let’s take a look.
let arr = [ 25, 35, 45, 55, 65 ];
let check = arr.every((el, index, array) => {
return el > 15
});
console.log(check); // true
every
takes a function like in the form (el, index, array) => ...
.
el
is the current element being iterated through byevery
.index
is the index of the current element being iterated through by the array.array
is the full array being iterated upon. Here it would be[ 25, 35, 45, 55, 65 ]
.
Since arrow functions will return true if on one line without a return
statement, the above code can be simplified to this, too:
let arr = [ 25, 35, 45, 55, 65 ];
let check = arr.every((el, index, array) => el > 15);
console.log(check); // true
As well, the every
method can take another form where it accepts a callback function’s name, along with a custom value for this
. That means you can create a function, and then prep its content based on a custom this
within the function itself. For example, below I pass {value: 15}
into this
, allowing us to change this value should we want to for other times when we call every
:
let callbackFn = function(el) {
if(this.value !== undefined) {
return el > this.value
}
return false;
}
let arr = [ 25, 35, 45, 55, 65 ];
let check = arr.every(callbackFn, { value: 15 }); // Returns true
Modifying an array with the every method
Much like other array methods, Javascript does allow modification of the array within a method called upon it. For example, we could modify each element of our array and then do a check upon it. Since every
is essentially a type of loop, each element is looped over sequentially:
let arr = [ 25, 35, 45, 55, 65 ];
let check = arr.every((el, index, array) => {
arr[index] -= 100;
return el > 5
});
// This is true, since we subtracted 100 from each element before the check
console.log(check); // true
We can even delete elements from an array in the every
loop:
let arr = [ 25, 35, 45, 55, 65 ];
let check = arr.every((el, index, array) => {
arr.pop();
return el > 15;
});
console.log(arr); // returns [ 25, 35 ]
Javascript even lets you add elements to an array in every
. Since every
fires only once for each element in an array, it cannot lead to an infinite loop by simply pushing elements to the original array:
let arr = [ 25, 35, 45, 55, 65 ];
let check = arr.every((el, index, array) => {
arr.push(100);
return el > 15;
});
// This is true, since we subtracted 100 from each element before the check
console.log(arr); // returns [25, 35, 45, 55, 65, 100, 100, 100, 100, 100]
console.log(check); // returns true
Conclusion
The every
method is a built in way to do logical tests on entire arrays. You should be careful with this on large arrays as it may lead to performance problems. In most cases, though, it’s a really useful tool to add to your array arsenal. There are many other use cases where every
is very useful. For example, you can also use every
for other use cases, like checking if an array is a subset of another array.
More Tips and Tricks for Javascript
- What is Nullish Coalescing (or ??) in Javascript
- The Free Course for Javascript
- How Events work in Javascript
- How to fix 'Uncaught SyntaxError: Cannot use import statement outside a module'
- Web Components and the Shadow DOM
- Javascript Promise.all() - Everything you need to know
- How to check if a user has scrolled to the bottom of a page with vanilla Javascript
- How to install nvm, the Node Version Manager
- Changing HTML Classes and Attributes in Javascript
- Resolving HTTP Cannot set headers after they are sent to the client in Node.JS