CODEWITHSUNDEEP
javascriptif-statement
user13112440
user13112440

Reputation:

JS - If multiple conditions can be true at the same time, which one runs?

If multiple if-statements can be true at the same time, how does JS determine which one to run? In the example below, I know "Cool, now I have a lot of nachos to myself." will get returned, but I just wonder how that is determined? What if instead of friendsAtYourParty === 0 it would be friendsAtYourParty < 3 ("Cool, now I have a lot of nachos to myself." would get returned again, but why?). I was thinking maybe the one that is more specific/closer to the value "wins"?


if (friendsAtYourParty === 0) {
  console.log("Cool, now I have a lot of nachos to myself.");
} else if (friendsAtYourParty < 4) {
  console.log("Perfect amount to play some Mario Kart.");
} else {
  console.log("Wooooo turn on the dance music!");
}

Upvotes: 0

Views: 629

Answers (3)

VLAZ
VLAZ

Reputation: 29085

When you have an if/else chain only the first if condition that matches would be executed. After all, that's how if/else works:

if (condition) {
  //only executed when condition is true
} else {
  //only executed when condition is false 
}

The else part will NOT execute when the condition is true. Nothing changes when you have more than one if/else:

if (condition1) {
  //only executed when condition1 is true
} else if (condition2) {
  //only executed when condition2 is true and condition1 is false
} else {
 //only executed when both condition1 and condition2 are false
}

An if/else chain describes the following logic flow, hence why it will always be evaluated predictably:

Flowchart describing the if/else chain

Upvotes: 1

M A Salman
M A Salman

Reputation: 3820

Lets consider friendsAtYourParty value is 8

  1. if (friendsAtYourParty === 0) { // 8 == 0 returns false so it skips this block

  2. console.log("Cool, now I have a lot of nachos to myself.");

  3. } else if (friendsAtYourParty < 4) { // 8 < 4 returns false so it skips this block

  4. console.log("Perfect amount to play some Mario Kart.");

  5. } else { // there is no condition in else , so if all conditions fail in above blocks it will execute this

  6. console.log("Wooooo turn on the dance music!");

  7. }

Lets consider another scenario where friendsAtYourParty is 0

  1. if (friendsAtYourParty === 0) { // 0 == 0 returns true so it runs this block and gets out of if else chain and ignores all blocks in if else chain

  2. console.log("Cool, now I have a lot of nachos to myself.");

  3. } else if (friendsAtYourParty < 4) { // 0 < 4 returns true but its ignored

  4. console.log("Perfect amount to play some Mario Kart.");

  5. } else { // this is also ignored

  6. console.log("Wooooo turn on the dance music!");

  7. }

Press Ctrl+shift+i to open dev tools , run the following snippet and press f19 to go step by step to understand the flow.

debugger
var friendsAtYourParty=8;
if (friendsAtYourParty === 0) {
  console.log("Cool, now I have a lot of nachos to myself.");
} else if (friendsAtYourParty < 4) {
  console.log("Perfect amount to play some Mario Kart.");
} else {
  console.log("Wooooo turn on the dance music!");
}
friendsAtYourParty=0;
if (friendsAtYourParty === 0) {
  console.log("Cool, now I have a lot of nachos to myself.");
} else if (friendsAtYourParty < 4) {
  console.log("Perfect amount to play some Mario Kart.");
} else {
  console.log("Wooooo turn on the dance music!");
}

Upvotes: 0

Djerry
Djerry

Reputation: 23

Basically first true condition runs. It happens because JS code gets run and executed line by line. When JS engine sees if statement and the condition is false it continues to read the code. When it sees the condition that is true it executes the statement declared after the condition and then removes if statement from a callstack. In other words: It is not going to read other conditions after it saw true. It will ignore them

Upvotes: 0

Related Questions