JavaScript if Statement

Table of Contents +

In the previous lesson, we learned how to safely read nested values with optional chaining. Now let’s start controlling the flow of our programs, beginning with the if statement that runs code only when a condition is true.

🚦 What is an if Statement?

An if statement runs a block of code only when a condition is true. If the condition is false, JavaScript skips the block and moves on. This is how our programs make decisions.

if-statement.js
if (condition) {
  // this code runs only when condition is true
}

This is the basic shape of every if statement:

  • The keyword if starts the statement.
  • condition goes inside the parentheses ( ) and must evaluate to true or false.
  • The code to run goes inside the curly braces { }, and JavaScript runs it only when the condition is true.

🧠 How the Condition Works

The condition is any expression that evaluates to true or false. We usually build it with the comparison operators we learned earlier, such as >=, ===, and <.

Condition Meaning Result
age >= 18 Is age at least 18? true or false
name === "Alex" Is name exactly “Alex”? true or false
total < 50 Is total below 50? true or false

👤 A Simple Example

Let’s check whether a person is old enough to vote.

if-statement.js
const age = 20;


if (age >= 18) {
  console.log("You can vote!");
}

Let’s walk through what each line does:

  • The first line stores 20 in a variable named age.
  • The if line asks age >= 18, which is true because 20 is at least 18.
  • Since the condition is true, JavaScript runs the block and prints You can vote!.

If we set age to 15, the condition is false, the block is skipped, and nothing prints.

🛒 A Practical Example

Let’s use an if statement to give free shipping when a cart total is high enough.

if-statement.js
const cartTotal = 75;


if (cartTotal >= 50) {
  console.log("You qualify for free shipping!");
}

The store sets a rule: orders of 50 or more ship for free. Here’s how the code applies that rule:

  • The first line stores the order amount, 75, in cartTotal.
  • The if line checks cartTotal >= 50, which is true because 75 is more than 50.
  • The block runs, so the customer sees the free shipping message.

This is the same pattern we use for discounts, access checks, and form validation.

✨ Truthy and Falsy Conditions

The condition does not have to be a comparison. JavaScript checks whether the value is “truthy” or “falsy”, which means whether it acts like true or false. We covered this idea with the logical operators.

if-statement.js
const username = "Sam";


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

Here’s what happens line by line:

  • The first line stores the string "Sam" in username.
  • The if line uses username directly as the condition, with no comparison operator.
  • A non-empty string is truthy, so the block runs and prints Welcome, Sam.

Values like 0, "", null, and undefined are falsy, so they would skip the block.

Falsy values to remember

false, 0, "" (empty string), null, undefined, and NaN are all falsy. Everything else is truthy.

⚠️ Common Mistakes to Avoid

Mistake Problem Solution
Using = instead of === if (age = 18) assigns instead of comparing Use === to compare: if (age === 18)
Forgetting the curly braces Only the next line is tied to the if Always wrap the block in { }
Semicolon right after if (...) if (x > 0); ends the statement early Never put ; before the { } block

Compare, don't assign

A single = assigns a value, while === compares values. Using = inside an if condition is a classic bug that makes the condition almost always run.

🔧 Try It Yourself!

  1. Create an age variable and use an if statement to print a message when age >= 18.
  2. Create a cartTotal variable and print a free shipping message when it is 50 or more.
  3. Store a name in a variable and use a truthy check to greet the user only when the name is not empty.
  4. Change your numbers so the conditions become false, then run the code and confirm nothing prints.

🧩 What You’ve Learned

  • ✅ An if statement runs a block only when its condition is true
  • ✅ The syntax is if (condition) { ... }
  • ✅ Conditions usually use comparison operators like >= and ===
  • ✅ Conditions can also rely on truthy and falsy values
  • ✅ Watch out for = vs ===, missing braces, and a stray semicolon after if (...)

🚀 What’s Next?

Now that we can run code when a condition is true, let’s learn how to handle the false case too. Let’s continue to if else.

Previous Optional Chaining Next JavaScript if else

Share & Connect

Share on LinkedIn