DEV Community

Evaluate all values in an array in Javascript

Risa Fujii on October 19, 2019

This post summarizes a neat solution to a problem I ran into recently. Hope you find this useful! Problem && is a well-known...

Read full post

Kevin Sullivan • Oct 19 '19

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('js@email.com')   // <- 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 • Oct 19 '19

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 • Oct 20 '19

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 • Oct 19 '19

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 • Oct 20 '19

Thanks for reading and for the comment!

Katie Nelson • Oct 19 '19

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

Risa Fujii • Oct 19 '19 • Edited

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 • Oct 20 '19

Good Tipps 👌🏻

Risa Fujii • Oct 20 '19

Thank you!

Niemvuilaptrinh • Oct 20 '19 • Edited

Thanks for sharing.

Risa Fujii • Oct 20 '19

Thanks for reading :)