if statement - JavaScript

Summary

if statement:

if (condition) {

}

Details

An if statement allows you to check if a condition is true or false. If it’s true, then the computer will execute a certain block of code. If it’s false, it will skip that section of code.

To create an if statement, first write the word if:

if

Then add a pair of parentheses:

if ()

Then add a space and an opening curly brace, a blank new line, and then the closing curly brace:

if () {
  
}

Then you can add the condition to test inside the parentheses. The condition usually has a comparison operator that is used to compare 2 values. In this example we’re using the greater than operator. You’ll learn about other comparison operators in a later lesson.

if (1 > 0) {
  
}

Finally, you put the code you want to run if the condition is true inside of the curly braces. The code is usually indented one level from the if keyword to indicate that it’s inside of the if statement.

if (1 > 0) {
  console.log("The condition is true");
}

In the example above, the statement “The condition is true” would print out because 1 is greater than 0. If the condition was checking if 0 is greater than 1, then nothing would print out, since that statement is false.

if (0 > 1) {
  console.log("Nothing will print out in this example");
}

You can have more than one line inside the curly braces. The example below prints out a second statement in the console.

if (1 > 0) {
  console.log("The condition is true");
  console.log("Here is a second statement");
}

Multiple if statements

You can have more than one if statement in your JavaScript file. They can be placed one right after the other, or other code can be placed between them, depending on what you’re trying to do.

if (1 > 0) {
  console.log("The condition is true");
}
// Other code can go here...
if (2 > 1) {
  console.log("This condition is also true");
}

Realistic example

In the above examples we’re comparing two numbers directly. However, that’s not very realistic, since the statement will always be true or always be false depending on the numbers. A more realistic example would be to compare a number stored inside a variable to a raw number or to another variable. A variable can store different numbers, so the condition might be true or false depending on the number inside it.

Here’s an example comparing one variable to a number.

let a = 1;
if (a > 0) {
  console.log("The condition is true");
}

Here’s an example comparing two variables to each other.

let a = 1;
let b = 0;
if (a > b) {
  console.log("The condition is true");
}

Demo

Exercises

Try the following statements in the console:

if (1 > 0) {
  console.log('The condition is true');
}

if (1 < 0) {
  console.log('The condition is true');
}

The output from the first if statement will be “The condition is true”. The second if statement will not produce any output (except undefined).

References

if…else statement on MDN

if statement – JavaScript