This article was originally written for DigitalOcean.

Introduction

In programming, there will be many occasions in which you will want different blocks of code to run depending on user input or other factors. As an example, you might want a form to submit if each field is filled out properly, but you might want to prevent that form from submitting if some required fields are missing. In order to achieve tasks like these we have conditional statements, which are an integral part of all programming languages. Conditional statements execute a specific action based on the results of an outcome of true or false.

A few examples of JavaScript conditional statements you might see:

  • Check location of user and display correct language based on country
  • Send form on submit, or display warnings next to missing required fields
  • Open dropdown on click event, or close dropdown if it is already open
  • Display an alcohol purveyor's website if user is over the legal drinking age
  • Display booking form for a hotel unless the hotel is booked

Conditional statements are also known as logic, or decision making. You can compare a conditional statement to a "Choose Your Own Adventure" book, or a flowchart. In this article, we will go over logical operators, which are commonly used with conditional statements, and the if, else, and else if keywords. We will also cover the ternary operator.

Logical Operators

Before learning about if and else statements, it is important to learn about logical operators. There are three logical operators that are typically used with conditional statements. These operators are AND (&&), OR (||), and NOT (!).

Below is a table summarizing the logical operators.

| Operator | Syntax | Description | | -------- | ------ | ------------------------------------------ | --- | ------------------------------------------ | | AND | && | Returns true if both operands are true | | OR | | | | Returns true if either operand is true | | NOT | ! | Returns true if operand is false |

AND

The AND operator is represented by two ampersands (&&) and will return true if the operands to the left and right are two. We can check if something is both high quality and has a low price.

// High quality and low price are true
const highQuality = true
const lowPrice = true

highQuality && lowPrice
true

Since both variables are true, the AND operation within the parentheses returns true.

OR

The OR operator is represented by two pipes (||) and will return true if one of the operands is true. Here we will check if something is either highQuality or lowPrice.

// Only low price is true
const highQuality = false
const lowPrice = true

highQuality && lowPrice
true

Since one of the two conditions (highQuality or lowPrice) was true, the whole operation returns true.

NOT

The NOT operator is represented by an exclamation point (!) and will return true if the operand is false.

const highQuality = true

!highQuality
false

In the above statement, highQuality is true. With the NOT operator, we are checking to see if hiqhQuality is false. If it were false, the output would return true, but since it's true, the output returns false.

The NOT operator is a bit tricky to understand at first. The important part to remember is that NOT checks if something is false.

if Statement

The most fundamental of the conditional statements is the if statement. An if statement will evaluate if a statement is true or false, and only run if the statement returns true. The code block will be ignored in the case of a false result, and the program will skip to the next section.

An if statement is written with the if keyword, followed by a condition in parentheses, with the code to be executed in between curly brackets. In short, it can be written as if () {}.

Here is a longer examination of the basic if statement.

if (condition) {
  // code that will execute if condition is true
}

The contents of an if statement are indented, and the curly brackets containing the block of code to run do not end in a semicolon, just like a function block.

As an example, we can pretend we have a shopping app. You have desposited a certain amount of funds into your account, and you would like to buy an item from the store.

// Set balance and price of item
const balance = 500
const jeans = 40

// Check if there is enough funds to purchase item
if (jeans <= balance) {
  console.log('You have enough money to purchase the item!')
}
You have enough money to purchase the item!

We have an account balance of 500, and want to buy a pair of jeans for 40. Using the less than or equal to operator, we can check if the price of jeans is less than or equal to the amount of funds we have. Since jeans <= balance evaluates to true, the condition will pass and the block of code will run.

In a new example, we will create a new shop item that costs more than the available balance.

// Set balance and price of item
const balance = 500
const phone = 600

// Check if there is enough funds to purchase item
if (phone <= balance) {
  console.log('You have enough money to purchase the item!')
}

This example will have no output, since phone <= balance evaluates to false. The code block will simply be ignored, and the program will proceed to the next line.

else Statement

With if statements, we only execute code when a statement evaluates to true, but often we will want something else to happen if the condition fails. For example, we might want to display a message telling the user which fields were filled out correctly if a form did not submit properly. In this case, we would utilize the else statement, which is the code that will execute if the original condition does not succeed.

