Evaluate all values in an array in Javascript

This post summarizes a neat solution to a problem I ran into recently. Hope you find this useful!

---

Problem

&& is a well-known, convenient operator for checking if all conditions are true. For example, imagine we're trying to perform validations on a input form before saving a user profile:

function saveProfileIfValid() {
  if(firstNameIsValid('Jerry') && lastNameIsValid('Smith') && emailIsValid('[e-mail]')) {
    saveProfile(); // save only if all validations pass
  }
}

The problem was, the code above would stop executing once it found a condition that returned false. I didn't want that, because my validations would add error messages to be displayed on the screen like below. How can we make all validations run regardless of the results?

let errorMessages = [];

function firstNameIsValid(firstName) {
  if(firstName && firstName.length <= 10) {
    return true;
  } else {
    // add error messages, if any
    errorMessages.push('First name must be 1-10 characters');
    return false;
  }
}

Solution

The solution I found is below - it took some time and googling to get to it, so I'm leaving this for future reference.

function validInput() {
    return [firstNameIsValid('Jerry'), lastNameIsValid('Smith'), emailIsValid('[e-mail]')].every(Boolean);
}

function saveProfileIfValid() {
  if(validInput()) {
    saveProfile(); // save only if all validations pass
  }
}

What's happening here?

1. .every is a method that tests every element in an array against a condition and returns a boolean. It returns true only if all elements pass the test. (Update: I had a misconception about .every - please see the update below for details.)

function isTen(value) {
  return value === 10;
}
const array = [10, 5, 10]

array.every(isTen) // returns false

1. Boolean is a function that converts a value into a boolean, like the double bang (!!). Examples below:

> Boolean(true)
true
> Boolean(false)
false
> Boolean('test')
true
> Boolean('')
false

As a result, all validations in the array get executed, and then finally a boolean value is returned based on whether all validations returned true or not.

UPDATE

According to a helpful comment I received, .every actually exits once it finds a falsy value, just like &&. The reason why the code above works is because all the items in the array get evaluated before .every is executed. This can also be achieved by the code below, in a simpler manner. (Thank you Kevin!)

function saveProfileIfValid() {
  const isValid = {
    firstName: firstNameIsValid('Jerry'), // <- executes before if( ... )
    lastName: lastNameIsValid('Smith'),   // <- executes before if( ... )
    email: emailIsValid('[e-mail]')   // <- executes before if( ... )
  }
// all the validations have already happened
  if(isValid.firstName && isValid.lastName && isValid.email) { 
    saveProfile(); // save only if all validations pass
  }
}

---

Thank you for reading, and please let me know if you have a better solution!

References:

• How to return true if all values of array are true otherwise return false?
• Check if all values in array are true, then return a true boolean statement

Comments

[Kevin Sullivan]

I'd avoid using Array.prototype.every in this way.
It too will exit as soon as an entry returns false.
MDN - array.prototype.every

It's not because of .every that all of the validations run.
It's because the array is created and all of its items are evaluated, before .every executes

You would get the same result with

function saveProfileIfValid() {
  const isValid = {
    firstName: firstNameIsValid('Jerry'), // <- executes before if( ... )
    lastName: lastNameIsValid('Smith'),   // <- executes before if( ... )
    email: emailIsValid('[e-mail]')   // <- executes before if( ... )
  }
// all the validations have already happened
  if(isValid.firstName && isValid.lastName && isValid.email) { 
    saveProfile(); // save only if all validations pass
  }
}

Hope this helps

[Victor Nascimento]

I thought the same! Good catch. All array methods that rely on the iteratee to return a boolean will stop execution as soon as possible.

[Risa Fujii]

I am still relatively new to Javascript so I appreciate this (I guess Stack Overflow doesn't always have the best solution haha). I will update my code. Thank you both!

[Latsuj]

Actually, reading at your code. It seems the thing you care about is to show the different error messages.
I guess, it's for showing inside a form.

So the condition for me before saving would be to check if errorMessage is empty or not.

However, like this way of using "every".

[Risa Fujii]

Thanks for reading and for the comment!

[Katie Nelson]

Will your solution work if the person only has a first name like Cher or Madonna?

[Risa Fujii]

In that case, you could customize your lastNameIsValid to something like this, so it allows for blank last names :)

function lastNameIsValid(lastName) {
  if(!lastName || lastName.length <= 10) {
    return true;
  } else {
    errorMessages.push('Last name cannot be longer than 10 characters');
    return false;
  }
}

Results:

> lastNameIsValid('Smith')
true
> lastNameIsValid('')
true
> lastNameIsValid(null)
true
> lastNameIsValid('TooLongToPassValidation')
false

[Ardalan]

Good Tipps 👌🏻

[Risa Fujii]

Thank you!

[Niemvuilaptrinh]

Thanks for sharing.

[Risa Fujii]

Thanks for reading :)