Javascript - Program the Web
This course covers the basics of programming in Javascript. Work your way through the videos/articles and I'll teach you everything you need to know to make your website more responsive!

If Statements

Lesson 16
Author : Mike Dane
Last Updated : October, 2017


Up to this point in the course we've written some pretty cool programs! But in this lesson I want to introduce you to a concept that will allow our programs to be even more powerful.

If statements are a special structure in JavaScript where we can actually allow our programs to make decisions.

By using an if statement, I could execute certain code when certain conditions are true, and I could execute other code when other conditions are true.

What are they?

Basically, if statements allow our programs to respond to the input that they are given. Depending on the state of the data in the program, JavaScript will be able to respond to it. So when certain data is certain values we can do certain things, and when other data is other values we can do other things.

With if statements, our programs are able to become a lot smarter and we're able to do more things with them (which is always a good thing)!

Now, one of the things you might not realize is that you're already an expert at dealing with if statements. Maybe not so much in JavaScript, but in everyday life.

As you go throughout your day, you're confronted with countless if statements, I've included a few common one's below:

I wake up
If I'm hungry 
  I eat breakfast 

I leave my house
if it's cloudy 
  I bring an umbrella 
otherwise 
  I bring sunglasses 

Im at a restaurant 
if I want meat 
  I order a steak 
otherwise if I want pasta 
  I order spaghetti & meatballs 
otherwise 
  I order a salad. 

Above I've written out three if statements that you might encounter in your everyday life. While these aren't valid JavaScript code, they are very similar to what we'll be looking at when we eventually do get to some code.

If

All if statements are made up of two parts, a boolean expression and an action. Remember that boolean values are just true or false. Boolean expressions therefore are expressions which can be evaluated to either a true or a false value.

  • Albert Einstein was a woman
    • Is a false Boolean expression
  • Abraham Lincoln was president of the United States
    • Is a true Boolean expression

In an If statement a boolean expression acts as a guard. Essentially its guarding a particular piece of code.

So IF the Boolean expression is true, THEN we want to execute the code contained in the statement (the action). Whereas IF the boolean expression is false, THEN we want to skip over the code contained in the expression. The action can be any segment of valid code, and as long as the boolean expression concludes to true, then it will be executed.

So taking for example the first if statement in the previous section:

I wake up
If I'm hungry 
  I eat breakfast 

Here the boolean expression If i'm hungry acts as the boolean guard. Only if this is true will you eat breakfast (i.e. the action).

Why are They Useful?

If statements are useful because they allow a programmer to build a certain level of intelligence and decision making into a program. When writing programs, there’s a bunch of situations where it can be useful to execute certain code when certain conditions are met, and skip over certain code when conditions aren’t met.

As our programs get more complex, we'll be dealing with more and more data, and we'll want to use that data to inform the program on what it should do in certain situations.

If statements are super powerful and common in most programs. This website even, is build with hundreds of if statements (I should know I painstakingly wrote them all).

One of the important learning curves that all new developers have to overcome is to begin thinking in terms of if statements. But don't worry, if this isn't coming super naturally to you right now you'll get the hang of it after some practice.

Else

Now that we’ve learned about IF statements let’s talk about another piece to the puzzle which are called Else statements. An Else statement basically specifies what to do when the if statement returns false.

So IF a condition is false -> do something else. An else can only exist in combination with an if statement. Check out some real world Else statements below

IF the road is open
  drive down it
ELSE
  turn right

IF they have vanilla icecream
  buy me some
ELSE
  buy me chocolate icecream

IF it is 3 oclock
  call me
ELSE
  Text me

Else statements have the same basic concept as if statements, they just allow you to add more logic to the program.

Also notice that an else statement doesn’t have a boolean expression guarding it. That’s because the code inside an else statement is always executed when the boolean expression in the if statement returns false.

If Else

Finally, we can add even more logic into these by utilizing If Else statements. An if else statement is very similar to an if statement, much like an if statement it will check a boolean expression. If that boolean expression is true it will allow some code to be executed.

If else statement's boolean expressions are only evaluated however after all if statements or if else statements before them have evaluated to false.

In the beginning of this lesson we saw an example of an if else in action:

Im at a restaurant 
if I want meat 
  I order a steak 
otherwise if I want pasta 
  I order spaghetti & meatballs 
otherwise 
  I order a salad. 

Notice the if else statement sand-witched in between the initial if statement and the final else statement. Much like the if statement it has a boolean guard, if I want pasta, but this is only checked if the original if statement is false.

JavaScript If Statements

So now that we have a grasp of the basic concepts, lets look at some code! Here's an example of an if statement in JavaScript. Take a look at the video above for more about how all of this comes together!

Copyvar isStudent = false;
var isSmart = false;

if(isStudent && isSmart){
    document.write("You are a student");
} else if(isStudent && !isSmart){
    document.write("You are not a smart student");
} else {
    document.write("You are not a student and not smart");
}
document.write("<br>");

// >, <, >=, <=, !=, ==
if(1 > 3){
    document.write("number comparison was true");
}
document.write("<br>");

if("dog" != "dog"){
    document.write("string comparison was true");
}