Understanding JavaScript if conditional branching

An if control structure in JavaScript only executes when its condition evaluates to a true outcome.

Take for example the following conditions:

if(true){ console.log("eureka");}
// prints eureka because it is true
if(3 === 3){ console.log("eureka");}
// prints eureka because it is true
if(3 === 4){ console.log("eureka");}
// no output was printed because it is NOT true
if(false){ console.log("eureka");}
// no output was printed because false is not true
if(!false){ console.log("eureka");}
// prints eureka because not false is true.

So in summa, in order for an if control structure to execute its first output, the condition must always be true, never false.

Take the following three examples:

var x = "something";
if(x){ console.log("eureka");}
// it prints eureka because x has a value
// and its value is true (not zero or null)
if(!x){ console.log("eureka");}
// no output because x has value and
//therefore the condition does not apply making it false.

Now change x to zero:

x = 0;
if(!x){ console.log("eureka");}
// now it prints eureka because !x
// became a true statement

Here, since x is zero and zero is a Boolean false, a !x means “is x zero?” and since the answer to the question is yes, and therefore it is a true answer to the conditional question, the result is true and so it executes the script.

On the other hand the following will not execute:

if(x){ console.log("eureka");}
// will not print because it is false,
//or not true since x is zero.

Just to be sure we understand, what about this statement?

if(x === 0){ console.log("eureka");}

In the above case the statement is true and therefore eureka is printed. It doesn’t matter that x is zero, what maters is the answer to the question. Is the answer true or false? Is x zero? yes, that is true.

What about the optional else?

The else on the other hand is a catch all option. When the if conditional statement is false we can apply an else to catch the result by giving the condition an alternate execution. That’s why else should not have conditions attached to it since it is the alternative option that catches all else.

When we want to state a second or third condition then, instead of else, we need to apply an else if + its condition.

Why else if and not just another if? Because when we code another if by itself we are breaking the first if structure and starting another structure. Many times it doesn’t matter, but for the most part, we don’t want to get two possible answers within the same structure. An else if will force JavaScript to pick the first true outcome because both true outcomes are related and not independent of each other, and the first to be found wins.

Take for example this script:

var y = 5;
if(y > 4){ console.log("bananas");
} if (y > 3){ console.log("apples");
} else { console.log("grapes");
}

It outputs both bananas and apples. This may possibly be what we want to accomplish and in that case it is ok. However we need to know the difference between an if and a else if.

Notice the output on the next script:

var y = 5;
if(y > 4){ console.log("bananas");
} else if (y > 3){ console.log("apples");
} else { console.log("grapes");
}

It only outputs bananas. No apples were outputted because JavaScript exited the script as soon as it spotted the first keyword else since it already had a satisfying answer which was the first true condition it found.

Hope this helps!

Advertisements

Author: tarau

technical writer, web technologies

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s