Home / Lessons / Conditionals

Conditionals

Conditionals control behavior in JavaScript and determine whether or not pieces of code can run.

if

The most common type of conditional is the if statement, which only runs if the condition enclosed in parentheses () is truthy.

An if statement looks like this:

EXAMPLE

if (10 > 5) {
      var outcome = "10 is greater than 5. This is assigned inside the if block";
}
​
alert(outcome);

OUTPUT

"10 is greater than 5. This is assigned inside the if block"

Here’s what’s happening in the example above

• The keyword if tells JavaScript to start the conditional statement.
• (10 > 5) is the condition to test, which in this case is true — 10 is greater than 5. the > is the greater than operator
• The part contained inside curly braces {} is the block of code to run.

Because the condition passes, the variable outcome is assigned the value "10 is greater than 5. This is assigned inside the if block".

Tip: More information on operators can be found here.

else

You can extend an if statement with an else statement, which adds another block to run when the if conditional doesn’t pass.

EXAMPLE

if ("cat" === "dog") {
      var outcome = "Yes, cat is indeed a dog in steroids";
} else {
      var outcome = "Nope. Just nope.";
}
alert(outcome);

OUTPUT

"Nope. Just nope."

In the example above, "cat" and "dog" are not equal, so the else block runs and the variable outcome gets the value "Nope. Just nope.".

else if

You can also extend an if statement with an else if statement, which adds another conditional with its own block.

EXAMPLE

if (1 === 2) {
      var outcome = "All numbers are equal.";
} else if (100 === (10 * 10)) {
      var outcome = "Congrats on your PhD in Maths!. You are correct. 100 is equal to 10 * 10";
} else {
      var outcome = "I wont be printed anyway. Sigh!";
}

alert(outcome);

OUTPUT

"Congrats on your PhD in Maths!. You are correct."

You can use multiple if else conditionals, but note that the if..else if block runs linearly. JavaScript skips any remaining conditionals after the first one that passes.

EXAMPLE

if (false) {
      var outcome = "I am always false. Go away.";
} else if (true) {
      var outcome = "Guess who is displayed? Meeeee";
} else if (true) {
      var outcome = "This wont be printed";
} else {
      var outcome = "Why do I exist???";
}
​
alert(outcome);

OUTPUT

"Guess who is displayed? Meeeee"

An else if statement doesn’t need a following else statement to work. If none of the if or else if conditions pass, then JavaScript moves forward and doesn’t run any of the conditional blocks of code.

EXAMPLE

if (false) {
      var outcome = "if block";
} else if (false) {
      var outcome = "else if block";
}
​
alert(outcome);

OUTPUT

undefined

Reference: https://www.javascript.com/learn/conditionals

---

Previous: Functions

Next: Loops