Skip to Content

Advertisement

You (Level 0)
0% Complete
Last Badge Earned
None

If your new to programming, this will be a great tutorial for the fundamentals of programming logic. An if statement is one of a few ways to do something when a condition is set. It helps control the flow of your coding logic.

In English:

If you are thirsty, take a drink.

We are just going to assume that from now that the code in the examples are embedded in the <script> tags that are in the body of an HTML document.

Example var thirsty = true;
var drank = false;
if(thirsty == true) //notice the ==
{
drank = true;
document.write(drank);
}
Result
true

The == is one of the comparison operators. It is not the same as = that sets a variable or property equal to something. Since, the variable thirsty does equal true the if is executed. If the statement would have said if(thirsty == false), drank would not have been set to true.

Example var x = 7;
if(x===7)
{
//this would be executed
}
if(x==="7")
{
//this would not be executed because === is a strict operator that makes sure that the variable is set to the correct value and type of the conditional variable. The conditional variable here is is "7"
}
if(x!=8)
{
//this would be executed because != means that the variable is not equal to the conditional variable
}
if(x>8)
{
//Since 7 is not greater 8, this would not be executed
}
if(x<8)
{
//Since 8 greater 7, this would be executed
}
if(x>=7)
{
//Since 7 is equal 7, this would be executed
}
if(x<=6)
{
//Since 7 is not less than or equal to 6 this would not be executed
}

The comparison operators are extremely useful, but they are not just restricted to integers. For example, if(x == "example") would return false, since 7 is not equal to the string "example".

Example var x = 7;
if(x>=6 && x<=8)
{
//Since 7 is greater than 6 and is less than 8, this statement would be executed
}
if(x==7 || x>=8)
{
//This if statement says if x is equal to 7 or if x is greater than 8, then execute this statement. While x is not greater than 8, x is equal to 7; therefore, it will execute the statement.
}
if(!(x==6))
{
//Since x is equal to 7 and we are checking if that statement is false, this statement would be executed.
}

If statements can be just as simple as the examples above, but they can also be more useful when you combine the if statements with else if and else.

Example var x = 6;
if(x == 8)
{
x++;
document.write("if(x = 8) and now x = " + x);//This would not be executed because x is not equal to 8
}
else if (x == 7)
{
x = 4;
document.write("else if (x = 7) and now x = " + x);//This would not be executed because x is not equal to 7
}
else
{
x = 20;
document.write("else and now x = " + x);//This would be executed because the other conditionals were not met
}
Result
else and now x = 20

You might be asking yourself, "What is the point in an else if statement?" Well consider the following examples

Example var x = 8;
if(x == 8)
{
x++;
document.write("if(x = 8) and now x = " + x);//This statement would be executed because x is equal to 8
}
if (x == 7)
{
x = 4;
document.write("else if (x = 7) and now x = " + x);//This statement would not be executed because x is not equal to 7
}
else
{
x = 20;
document.write("else and now x = " + x);//This statement would be executed because the other conditionals were not met
}
Result
if(x = 8) and now x = 9
else and now x = 20

Why did the if(x == 8) and the else both execute their statements? It is best to think of ifs as completely separate conditionals, but else if and else build off whichever if they follow. So, if you had an if statement that was following by and another if statement, the first if statement would be separate from the second if statement just like the example above. However, the second if statement in the example above, has an else built onto it. Since the first if statement's condition is satisfied, it executes its statements. The second if statement's condition is not satisfied, but its built on else statement's condition is satisfied. Therefore, x is incremented in the first conditional, and "if(x = 8) and now x = " + x is displayed on the screen. Also, we have the second if's else that sets x equal to 20, and "else and now x = " + x is displayed on the screen.

References

I've attached my favorite JavaScript and jQuery book. I would encourage you to read it as well.

Your code will execute in this window.



Let's explore some more tutorials or topics!

Next Tutorial Previous Tutorial

Advertisement

If you enjoyed this resource, support me by sharing this page with others.

Comment on

Show Comments
  • User

    YogiBuddhaTao69 Nov. 2, 2014, 2:33 p.m.

    document.write("Hi") //I like titties, but no one knows. :)

  • User

    Jess SWT July 9, 2014, 5:26 a.m.

    Hai everyone, Great work this website, I have worked through the Python tutorials and are now busy with JavaScript and I cannot deny I like the points and badge system ;). Just a side node on this tutorial about if statements in JavaScript. According to Douglas Crockford's &quot;JavaScript: The Good Parts&quot; (2008, O'Reilly) the == and != operators are not part of the good parts of JavaScript and Mr. Crockford encourages the use of the === and the !== operators instead as they are &quot;type sensitive&quot; (that's my own terminology there) and the outcome is easier to predict. In larger projects, this could prevent bugs. Greetings!

  • User

    Stephen D March 6, 2014, 3:39 p.m.

    else and now x = 20 did not print when I ran the code.

  • User

    grant June 11, 2013, 7:35 p.m.

    Last example.. comment after first if statement is incorrect.. I believe the statement WOULD BE executed.

  • User

    Jared Drake March 28, 2013, 2:45 p.m.

    @Jason Thanks for the post. That is actually an error, and I just corrected it.



Advertisement