Basic JavaScript if vs. else if

Question

My question is this: I'm new to JavaScript, I'm trying to understand the difference between if if and else expressions. So far, the only answers I have found are related to who inherits my code later, it is obvious that no one will ever inherit my cool project! My question is specifically this:

I am doing a project of a game with stone paper scissors on codecademy. My Math.random () method creates a random number. I first implemented my code if (computerChoice <= 0.33) {

and its alternative as:

if (computerChoice > 0.67){...... Which checked out and produced a viable answer. 

On his assumption, however, he used the else if statement. My specific question is that in any situation, I essentially set the low range and high range, leaving it differently to represent the middle. Else means no previous condition. But if my condition is for the second, if it already logically excludes the previous answer (which should be logically excluded in else, if the alternative is anyway), what exactly is the difference and why use else if / when else if if needed?

My code is:

Option one (even if):

 var userChoice = prompt("do you want rock paper or scissors?"); var computerChoice = Math.random(); if (computerChoice <= 0.33){ computerChoice = "rock"; } else if (computerChoice >= 0.67){ computerChoice = "scissors"; } else { computerChoice = "paper"; } console.log(computerChoice); 

Option two (2 if):

 var userChoice = prompt("do you want rock paper or scissors?"); var computerChoice = Math.random(); if (computerChoice <= 0.33){ computerChoice = "rock"; } if (computerChoice >= 0.67){ computerChoice = "scissors"; } else { computerChoice = "paper"; } console.log(computerChoice); 

Answer 1

The if-else if-else logic is more elegant than your second example because it will stop evaluating conditional expressions after the correct assignment has been made.

Consider how your second case (without else if) will work if computerChoice is 0.25. The first if condition will be evaluated as true, and computerChoice will be reassigned to rock. However, instead of considering itself complete, the logic will continue and check to see if computerChoice> = 0.67. Since computerChoice is now rock, the interpreter will try to convert it to a numeric value. Since rock cannot be converted, my guess is your logic, at the moment, is working as intended.

However, consider the situation when you decide to define your entities - stones, paper and scissors - as an object and use the index of this object as the result of processing. For instance:

 var myentities = { 1: { name: "rock", image_url: "..." }, 2: { name: "paper", image_url: "..." }, 3: { name: "scissors", image_url: "..." } }; 

And suppose you also decide to stop using the name of the object, but use its ID instead. In this case, your first if you will assign a value of 1 to computerChoice, and then the second, if you will check, 1> = 0.67. As a result, your code (quite innocently) selects paper in 100% of cases, a little embarrassing to you.

The moral of the story: an unnecessary assessment will never help you and may harm you.

Answer 2

If you check different conditions of the same variable (or something like that), then else if is faster. If it meets the condition, it is executed, and then executed in the instruction. A whole group of if statements means that the code must go through each of them, regardless of whether it finds the first true or not. Keep in mind that if "else if", you should only look for one of the conditions to match. If you want to still check something after that, it should be a different "if" expression.

Answer 3

But if my condition is for the second, if it already logically excludes the previous answer (which should have been logically excluded in else, if there is an alternative anyway), what exactly is the difference and why use else if / when there would be more, if necessary ?

=> No, however the else statement enforces it if you make a mistake in your "logical exception".

Even if this is a little beyond your question, it’s also worth noting that there is no “else if” construct in JavaScript. When you write:

 if (...) { } else if (...) { } 

what do you basically do:

 if (...) { } else { if (...) { } } 

it works because you can either pass any expression after the else keyword. See http://www.ecma-international.org/ecma-262/5.1/#sec-12.5 :-)

Update 1

 if (weight <= 130) { fighter = "lightweight"; } else if (weight >= 205) { fighter = "heavyweight"; } else { fighter = "middleweight"; } 

which in javascript is equivalent:

 if (weight <= 130) { fighter = "lightweight"; } else { if (weight >= 205) { fighter = "heavyweight"; } else { fighter = "middleweight"; } } 

Update 2

In the original post, Option 2, you will do:

 if (computerChoice <= 0.33){ computerChoice = "rock"; } if (computerChoice >= 0.67){ computerChoice = "scissors"; } else { computerChoice = "paper"; } 

If the value of computerChoice is <= 0.33, then the following will happen:

 if (0.33 <= 0.33) ... // => computerChoice = "rock" if ("rock" >= 0.67) ... else [THE ELSE PART IS EXECUTED!] 

Thus, basically computerChoice will be a "paper" at any time when it should be a "rock". You will have “paper” 67% of the time, and “scissors” - in 33% of cases! This is due to the fact that Javascript does not throw an error when trying to compare values ​​of different types (for example, here a string, "rock" and the number "0.67", instead it tries to convert values ​​of the same type using magic ( http://webreflection.blogspot.be/2010/10/javascript-coercion-demystified.html ) and then gladly say “false!” As a math, I could probably scare you by saying that because beyond these enforcement rules, you can prove in javascript that true = false ...

PS: I just noticed that Kevin Nielsen explained this higher than me. Here you go!