DEV Community

loading...

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...
pic
Editor guide
Collapse
wolverineks profile image
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('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

Collapse
vjoao profile image
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.

Collapse
risafj profile image
Risa Fujii Author

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!

Collapse
latsuj profile image
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".

Collapse
risafj profile image
Risa Fujii Author

Thanks for reading and for the comment!

Collapse
katnel20 profile image
Katie Nelson

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

Collapse
risafj profile image
Risa Fujii Author

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
Collapse
mzahraei profile image
Ardalan

Good Tipps 👌🏻

Collapse
risafj profile image
Collapse
haycuoilennao19 profile image
haycuoilennao19

Thanks for sharing.

Collapse
risafj profile image
Risa Fujii Author

Thanks for reading :)

Collapse
rajnishkatharotiya profile image
Info Comment marked as low quality/non-constructive by the community. View code of conduct
Rajnish Katharotiya

Great post, I just released a new episode in javascript useful snippet series.
See how to check if all values in the array are equal or not with youtube.com/watch?v=lv3Zkp6beuY

Thanks for watching, if you found it informative, please subscribe channel to support me.