Why conditional logic is needed in Javascript - Visual Breakdown

Concept Flow - Why conditional logic is needed

Start

↓

Check Condition?

No→Skip Action

Yes↓

Perform Action

↓

End

The program starts, checks a condition, and if true, performs an action; otherwise, it skips the action and ends.

Execution Sample

Javascript

let age = 18;
if (age >= 18) {
  console.log('You can vote');
} else {
  console.log('You cannot vote');
}

This code checks if age is 18 or more and prints a message accordingly.

Execution Table

Step	Condition (age >= 18)	Result	Branch Taken	Output
1	18 >= 18	true	if branch	You can vote
2	End of code	-	-	-

💡 Condition is true, so 'You can vote' is printed and program ends.

Variable Tracker

Variable	Start	After Step 1	Final
age	18	18	18

Key Moments - 2 Insights

Why do we need to check a condition before doing something?

Because the program needs to decide what to do based on different situations, as shown in step 1 where it checks if age is 18 or more to decide the message.

What happens if the condition is false?

The program would take the else branch and print 'You cannot vote', but in this example, the condition is true, so it skips the else branch.

Visual Quiz - 3 Questions

Look at the execution table, what is the output at step 1?

A You can vote

B You cannot vote

C No output

D Error

💡 Hint

Check the 'Output' column in row for step 1 in the execution_table.

At which step does the program decide which message to print?

A Step 2

B Before step 1

C Step 1

D After step 2

💡 Hint

Look at the 'Condition' and 'Branch Taken' columns in the execution_table.

If age was 16, what would change in the execution table?

A No change in output

B Condition would be false and else branch taken

C Condition would be true and if branch taken

D Program would crash

💡 Hint

Think about how the condition 'age >= 18' would evaluate if age is 16.

Concept Snapshot

Conditional logic lets programs choose actions based on conditions.
Syntax: if (condition) { action } else { other action }
If condition is true, do first action; else do second.
It helps programs react differently to different inputs.

Full Transcript

This example shows why conditional logic is needed. The program checks if age is 18 or more. If yes, it prints 'You can vote'. If not, it would print 'You cannot vote'. This decision-making lets programs behave differently depending on data. The execution table shows the condition check and the chosen branch. Variables like age stay the same but guide the flow. Beginners often wonder why conditions are needed; they let programs handle different cases. If the condition was false, the else branch would run instead. The quiz questions help check understanding of these steps.

Practice

1. Why do we use conditional logic like if and else in JavaScript?

easy

A. To make decisions and run different code based on conditions

B. To repeat the same code many times

C. To store multiple values in a list

D. To create new variables

Solution

1. Step 1: Understand the purpose of conditional logic

   Conditional logic allows the program to choose between different actions depending on conditions.

2. Step 2: Compare options with this purpose

   Only To make decisions and run different code based on conditions describes making decisions based on conditions, which matches the purpose of if and else.

3. Final Answer:

   To make decisions and run different code based on conditions -> Option A

4. Quick Check:

   Conditional logic = decision making [OK]

Hint: Think: Does it help choose between actions? [OK]

Common Mistakes:

• Confusing conditional logic with loops
• Thinking it stores data
• Believing it only creates variables

2. Which of the following is the correct syntax to check if a variable age is greater than 18 in JavaScript?

easy

A. if (age > 18) { }

B. if (age > 18) then { }

C. if age > 18 then { }

D. if age > 18 { }

Solution

1. Step 1: Recall JavaScript if statement syntax

   JavaScript requires parentheses around the condition and curly braces for the code block: if (condition) { }.

2. Step 2: Check each option

   if (age > 18) { } matches the correct syntax. Options A and C miss parentheses or use invalid keywords like 'then'. if (age > 18) then { } incorrectly uses 'then'.

3. Final Answer:

   if (age > 18) { } -> Option A

4. Quick Check:

   Correct if syntax = parentheses + braces [OK]

Hint: Remember: condition in ( ), code in { } [OK]

Common Mistakes:

• Omitting parentheses around condition
• Using 'then' keyword (not in JavaScript)
• Missing curly braces

3. What will be the output of this code?

let score = 75;
if (score >= 60) {
  console.log('Pass');
} else {
  console.log('Fail');
}

medium

A. Fail

B. No output

C. Error

D. Pass

Solution

1. Step 1: Check the condition score >= 60

   The variable score is 75, which is greater than or equal to 60, so the condition is true.

2. Step 2: Determine which block runs

   Since the condition is true, the code inside the if block runs, printing 'Pass'.

3. Final Answer:

   Pass -> Option D

4. Quick Check:

   75 >= 60 is true, so output = Pass [OK]

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

Common Mistakes:

• Confusing which block runs on true condition
• Thinking output is 'Fail' for true condition
• Assuming syntax error

4. Find the error in this code snippet:

let temperature = 30;
if temperature > 25 {
  console.log('Hot');
} else {
  console.log('Cold');
}

medium

A. Using else without if

B. Missing semicolon after variable declaration

C. Missing parentheses around the condition in if statement

D. Incorrect variable name

Solution

1. Step 1: Check the if statement syntax

   JavaScript requires parentheses around the condition in an if statement, but here they are missing.

2. Step 2: Verify other parts

   The variable declaration is correct with semicolon, else is correctly used, and variable name matches.

3. Final Answer:

   Missing parentheses around the condition in if statement -> Option C

4. Quick Check:

   if needs (condition) [OK]

Hint: Always put condition inside ( ) after if [OK]

Common Mistakes:

• Forgetting parentheses in if condition
• Thinking semicolon is mandatory after if
• Confusing else usage

5. You want to write a program that prints 'Good morning' if the hour is less than 12, 'Good afternoon' if the hour is between 12 and 18 (inclusive), and 'Good evening' otherwise. Which code correctly uses conditional logic to do this?

hard

A. if (hour < 12) {
console.log('Good morning');
} else if (hour < 18) {
console.log('Good afternoon');
} else {
console.log('Good evening');
}

B. if (hour < 12) {
console.log('Good morning');
} else if (hour <= 18) {
console.log('Good afternoon');
} else {
console.log('Good evening');
}

C. if (hour <= 12) {
console.log('Good morning');
} else if (hour <= 18) {
console.log('Good afternoon');
} else {
console.log('Good evening');
}

D. if (hour < 12) {
console.log('Good morning');
} else if (hour > 12 && hour < 18) {
console.log('Good afternoon');
} else {
console.log('Good evening');
}

Solution

1. Step 1: Understand the conditions for each greeting

   'Good morning' if hour < 12, 'Good afternoon' if hour between 12 and 18 inclusive, else 'Good evening'.

2. Step 2: Check each option's condition ranges

   if (hour < 12) { console.log('Good morning'); } else if (hour <= 18) { console.log('Good afternoon'); } else { console.log('Good evening'); } correctly uses hour < 12 for morning, hour <= 18 for afternoon (including 12 and 18), else evening. Others miss inclusive 12 or 18 or have wrong ranges.

3. Final Answer:

   if (hour < 12) { console.log('Good morning'); } else if (hour <= 18) { console.log('Good afternoon'); } else { console.log('Good evening'); } -> Option B

4. Quick Check:

   Inclusive afternoon means <= 18, so if (hour < 12) { console.log('Good morning'); } else if (hour <= 18) { console.log('Good afternoon'); } else { console.log('Good evening'); } fits [OK]

Hint: Check if conditions cover all cases without gaps [OK]

Common Mistakes:

• Using < instead of <= for inclusive ranges
• Overlapping or missing ranges
• Wrong logical operators in conditions