Using just 'if' instead of 'else if'

I initially learnt that if you have more than two possible outcomes for a conditional statement, then after the initial if() { } you would then use else if() { } for subsequent outcomes, and usually finish with else { } for the final outcome, or default (although you could also finish with else if() { } if you wanted to actually define a condition for the final outcome).

However, in the walk-though video for the Rock, Paper, or Scissors Project just if is used where I had used else if, as follows:

const determineWinner = (userChoice, computerChoice) => {
  if (userChoice === 'bomb') {
    return 'You win!';
  } if /* I used 'else if' */(userChoice === computerChoice) {        
    return 'It\'s a tie!';
  } if /* I used 'else if' */(userChoice === 'rock') {
    if (computerChoice === 'paper') {
      return 'The computer wins!';
    } else {
      return 'You win!';
    }
  } if /* I used 'else if' */(userChoice === 'paper') {
    if (computerChoice === 'scissors') {
      return 'The computer wins!';
    } else {
      return 'You win!';
    }
  } 
    /* etc. */
};

In each of the three places indicated, using either just if or else if work and give the same result. Personally, I think using else if makes the code clearer and easier to read. Would that, therefore, be the only reason for using else if instead of if in these instances? In terms of the code working, however, could we always use just if instead of else if?

Given that every branch results in a return, this structure is perfectly fine, though a new line for each if would show independence of each line. Each if can only follow a earlier fail. No logic problem, there.

I think, I’ve more or less got it…

Using else if makes sure a conditional statement is exited when one of its conditions is met, and when the code executed doesn’t include return e.g. (this example is based on this exercise)

// prints "It's spring! The trees are budding!"

let season = 'spring';

if (season === 'spring') {
  console.log('It\'s spring! The trees are budding!');
} else if (season === 'winter') {
  console.log('It\'s winter! Everything is covered in snow.');
} else if (season === 'fall') {
  console.log('It\'s fall! Leaves are falling!');
} else if (season === 'summer') {
  console.log('It\'s sunny and warm because it\'s summer!');         
} else {
  console.log('Invalid season.');
}

However, if any of the else ifs are replaced by just if, when a preceding condition is met, the final else code block is also executed (which is not what we want) e.g.

/*
Prints "It's winter! Everything is covered in snow." AND "Invalid season."
*/

let season = 'winter';

if (season === 'spring') {
  console.log('It\'s spring! The trees are budding!');
} else if (season === 'winter') {
  console.log('It\'s winter! Everything is covered in snow.');
} else if (season === 'fall') {
  console.log('It\'s fall! Leaves are falling!');
} if (season === 'summer') {
  console.log('It\'s sunny and warm because it\'s summer!');         
} else {
  console.log('Invalid season.');
}

In fact, if only this last else if is replaced by just if (rather than replacing all of them), then whichever season is defined as the value of the variable, the default “Invalid season.” is also printed.

Are these conclusions correct?

Is the following reformatting along the lines of what you’re suggesting?
(The solution given in the walk-through video does actually also suggest something similar.)

const determineWinner = (userChoice, computerChoice) => { 
  if (userChoice === 'bomb') {
    return 'You win!'; 
  }
  if (userChoice === computerChoice) {
    return 'It\'s a tie!';
  }
  if (userChoice === 'rock') {
    if (computerChoice === 'paper') {
      return 'The computer wins!';
    } else {
      return 'You win!';
    }
  }
  if (userChoice === 'paper') {
    if (computerChoice === 'scissors') {
      return 'The computer wins!';
    } else {
      return 'You win!';
    }
  } 
  /* etc. */
};
1 Like

Yes.

As a rule, I always give closng braces their own line, as you have done. Make that a habit and you avoid a lot of errors. Plus it makes reading and debugging a breeze.

Precisely. Without return we don’t have any interruption of flow and rely on else if to block any branches following a true branch.


Consider this mock up…

switch (expression) {
  case expression:
    // action;
    break;
  ...
}

compared to,

if (expression) {
  // action;
}
else if ...

Mind, expressions are values. In the case of if, the value is considered truthy or falsy. In the switch, one or the other expression is a value, while the other is a literal expression.

1 Like