The else statement is written after the if statement, and it has no condition in parentheses. Here is the syntax for a basic if...else statement.

if (condition) {
  // code that will execute if condition is true
} else {
  // code that will execute if condition is false
}

Using the same example as above, we can add a message to display if the funds in the account are too low.

// Set balance and price of item
const balance = 500
const phone = 600

// Check if there is enough funds to purchase item
if (phone <= balance) {
  console.log('You have enough money to purchase the item!')
} else {
  console.log(
    'You do not have enough money in your account to purchase this item.'
  )
}
You do not have enough money in your account to purchase this item.

Since the if condition did not succeed, the code moves on to what's in the else statement. This can be very useful for showing warnings, or letting the user know what actions to take to move forward. Usually an action will be required on both success and failure, so if...else is more common than a solo if statement.

else if Statement

With if and else, we can run blocks of code depending on whether a condition is true or false. However, sometimes we might have multiple possible conditions and outputs, and need more than simply two options. One way to do this is with the else if statement, which can evaluate more than two possible outcomes.

Here is a basic example of block of code that contains an if statement, multiple else if statements, and an else statement in case none of the conditions evaluated to true.

if (condition a) {
	// code that will execute if condition a is true
} else if (condition b) {
	// code that will execute if condition b is true
} else if (condition c) {
	// code that will execute if condition c is true
} else {
	// code that will execute if condition is false
}

JavaScript will attempt to run all the statements in order, and if none of them are successful, it will default to the else block. You can have as many else if statements as necessary. In the case of many else if statements, the switch statement might be preferred for readability. Read about switch on the Mozilla Developer Network.

As an example of multiple else if statements, we can create a simple grading app that will output a letter grade based on a score out of 100.

The requirements of this app are as follows:

  • A score of 90 and above is an A
  • A score of 80 to 89 is a B
  • A score of 70 to 79 is a C
  • A score of 60 to 69 is a D
  • Any score of 59 or below is an F

Below we will create a simple set of if, else, and else if statements, and test them against a given grade.

// Set the current grade of the student
let grade = 87

// Check if it is an A, B, C, D, or failing grade
if (grade >= 90) {
  console.log('A')
} else if (grade >= 80) {
  console.log('B')
} else if (grade >= 70) {
  console.log('C')
} else if (grade >= 60) {
  console.log('D')
} else {
  console.log('F')
}
B

In our example, we first check for the highest score, which will be greater than or equal to 90. After that, the else if statements will check for greater than 80, 70, and 60 until it reaches the default else of a failing grade.

Although our grade value of 87 is technically also true for C, D and F, the statements will stop at the first one that is successful. Therefore, we get an output of B, which is the first match.

Ternary Operator

The ternary operator, also known as the conditional operator, is used as shorthand for an if...else statement.

A ternary operator is written with the syntax of a question mark (?) followed by a colon (:), as demonstrated below.

(condition) ? expression on true : expression on false

In the above statement, the condition is written first, followed by a ?. The first expression will execute on true, and the second expression will execute on false. It is very similar to an if...else statement, with more compact syntax.

In this example, we will create a program that checks if a user is 21 or older. If they are, it will print "You may enter" to the console. If they are not, it will print "Sorry, you are not old enough to enter." to the console.

// Set age of user
let age = 20

// Place result of ternary operation in a variable
const oldEnough =
  age >= 21 ? 'You may enter.' : 'Sorry, you are not old enough to enter.'

// Print output
oldEnough
'Sorry, you are not old enough to enter.'

Since the age of the user was less than 21, the fail message was output to the console. The if...else equivalent to this would be "You may enter." in the if statement, and "Sorry, you are not old enough to enter." in the else statement.

To learn more, read the documentation on the ternary operator.

Conclusion

Conditional statements give us logic we can use to control the output of our programs. They are one of the foundational building blocks of programming, and can be found in virutally all programming languages.

In this article, we learned about logical operators, which are operators frequently used with conditional statements, as well as how to use the if, else, and else if keywords. Finally, we covered nesting and use of the ternary operator. For a more indepth look at conditional statements, read about if...else on the Mozilla Developer Network.