every() Method – How to Check If Every Element Passes a Test

Whenever you use every() on a JavaScript array, the method does the following:

1. It checks if every element in the calling array passes its function argument’s test.
2. It returns true if all the array’s items pass the test. Otherwise, it returns false.

Note

• every() does not alter the original array.
• A calling array is an array on which you used every(). So, in bestColorsList.every(func), bestColorsList is the calling array.
• every() is sometimes written as Array.prototype.every() because it is a method of the Array object’s prototype property.

Syntax of the every() Method

every() accepts two arguments: a “callback function” and a “thisValue.” Here is the syntax:

callingArray.every(callback, thisValue);

Argument 1: callback

A function is the first argument accepted by the every() method. It is a required argument containing the code you want the computer to use to test each item of the calling array.

The callback function returns the Boolean true (or false).

In other words, the callback returns true if all the calling array’s items pass the specified test.

But the callback will return false if an item fails the test.

Keep in mind that every()’s function argument accepts three parameters: currentItem, index, and an array.

callingArray.every((currentItem, index, array) => {
  // Test to run on each item of the calling array
});

Note

() => {...} is an arrow function shorthand for function () {...}.

Parameter 1: currentItem

The currentItem parameter is required. It represents the current calling array’s item the computer is currently processing.

Parameter 2: index

The index parameter is optional. It represents the index number of the item the computer is currently processing.

Parameter 3: array

The array parameter is also optional. It represents the calling array.

Note

• You can rename the currentItem, index, and array parameters to anything you prefer.
• The computer will invoke every()’s function argument once for each item inside the calling array until it finds a falsy value. Once every() discovers a falsy element, it will immediately return false. The invocation will be in the order of the array items from left to right.
• every() does not change the original array. (Although you can do so with the callback argument.)

Argument 2: thisValue

A thisValue is the second argument accepted by the every() method. It is an optional argument representing the value you want to use as the function argument’s this value.

callingArray.every((currentItem, index, array) => {}, thisValue);

Suppose you do not provide a second argument. In that case, the computer will use undefined as the callback function’s this value.

Example 1: How to Use every() without a thisValue Argument

Here is an example of the every() method without a thisValue argument:

const colorsArray = ["red", "blue", "green", "white", "yellow", "pink"];

function itemLength(currentItem) {
  return currentItem.length > 5;
}

const trueOrFalse = colorsArray.every(itemLength);
console.log(trueOrFalse);

// The console.log invocation above will return: false

Try it on StackBlitz

In the snippet above, we used the every() method to confirm if every item in the colorsArray have a length greater than five (5).

Therefore, the browser returned false because the array has only one item ("yellow") whose length is greater than five (5).

In other words, not every element in the colorsArray has a length greater than five (5).

Note

The colorsArray is the calling array in the example above.

CodeSweetly ads

Use CSS Grid like a pro

Learn CSS Grid with live examples and images.

Check it out

Example 2: How to Use every() with a thisValue Argument

Here is an example of the every() method with a thisValue argument:

const colorsArray = ["red", "blue", "green", "white", "yellow", "pink"];
const thisValueArray = ["Current Test Item: ", "Next Test Item: "];

function itemLength(currentItem, ind, arr) {
  console.log(this[0] + currentItem);
  console.log(this[1] + arr[ind + 1]);
  return currentItem.length < 5;
}

const trueOrFalse = colorsArray.every(itemLength, thisValueArray);
console.log(trueOrFalse);

// The console.log invocation above will return:
// "Current Test Item: red"
// "Next Test Item: blue"
// "Current Test Item: blue"
// "Next Test Item: green"
// "Current Test Item: green"
// "Next Test Item: white"
// false

Try it on StackBlitz

In the snippet above, we used the every() method to confirm if every item in the colorsArray have a length less than five (5).

We also used the thisValueArray as the method’s this value.

Tip

Suppose you wish to return the values that passed the specified test. In that case, use the filter() method.