JavaScript If

The if statement runs a block of code only when a condition is true. It is the most basic decision-making tool in JavaScript, and nearly every program uses it. Without it, code can only do the same thing every time; with it, code can react.

// Syntax

if (condition) {
  // block of code to run if the condition is true
}

Three parts, and all three matter:

• The keyword if, in lowercase. If or IF is a SyntaxError
• The condition, inside parentheses ( )
• The block to run, inside curly braces { }

let temperature = 35;

if (temperature > 30) {
  console.log("It is hot outside");
}
console.log("Have a nice day");

If temperature were 25, the condition would be false, the block would be skipped entirely, and only Have a nice day would print. Code after the if always runs either way.

// Setting a Value with if

A very common pattern: give a variable a default value, then use if to change it when a condition is met.

let age = 18;
let text = "You can not drive";    // the default

if (age >= 18) {
  text = "You can drive";             // only replaced if true
}
console.log(text);

Change age to 16 and the if block is skipped, so text keeps its default and logs You can not drive.

// The Condition

The condition can be any expression. JavaScript works it out, and if the answer is true, the block runs. Comparison operators are the most common way to write one:

let score = 88;

if (score >= 90) { console.log("A"); }
if (score >= 80) { console.log("B"); }
if (score >= 70) { console.log("C"); }

// Truthy and Falsy Conditions

The condition does not have to be a boolean. JavaScript converts any value to true or false when it is used as a condition. Values that count as false are called falsy, and there are exactly eight:

false   0   -0   0n   ""   null   undefined   NaN

Everything else is truthy: any non-zero number, any non-empty string (even "0" and "false"), and every array and object. This makes a handy check for "does this have a value?":

let username = "Alex";

if (username) {
  console.log("Welcome, " + username);
}

Set username to "" (an empty string, perhaps a blank form box) and nothing prints, because "" is falsy. The full truthy/falsy rules are in JS Booleans.

// Nested if

You can put an if statement inside another if block. The inner one is only checked when the outer one is true:

let age = 16;
let country = "USA";
let text = "You can not drive!";

if (country === "USA") {
  if (age >= 16) {
    text = "You can drive!";
  }
}
console.log(text);

Nested if statements get hard to follow quickly. When the inner if is the only thing inside the outer one, the logical AND operator && ("both must be true") says the same thing in one line:

if (country === "USA" && age >= 16) {
  text = "You can drive!";
}

&& gets its full lesson in JS Logical.

// Always Use Braces

If the block is a single statement, the braces are technically optional. Use them anyway. Here is why:

let score = 40;

if (score > 50)
  console.log("pass");
  console.log("well done");    // added later, looks like it's inside

Without braces, only the first statement belongs to the if. The indentation makes "well done" look like part of it, but JavaScript ignores indentation, so it runs every time, even for a failing score. With braces around both lines, nothing would print.

// Quick Check

let item = "0";
if (item) {
  console.log("has a value");
}
console.log("done");

let lives = 3;
if (lives = 0) {
  console.log("Game Over");
}

// Try It

▶ Open Playground

1. Click Open Playground. Write an if that logs "high" when num is greater than 100. Test it with 150, then 50
2. Use the default-then-change pattern: let msg = "closed"; then an if that sets it to "open" when hour is at least 9. Log msg
3. Rewrite the nested USA / age example with && and confirm it gives the same answer for ages 15 and 17
4. Recreate the missing-braces bug with a score of 40. Then add braces and confirm the second line stops printing