DEV Community

loading...

JavaScript: Reduce the number of conditional operators used in the expression

K.V.Harish
Frontend developer and aspiring Fullstack developer from India. Loves to have ☕ any time of the day.
Updated on ・2 min read

We would have all come across a situation where the number of conditional operators to be used in an expression is more like in the below example.

const firstCondition = true,
      secondCondition = true,
      thirdCondition = true,
      fourthCondition = false,
      fifthCondition = true;

if(firstCondition && secondCondition && thirdCondition && fourthCondition && fifthCondition) {
    console.log("All the conditions met expectation");  
}
else {
    console.log("All the conditions did not meet expectation");
}

if(firstCondition || secondCondition || thirdCondition || fourthCondition || fifthCondition) {
    console.log("Atleast one of the conditions met expectation");  
}
else {
    console.log("None of the conditions met the expectation");
}

//Output:
//All the conditions did not meet the expectation
//At least one of the conditions met expectation
Enter fullscreen mode Exit fullscreen mode

Code quality tools like ESLint, SonarQube, etc will actually suggest us to optimize this code to have fewer conditional operators. So how do we do that?

There are many ways to solve this. I am going to give a simpler way (Updated). If you have an easier or better solution please feel free to leave it in the comment section.

const firstCondition = true,
      secondCondition = true,
      thirdCondition = true,
      fourthCondition = false,
      fifthCondition = true;

const conditionsToCheck = [firstCondition, secondCondition, thirdCondition, fourthCondition, fifthCondition]

if(conditionsToCheck.every(condition => condition)) {
    console.log("All the conditions met expectation");
}
else {
    console.log("All the conditions did not meet expectation");
}

if(conditionsToCheck.some(condition => condition)) {
    console.log("Atleast one of the conditions met expectation");
}
else {
    console.log("None of the conditions met the expectation");
}

//Output:
//All the conditions did not meet the expectation
//At least one of the conditions met expectation
Enter fullscreen mode Exit fullscreen mode

We can also mix in conditions like below and it would work without any problem.

const conditionsToCheck = [firstCondition, secondCondition || sixthCondition, thirdCondition, fourthCondition, fifthCondition && seventhCondition];
Enter fullscreen mode Exit fullscreen mode

Unless you are supporting IE8 and below you should fine using Array some and every methods.

I hope this article is helpful.

Discussion (6)

Collapse
pichardoj profile image
J. Pichardo

Hi @kvharish , I like what you are trying to do, however wouldn't it be better to make use of the array functions like every or some?, that way you eliminate the need for an additional function:

const firstCondition = true,
  secondCondition = true,
  thirdCondition = true;

const conditionArray = [
  firstCondition,
  secondCondition,
  thirdCondition
];

if (conditionArray.every(contition => condition)) {
  console.log("All the conditions met expectation");
} else {
  console.log("All the conditions did not meet expectation");
}

if (conditionArray.some(condition => condition)) {
  console.log("Atleast one of the conditions met expectation");
} else {
  console.log("None of the conditions met the expectation");
}

And just because I love lazy evaluation you could even turn those conditions into predicates:


const firstPredicate = target => true;
const secondPredicate = target => true;
const thirdPredicate = target => true;

const predicates = [firstPredicate, secondPredicate, thirdPredicate];

conditionArray.every(predicate => predicate(obj))

That way conditions are not evaluated until you need them to.

Regards

Collapse
stramel89 profile image
Michael Stramel

Definitely agree using every and some are the way to go. You could simplify further by using Boolean like so, conditionArray.every(Boolean)

Collapse
pichardoj profile image
J. Pichardo

Nice, haven't tried it, however, won't it evaluate as true for Boolean being an object?

Collapse
kvharish profile image
K.V.Harish Author

Absolutely we can use every and some.

Collapse
teebot profile image
Thibaut Nguyen

Another way to group conditions is to group them in arrays where

for all conditions: [conditionsToCheck].every(x => x)

for at least one: [conditionsToCheck].some(x => x)

Collapse
kvharish profile image
K.V.Harish Author

Yes, we can use it.

More optimized way.