Why If statement in Javascript? - Purpose & Use Cases

The Big Idea

What if your program could think and decide like you do in everyday life?

The Scenario

Imagine you are sorting mail by hand, deciding which letters go to which person based on their address. You have to check each letter carefully and place it in the right pile.

The Problem

Doing this by hand is slow and easy to mess up. You might put a letter in the wrong pile or forget to check some letters. It takes a lot of time and focus.

The Solution

The if statement in programming helps you make decisions automatically. It checks conditions and runs the right code, just like sorting letters quickly and correctly without mistakes.

Before vs After

✗ Before

let age = 20;
if (age >= 18) {
  console.log('Adult');
} else {
  console.log('Minor');
}

✓ After

let age = 20;
console.log(age >= 18 ? 'Adult' : 'Minor');

What It Enables

It lets your program choose different paths and actions based on real-time information, making it smart and flexible.

Real Life Example

Think of a traffic light system that changes colors based on time and traffic. The if statement helps decide when to switch lights to keep cars moving safely.

Key Takeaways

If statements help programs make choices.

They save time and reduce mistakes compared to manual checking.

They make your code smart and responsive to different situations.

Practice

1. What does an if statement do in JavaScript?

easy

A. Declares a variable

B. Repeats code multiple times

C. Defines a new function

D. Runs code only if a condition is true

Solution

1. Step 1: Understand the purpose of an if statement

   An if statement checks a condition and runs code only when that condition is true.

2. Step 2: Compare options with the definition

   Only Runs code only if a condition is true matches this behavior exactly.

3. Final Answer:

   Runs code only if a condition is true -> Option D

4. Quick Check:

   If statement = runs code if true [OK]

Hint: If it runs code only when true, it's an if statement [OK]

Common Mistakes:

• Confusing if with loops
• Thinking if declares variables
• Mixing if with function definitions

2. Which of the following is the correct syntax for an if statement in JavaScript?

easy

A. if condition { console.log('Yes'); }

B. if (condition) console.log('Yes');

C. if condition: console.log('Yes');

D. if (condition) then { console.log('Yes'); }

Solution

1. Step 1: Recall JavaScript if syntax

   The condition must be inside parentheses, and the code block can be inside curly braces or a single statement without braces.

2. Step 2: Check each option

   if (condition) console.log('Yes'); correctly uses parentheses around the condition and a statement without braces.

3. Final Answer:

   if (condition) console.log('Yes'); -> Option B

4. Quick Check:

   Parentheses around condition = correct syntax [OK]

Hint: Condition must be in parentheses for if [OK]

Common Mistakes:

• Omitting parentheses around condition
• Using colons instead of braces
• Adding 'then' keyword (not in JS)

3. What will be the output of this code?

let x = 10;
if (x > 5) {
  console.log('Big');
} else {
  console.log('Small');
}

medium

A. Small

B. 10

C. Big

D. No output

Solution

1. Step 1: Evaluate the condition x > 5

   Since x is 10, which is greater than 5, the condition is true.

2. Step 2: Determine which block runs

   The if block runs and prints 'Big'. The else block is skipped.

3. Final Answer:

   Big -> Option C

4. Quick Check:

   10 > 5 is true, so output is 'Big' [OK]

Hint: Check if condition is true to pick output [OK]

Common Mistakes:

• Choosing else output when condition is true
• Confusing variable value with output
• Ignoring else block

4. Find the error in this code:

if x == 5 {
  console.log('Equal');
}

medium

A. Missing parentheses around condition

B. Using double equals instead of triple equals

C. Missing semicolon after console.log

D. Curly braces should be parentheses

Solution

1. Step 1: Check if statement syntax

   In JavaScript, the condition must be inside parentheses after if.

2. Step 2: Identify the error

   The code misses parentheses around x == 5, causing a syntax error.

3. Final Answer:

   Missing parentheses around condition -> Option A

4. Quick Check:

   Condition needs parentheses in if [OK]

Hint: Always put condition inside parentheses in if [OK]

Common Mistakes:

• Omitting parentheses around condition
• Confusing == and === (both valid but different)
• Thinking semicolon is mandatory after console.log

5. You want to print 'Adult' if age is 18 or more, otherwise 'Minor'. Which code correctly uses an if statement?

hard

A. if (age >= 18) { console.log('Adult'); } else { console.log('Minor'); }

B. if age >= 18 then { console.log('Adult'); } else { console.log('Minor'); }

C. if (age > 18) { console.log('Adult'); } else { console.log('Minor'); }

D. if (age = 18) { console.log('Adult'); } else { console.log('Minor'); }

Solution

1. Step 1: Check condition for age 18 or more

   The condition should be age >= 18 to include 18 and above.

2. Step 2: Verify syntax and logic

   if (age >= 18) { console.log('Adult'); } else { console.log('Minor'); } uses correct syntax and condition. if age >= 18 then { console.log('Adult'); } else { console.log('Minor'); } uses invalid 'then'. if (age > 18) { console.log('Adult'); } else { console.log('Minor'); } excludes age 18. if (age = 18) { console.log('Adult'); } else { console.log('Minor'); } uses assignment (=) instead of comparison (== or >=).

3. Final Answer:

   if (age >= 18) { console.log('Adult'); } else { console.log('Minor'); } -> Option A

4. Quick Check:

   Use >= and correct syntax for if-else [OK]

Hint: Use >= for 18 or more, no 'then' keyword [OK]

Common Mistakes:

• Using assignment (=) instead of comparison
• Using 'then' keyword (not in JS)
• Using > instead of >= to include 18