Basic JavaScript if vs. else if

Question

My question is this: I'm new to JavaScript, I am trying to understand the difference between the " if { " and " else if { " statements. Thus far the only answers I have found are related to someone inheriting my code later, obviously no one is ever going to inherit my class project! My question specifically is this:

I am doing the rock paper scissor game project on codecademy. My Math.random() method produces 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. 

In its suggestion however it used the else if statement. My specific question is in either situation I essentially set a low range and a high range, leaving else to represent the middle. Else means not the previous condition. But if my condition for a second if already logically excludes the previous answer (which would have to be logically excluded in the else if alternative anyway) what exactly is the difference and why use else if/ when would else if be necessary?

My code follows:

Option one (else 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's):

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

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

Consider how your second case (without else if) would work if computerChoice is 0.25. The first if condition would evaluate to true and computerChoice would be reassigned to "rock." Instead of considering itself done, however, the logic would then proceed, and check to see if computerChoice >= 0.67. Since computerChoice is now "rock," the interpreter will attempt to convert it to a numeric value. Since rock won't convert, my guess is your logic will, for now, work as intended.

However, consider a situation where you decide to define your entities -- rocks, paper, and scissors -- as an object, and to use the index of that object as the output of your 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 instead to use its ID. In that case, your first if would assign the value of 1 to computerChoice -- and then the second if would check to see if 1 >= 0.67. As a result, your code would (quite innocently) pick paper 100% of the time, confounding you greatly for a short while.

Moral of the story: unnecessary evaluation will never help you and may hurt you.