Chaining If Else Statements logic

JavaScript
1

Tell us what’s happening:
This question is about chaining else if statements. I can solve the problem fine, but I dont understand why multiple else if’s are necessary.

I guess I am confused about when to use “else” and when to use “else if”, can someone explain that for me?

thank you.

Your code so far


function testSize(num) {
  // Only change code below this line
  
  
  return "Change Me";
  // Only change code above this line
}

// Change this value to test
testSize(7);

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.110 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript/chaining-if-else-statements

2

If there are more than 2 possible outcomes, then you may need multiple ifs.

For example: Can you play with Legos?
image

if (age < 4) {
    return "You are too young for Lego";
} else if (age > 99) {
    return "You are too old for Lego";
} else { // they are between 4 and 99
    return "Go play with Lego!"
}
1 Like
3

thank you for the help.

but why could you not do:

if (age < 4) {
return “You are too young for Lego”;
} if (age > 99) {
return “You are too old for Lego”;
} else { // they are between 4 and 99
return “Go play with Lego!”
}

what is the necessity of “else if (age < 99)”

4

If you have various if all of them are evaluated. If you have a chain then they are evaluated in sequence, and the first for which the condition is true.

In this case the return breaks it anyway, but there are cases in which you are using the if statements to determine something, and if you have many if statements mutually exclusive using a chain will mean less computational power needed in average. (If you have 10 statements each one is evaluated every time, if you have a chain with 10 statements only the ones before the true one are evaluated, and so less computational power is needed)

And if your write if () {} if () {} you get an error, you are missing or an else or a semicolon

2 Likes
5

You can do it that way too! The else if syntax can be considered syntax sugar (something that is done to help make the code cleaner, but doesn’t add any new functionality not previously available) . You can write your code without ever using else if, as there a number of alternavies. (I will only go into a few below) You could easily just used normal if, and else this way:

if (age < 4) {
  return “You are too young for Lego”;
} else {
  if (age > 99) {
    return “You are too old for Lego”;
  } else { // they are between 4 and 99
    return “Go play with Lego!”
  }
}

As you can see, this a lot more verbose, and not flat. If you added more cases you would end up with very “nested” code inside of each other. This is something you generally want to prevent. Written code “scales” better vertically than horizontally, if you ever find yourself scrolling left to right to read code, odds are things are not written with the reader in mind. (IE it’s badly structured code) It may work the same, but the computer doesn’t care about how it looks, only people and since people will be reading the code more often than writing it, its important to write the code with readers in mind.

Also this line: } if (age >99) { is not common practice, as it’s too easy for the reader to “skip over” the if statement after the bracket. Its best to leave it on its own line.

Finally, I’d like to mention my personal approach of just not using else alltogether
If your inside of a function, you can prevent the execution of the rest of the function alltogether using return, as once return is called, the rest of the code in the function is skipped.

function getLegoMessage() {
  if (age < 4) {
      return "You are too young for Lego";
  }
  if (age > 99) {
      return "You are too old for Lego";
  }
  // NOTE: this line is executed only if the previous 2 if statements aren't executed.
  return "Go play with Lego!"
}

PS. Finally if you wanted to be as concise as possible, you could use a well formatted nested ternary. But I would only recommend this if you format it and can understand the syntax well enough:

function getLogoMessage() {
  return age < 4
    ?  "You are too young for Lego"
    :  age > 99
       ? "You are too old for Lego"
       : "Go play with Lego!"
}
2 Likes
6

okay, I get it now. thanks!

7

I understand now. Thanks!

8

You use “else if” only if you have another condition different from the “if” statement. Use “else” if you run out of conditions.

9 
function elseIf(input) {
  let output
  if(input < 10) {
    output = "first if";
  } else if (typeof input === "number") {
    output = "else if";
  }
}

the else if here will only be tested if the first if is false

function elseIf(input) {
  let output
  if(input < 10) {
    output = "first if";
  }
  if (typeof input === "number") {
    output = "else if";
  }
}

the second if will always be evaluated here.

10

For the next person coming here for an answere :heart:

function testSize(num) {
  // Only change code below this line
 if ( num < 5) {
    return "Tiny"
    }
else if (num < 10)  {
  return "Small"
}
else if (num < 15)  {
  return "Medium"
  }
else if (num < 20)  {
  return "Large"
  }
else if (num >= 20)  {
  return "Huge"
  }
  
  return "Change Me";
  // Only change code above this line
}

// Change this value to test
testSize(7);
1 Like
11

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge.

If you want to compare your solution to others, use the Get a hint button on the challenge and there are alternative solutions you can compare yours to. Also, you can probably search older posts using the forum search feature or google the challenge name and find more there.

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

Thank you for understanding.

2 Likes