IF Statements in JavaScript

Chances are you already have some experience with programming as this blog namely focuses on the Java programming language.

If you have a background in Java, then the structure of the IF statement in JavaScript will look very familiar to you. In fact, it’s identical, so if you feel like reading more about it then by all means feel free, but it will just serve as review.

This article is written for those of you who haven’t a clue how to write an IF statement, and perhaps you’re even confused as to what an IF statement is. If that’s you, then you’re in the right place.

What is an IF Statement

An IF statement is a type of control structure.

Control structures represents the concept of modifying the flow of execution of the code in your program.

So, typically speaking, the code you write will be “executed” by the JavaScript engine from top to bottom and left to right.

This means that if you write 10 lines of code, it will execute each line of code, one by one from line 1 to line 10.

Here’s an example:

console.log("I'm the first line of code");
console.log("I'm the second line of code");
console.log("I'm the third line of code");
console.log("I'm the fourth line of code");
console.log("I'm the fifth line of code");

When you run the above code, it outputs the following:


I'm the first line of code
I'm the second line of code
I'm the third line of code
I'm the fourth line of code
I'm the fifth line of code

So, as you would have expected, you see the output of the five lines of code appearing one by one in proper order. This is because the code is executed from top to bottom.

Now, like I mentioned above, the concept of a control structure is to modify the flow of your code. So it could mess with the default “top to bottom” ordering. Of course, this modification of the flow of code isn’t random, it’s chosen specifically by YOU the programmer. You can use different kinds of control structures to modify the default flow of the code.

So in the case of the IF statement, you can have the JavaScript engine SKIP certain lines of code.

How an IF Statement Works in JavaScript

An IF statement is made up of three main parts.

  1. The if keyword
  2. The condition
  3. The scope

Knowing that you’ll need to use the “if” keyword is hopefully pretty straightforward, so I’ll just fly on by that part and talk about the condition.

An if statement requires you to have a condition, as this is the fundamental aspect of the if statement.

There needs to be some sort of a “question” being asked and answered (the condition). The condition MUST be a true or false (yes or no) question. If the condition is NOT a true or false type of question, then you’ll get an error and your program won’t run properly.

If you’ve structured your condition to be a true or false question, then you must outline the scope of your if statement.

By “scope”, I mean how much of your code will be affected by the if statement. You see, an if statement’s purpose is to SKIP a certain number of lines of code when the condition’s answer is false.

This means that if the question asked inside an if statement results in a false, then the JavaScript engine will skip ALL the code that is contained within the scope of the if statement.

At a minimum you must have one line of code that the if statement can affect, at the maximum, you could put your entire program inside of one if statement… however, this would be a bit silly and not practical.

Alright, so now that we’ve talked about the main aspects of the if statement, let’s talk about syntax.

Syntax of an IF Statement in JavaScript

Let’s assume that we want to modify our previous code and change it so that it will NOT output the first piece of text. In other words, we want it to omit the sentence “I'm the first line of code“. How do we do this?

Well, before we can write our code, we need to determine what our condition is going to be!

In this case, let’s keep things simple and base our condition around the value of a boolean variable called showFirstLine.

So the showFirstLine boolean variable will have either a true or false assigned to it. In our example below, we’ll set it to false (as we want to skip the first line of code):

var showFirstLine = false;
if (showFirstLine == true)
{
  console.log("I'm the first line of code");
}
console.log("I'm the second line of code");
console.log("I'm the third line of code");
console.log("I'm the fourth line of code");
console.log("I'm the fifth line of code");

Alright, so what we see above is that we’ve declared our showFirstLine variable and assigned it the value of false as promised.

Now because the showFirstLine variable is set to false, it will have a “skipping” effect on any conditional statement.

You’ll notice that we refer to the showFirstLine variable inside of our if statement above. We ask the question “is showFirstLine equal to true?” (this is the conditional part of our if statement). Since the answer to this question is false, the JavaScript engine will SKIP the entire scope of the if statement.

The “scope” is measured by the open and closing curly brackets {} in the code snippet above. Do you see how the code console.log("I'm the first line of code"); (on line 4) is “wrapped” inside of the scope of the if statement? This means that the “scope” of the if statement only applies to line 4 of our program above.

Therefore, since the conditional statement (the question) evaluates to false, the JavaScript engine will skip everything inside of the scope and therefore will NOT output the string to the console. The resulting output will be:


I'm the second line of code
I'm the third line of code
I'm the fourth line of code
I'm the fifth line of code

The IF..ELSE Statement in JavaScript

Alright, having seen the basic IF statement, let’s get a bit more advanced and talk about the IF..ELSE statement.

This concept is very common inside of all programming languages.

The IF..ELSE statement was created for those times when you have more than two possible outcomes for a specific question.

So, in the case of our example above, we just had two possibilities for outcomes, true or false. This was the case because we were using a boolean as our variable inside of the if condition.

