2
67

JavaScript: How to use Array every() Method in JavaScript

Reading Time: 3 minutes

Array every() method is usually the go-to method if we need to iterate through to perform the same validation code on all elements and return a boolean true only if all the elements are validated true. Array every() is introduced since ES5.

What is Array every Method

Array refers to standard built-in object in JavaScript and every() or Array.proto.every() method is part of Array as shown in the documentation. It is design to have a callback function execute over every element and return a boolean true if all the iteration returns a boolean true.

every() method takes in a callback function that have up to 3 argument inputs. 1st argument being the element data is compulsory where it is the element. 2nd argument is the index and 3rd argument is the original array where these are optional.

// Syntax of every() method
// passObject is optional, its purpose is for us to pass values in
myArray.every(callback[,passObject]);

// Syntax of callback function
function(currentElement)
function(currentElement, index)
function(currentElement, index, originalArray)

There are 3 ways of how we can define the callback function. There are:

  • Arrow function
  • Callback function
  • Inline callback function

Let’s look at the illustration below. Since we do not need to pass data into the callback function, there is no need for passObject.

// Arrow Function Type
myArray.every((currentElement) => { 
  return true;
});

// Callback Function Type
myArray.every(callbackFn);

// Inline Callback Function Type
myArray.every(function(currentElement) { 
  return true;
});

Features of every()

  • Process on all elements and return a boolean.
  • Before the first execution of callback, it will capture and fix the array size to process.
    • Will not process new array elements.
  • If the array reference is changed in any iteration, the old array reference will still be used by the callback function for all iterations.
  • If a subsequent array element is updated in the earlier iteration, this new value will pass to the callback function when come to its iteration.
  • If array is empty, result will return true.
  • It any iteration return false, every() will immediately return false.

Usage of Array every() Method

Pre-ES5 Style

To write it with pre-ES5 style, we will first need to create a boolean variable. Subsequently, if any of the element fail the validation, we will update the variable to false.

In the illustration below, we will validate that all elements in personArray have age of 10 or more.

var personArray = [
  { name: 'Person1', age: 6 },
  { name: 'Person2', age: 30 },
  { name: 'Person3', age: 80 },
];

var result = true;
for (var i = 0; i < personArray.length; i++) {
  if (personArray[i].age <= 9) {
    result = false;
    break;
  }
}

console.log(result); // false

ES5 Style

Let’s look into how to use every() method with the below example.

First, let’s define a basic array consisting of person and their age. Next, we will validate the age of everyone to be greater than 5 and 10. We will just need to use the element here. No need to use index and original array data.

const personArray = [
  { name: 'Person1', age: 6 },
  { name: 'Person2', age: 30 },
  { name: 'Person3', age: 80 },
];

const ageAbove10Validation = personArray.every((currentElement) => {
  if (currentElement.age > 10) {
    return true;
  }
  return false;
});

const ageAbove5Validation = personArray.every((currentElement) => {
  if (currentElement.age > 5) {
    return true;
  }
  return false;
});

console.log(ageAbove10Validation); // false
console.log(ageAbove5Validation);  // true

Conclusion

From the above illustration, we can see that we will require less code if we use every() method instead of a traditional for-loop. In addition, there is no need for external variable and a loop control mechanism.

More Reading

Show Comments

No Responses Yet

Leave a Reply