Lets say we have 3 variables and I want to check them empty or not without using multiple if else blocks.

let firstName = "adem"
let lastName = "corona"
let email = "[email protected]"

If(firstName ===  " " && lastName !==  " " && email !==  " "){
Console.log("first name empty")
} else if .......

What is the best way of solving this? Thanks a lot

Lets say we have 3 variables and I want to check them empty or not without using multiple if else blocks.

let firstName = "adem"
let lastName = "corona"
let email = "[email protected]"

If(firstName ===  " " && lastName !==  " " && email !==  " "){
Console.log("first name empty")
} else if .......

What is the best way of solving this? Thanks a lot

• javascript
• reactjs
• typescript
• validation
• if-statement

• what is the final goal? – João Cunha Commented Jan 29, 2020 at 14:31
• @JoãoCunha I want to validate a form. Form has three inputs. I want to check each and every input is empty or not. And also want to send error messages separately.As an example, If the first name is filled and other two is empty, I want to send separate error messages saying last name is empty and email is empty. – Pasindu Dineth Peiris Commented Jan 29, 2020 at 14:35

5 Answers 5

You can avoid chained if-else stataments by returning directly from an if statement. For example, you can have a function such as this one:

function isInputValid({ firstName, lastName, email }) {
  if (firstName === '') {
    return false;
  }
  
  if (lastName === '') {
    return false;
  }
  
  if (email === '') {
    return false;
  }
  
  return true;
}

console.log(isInputValid({ firstName: 'adem', lastName: 'corona', email: '[email protected]' }));
console.log(isInputValid({ firstName: 'adem', lastName: '', email: '[email protected]' }));

Instead of a boolean value, you could also return an object containing an error message, so you can point out which field is missing.

You could try looping over a required array of fields like this to make it short and flexible:

const validate = (values, required) = {
  let errors = {}

  required.map(field => {
    if (values[field] == '') {
      errors[field] = 'Required';
    }
  }

  return errors;
}

const required = ['firstName', 'lastName', 'email'];

const values = {
  firstName = '',
  lastname = 'test',
  email = ''
}

const errors = validate(values, required);

console.log(errors);
// errors = { firstName: 'Required', email: 'Required' }

Making the values an object instead of individual parameters makes it possible to access them dynamically in a loop. This might work depending on what your needs and requirements are.

Then to check if errors exist, just see if the size of the object is 0 by converting it to an array:

if (Object.keys(errors).length == 0) {
  // No errors, continue as valid
} else {
  // There are errors, handle them as needed.
}

Another great way is to use YUP. It is possible to provide validation anywhere. I always use it. Here is an example.

const schema = Yup.object({
      last_name: Yup.string()
        .when('first_name', {
            is: true,
            then: Yup.string().required().label("Last Name"),
        }),
});

You can use a similar as following. It also has many other amenities. You can find all the information from the official website below. https://github./jquense/yup

I guess you can try something like this

// declare vars where you should, and add the vars you want to test in an object
    let result = [];
    let toTest= {
        firstName = "adem",
        lastName = "corona",
        email: "[email protected]",
     }

// declare this function to test your values
function testValue(){
 Object.keys(toTest).map(key => {
    if(!toTest[key]){
      result.push(key);
    }
  }   
}

// where you need, call your function to test your strings
   testValue();
// in your result array you will have the keys of all the empty vars in your object

Note: if its for field validation you have some plugins like Yup(if Formik) or validate.js that are great for it ! have a look ! https://validatejs/

EDIT: Changed the response to an array so you can have all the results. I remande you to set result as an object {key: errorMessage, ...} so its easier for you to use him after (ex: call the error.nameOfInput in your form to display the error.

EDIT2: With object result would look like this

// declare vars where you should, and add the vars you want to test in an object
    let error= {};
    let toTest= {
        firstName = "adem",
        lastName = "corona",
        email: "[email protected]",
     }

// declare this function to test your values
function testValue(){
 Object.keys(toTest).map(key => {
    if(!toTest[key]){
      error[key]={`${key} cannot be empty`};
    }
  }   
}

// where you need, call your function to test your strings
   testValue();

// in your render 
 <input name="firstName" ...props />
 {error.firstName && <div className='error'>{error.firstName} </div> }

I believe you can't achieve this with plain if like in your example. You would need to have a validation schema and function that you run to validate, like most libraries do it. So you would need have some kind of initial object that couples the field names, their rules and error messages. But then you would need to use object with properties instead of plain variables. With those you cannot avoid checking them without separate if statements. For reference check how joi or yup works. Although I do understand that using one of those might be too much for you, so I'd just check each field separately.