Now let’s use a variable that has more than one outcome. Let’s use a number!

How about we try to write some code that will only output a single sentence from our example program? Let’s write it so that we have to enter a number (from 1 to 5) that represents which sentence we wish to see.

So if the variable is set to 1, it will output “I’m the first line of code”, if the variable is set to 3 then it will output “I’m the third line of code”.

Make sense?

Let’s have a look at the code:

var lineToShow = 1;

if (lineToShow == 1)
{
  console.log("I'm the first line of code");
}
else if (lineToShow == 2)
{
  console.log("I'm the second line of code");
}
else if (lineToShow == 3)
{
  console.log("I'm the third line of code");
}
else if (lineToShow == 4)
{
  console.log("I'm the fourth line of code");
}
else
{
  console.log("I'm the fifth line of code");
}
console.log("We're done!");

So in the code above, we have a couple of things going on. The first thing to note is that we now have a bunch of if statements, and all of our if statements are asking a question related to the lineToShow variable. And, we also have that last part which doesn’t ask a question, it just says else.

Allow me to tackle the first part of what’s going on here, and it relates directly to code flow.

With an IF..ELSE statement (which really in this case is the IF..ELSE IF..ELSE statement, but that’s just too long to write) the flow of your code will only go into ONE of the scopes of the overall if statement. This is directly related to the fact that we are using the keyword else if (and else) in our overall if statement structure.

This means that once ANY of the conditional statements evaluate to true, it will execute the code within the scope of that if statement, and then then JavaScript engine will skip ALL the rest of the code that pertains to the overall if statement.

In the next section, I’ll be sure to show you a visualization of the code flow so that it’ll make more sense to you.

But before I jump to the visual part of the description of an IF..ELSE statement, I want to talk about the ELSE part of the if statement.

In the event that NONE of the conditions in the overall if statement structure evaluate to true, then the code will automatically flow into the else scope of the if statement.

Having said that, the output for the code above would be:


I'm the first line of code
We're done!

A Visual Look at the IF..ELSE Statement

Because I’m such a visual person, I want to give you an idea of what lines of code will be executed by the JavaScript engine. I’m going to use some yellow highlighting to indicate that the JavaScript engine has traversed over a line of code.

I’ll start with the most recent code snippet:

var lineToShow = 1;

if (lineToShow == 1)
{
console.log(“I’m the first line of code”);
}

else if (lineToShow == 2)
{
console.log(“I’m the second line of code”);
}
else if (lineToShow == 3)
{
console.log(“I’m the third line of code”);
}
else if (lineToShow == 4)
{
console.log(“I’m the fourth line of code”);
}
else
{
console.log(“I’m the fifth line of code”);
}

console.log(“We’re done!”);

So you see that once the JavaScript engine goes into the scope of the first part of the if statement, it exits the overall if structure and doesn’t even try to evaluate any of the ELSE IFs or the ELSE. This is just how the if statement control structure works in terms of the flow of code.

Let’s use another piece of code where we’ll change the lineToShow variable to a different value. Pay attention to the difference in the way the code flows in the following example:

var lineToShow = 3;

if (lineToShow == 1)

{
console.log(“I’m the first line of code”);
}

else if (lineToShow == 2)

{
console.log(“I’m the second line of code”);
}

else if (lineToShow == 3)
{
console.log(“I’m the third line of code”);
}

else if (lineToShow == 4)
{
console.log(“I’m the fourth line of code”);
}
else
{
console.log(“I’m the fifth line of code”);
}

console.log(“We’re done!”);

So you see here how it evaluates but skips the scope of the if statements that correspond to lineToShow == 1 and lineToShow == 2? This is because it the if statements there are evaluating to false, and therefore the JavaScript engine doesn’t go in and execute the code inside of their respective scopes.

Okay, let’s look at one last example. I’m going to change the value of lineToShow to be something other than 1 through 4:

var lineToShow = 53;

if (lineToShow == 1)

{
console.log(“I’m the first line of code”);
}

else if (lineToShow == 2)

{
console.log(“I’m the second line of code”);
}

else if (lineToShow == 3)

{
console.log(“I’m the third line of code”);
}

else if (lineToShow == 4)

{
console.log(“I’m the fourth line of code”);
}

else
{
console.log(“I’m the fifth line of code”);
}
console.log(“We’re done!”);

Voila! You see that the JavaScript engine has to go through and evaluate EACH of the IF..ELSE IF statements and finally (since they’re all false) it goes into the ELSE scope and executes that code, then exits.

Hopefully the visual breakdown here has helped you better understand how the IF..ELSE statement structure works.

In Summary

IF statements are extremely common in the programming landscape, and the JavaScript language is no exception to that rule.

If you’re having trouble understanding how this stuff works, please feel free to leave a comment below and ask me a question, I’ll answer it ASAP.

And I’d also suggest you enter your email address below, you’ll get a cool “goodie” delivered directly (and instantly) to your inbox.