JavaScript If Statements (with Examples)

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

If you use any of the content on this page in your own work, please use the code below to cite this page as the source of the content.

3 thoughts on “If Statements”

YogiBuddhaTao69
November 2, 2014 at 2:33 pm
document.write(“Hi”) //I like titties, but no one knows. 🙂
Log in to Reply
Jess SWT
July 9, 2014 at 5:26 am
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 "JavaScript: The Good Parts" (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 "type sensitive" (that’s my own terminology there) and the outcome is easier to predict. In larger projects, this could prevent bugs.
Greetings!
Log in to Reply
Stephen D
March 6, 2014 at 3:39 pm
else and now x = 20 did not print when I ran the code.
Log in to Reply

If Statements

Link/cite this page

3 thoughts on “If Statements”

Leave a Comment Cancel reply