Switch statement in Javascript - Step-by-Step Execution

Concept Flow - Switch statement

Start

↓

Evaluate expression

↓

Compare with case 1?

No→Compare with case 2?

↓

Execute case 1

↓

Break?

No→Continue to next case

Yes↓

Exit switch

The switch statement evaluates an expression and compares it to each case value. When a match is found, it executes that case's code until a break is encountered or the switch ends.

Execution Sample

Javascript

let day = 3;
switch(day) {
  case 1:
    console.log('Monday');
    break;
  case 3:
    console.log('Wednesday');
    break;
  default:
    console.log('Other day');
}

This code checks the value of 'day' and prints the matching weekday name or 'Other day' if no match.

Execution Table

Step	Expression Value	Case Compared	Match?	Action	Output
1	3	1	No	Check next case
2	3	3	Yes	Execute case 3 block	Wednesday
3				Break encountered, exit switch

💡 Break statement stops execution after matching case 3.

Variable Tracker

Variable	Start	After Step 1	After Step 2	Final
day	3	3	3	3

Key Moments - 2 Insights

Why does the switch stop after printing 'Wednesday'?

Because the break statement at the end of case 3 stops the switch from continuing to other cases, as shown in execution_table step 3.

What happens if we remove the break in case 3?

Without break, the switch would continue executing the next cases until it finds a break or ends, causing multiple outputs. This is called 'fall-through'.

Visual Quiz - 3 Questions

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

A Other day

B Monday

C Wednesday

D No output

💡 Hint

Check the 'Output' column at step 2 in the execution_table.

At which step does the switch statement stop executing?

A Step 3

B Step 1

C Step 2

D It never stops

💡 Hint

Look at the 'Action' column in execution_table where break is encountered.

If the variable 'day' was 2, what would be the output?

A Monday

B Other day

C Wednesday

D No output

💡 Hint

Since 2 matches no case, the default case runs as per the code in execution_sample.

Concept Snapshot

switch(expression) {
  case value1:
    // code
    break;
  case value2:
    // code
    break;
  default:
    // code
}

- Compares expression to cases
- Executes matching case
- Use break to stop fall-through
- Default runs if no match

Full Transcript

The switch statement starts by evaluating the expression. It then compares this value to each case in order. If a case matches, the code inside that case runs. The break statement stops the switch from running other cases. If no case matches, the default case runs. In the example, day equals 3, so it matches case 3 and prints 'Wednesday'. The break stops further execution. If break was missing, the switch would continue running the next cases, which can cause multiple outputs. This is called fall-through. Understanding where and why break is used helps control the flow inside switch statements.

Practice

1. What is the main purpose of a switch statement in JavaScript?

easy

A. To choose which block of code to run based on a value

B. To repeat a block of code multiple times

C. To define a function

D. To create a new variable

Solution

1. Step 1: Understand the role of switch

   A switch statement checks a value and runs code matching that value.

2. Step 2: Compare with other options

   Repeating code is for loops, defining functions is with function keyword, and variables use let/const/var.

3. Final Answer:

   To choose which block of code to run based on a value -> Option A

4. Quick Check:

   Switch = choose code by value [OK]

Hint: Switch picks code based on one value quickly [OK]

Common Mistakes:

• Confusing switch with loops
• Thinking switch defines functions
• Believing switch creates variables

2. Which of the following is the correct syntax to start a switch statement in JavaScript?

easy

A. switch value { }

B. switch { value }

C. switch (value) { }

D. switch: (value) { }

Solution

1. Step 1: Recall switch syntax

   The switch statement requires parentheses around the value and curly braces for cases: switch (value) { ... }

2. Step 2: Check each option

   switch (value) { } matches correct syntax; others miss parentheses or use wrong symbols.

3. Final Answer:

   switch (value) { } -> Option C

4. Quick Check:

   Correct switch syntax uses parentheses and braces [OK]

Hint: Switch needs (value) and {cases} to work [OK]

Common Mistakes:

• Omitting parentheses around value
• Using curly braces instead of parentheses
• Adding colon after switch keyword

3. What will be the output of this code?

const day = 3;
switch(day) {
  case 1:
    console.log('Monday');
    break;
  case 2:
    console.log('Tuesday');
    break;
  case 3:
    console.log('Wednesday');
    break;
  default:
    console.log('Unknown day');
}

medium

A. Monday

B. Tuesday

C. Unknown day

D. Wednesday

Solution

1. Step 1: Match the value with cases

   The variable day is 3, so the switch looks for case 3.

2. Step 2: Identify executed case

   Case 3 matches and prints 'Wednesday', then break stops further checks.

3. Final Answer:

   Wednesday -> Option D

4. Quick Check:

   day=3 matches case 3 = Wednesday [OK]

Hint: Match value to case, break stops after match [OK]

Common Mistakes:

• Forgetting break causes fall-through
• Choosing default when case matches
• Mixing up case numbers and outputs

4. Find the error in this switch statement:

const color = 'red';
switch(color) {
  case 'red'
    console.log('Stop');
    break;
  case 'green':
    console.log('Go');
    break;
  default:
    console.log('Wait');
}

medium

A. Wrong variable name in switch

B. Missing colon ':' after case 'red'

C. Missing break after case 'red'

D. Missing default case

Solution

1. Step 1: Check case syntax

   Each case must end with a colon ':' after the value. Here, case 'red' misses the colon.

2. Step 2: Verify other parts

   Break is present after case 'red' block, variable name is correct, and default exists.

3. Final Answer:

   Missing colon ':' after case 'red' -> Option B

4. Quick Check:

   Case needs ':' after value [OK]

Hint: Each case must end with ':' before code [OK]

Common Mistakes:

• Omitting colon after case value
• Forgetting break causing fall-through
• Missing default case (not always error)

5. You want to print 'Weekend' for days 6 and 7, and 'Weekday' for days 1 to 5 using a switch. Which code correctly does this?

hard

A. switch(day) {
case 6:
case 7:
console.log('Weekend');
break;
case 1:
case 2:
case 3:
case 4:
case 5:
console.log('Weekday');
break;
default:
console.log('Invalid day');
}

B. switch(day) {
case 6:
console.log('Weekend');
case 7:
console.log('Weekend');
break;
case 1:
case 2:
case 3:
case 4:
case 5:
console.log('Weekday');
break;
default:
console.log('Invalid day');
}

C. switch(day) {
case 6:
case 7:
console.log('Weekend');
case 1:
case 2:
case 3:
case 4:
case 5:
console.log('Weekday');
break;
default:
console.log('Invalid day');
}

D. switch(day) {
case 6:
case 7:
console.log('Weekend');
break;
case 1:
case 2:
case 3:
case 4:
case 5:
console.log('Weekday');
default:
console.log('Invalid day');
}

Solution

1. Step 1: Group cases for weekend and weekday

   Cases 6 and 7 should print 'Weekend' with one console.log and break after.

2. Step 2: Group cases 1 to 5 for 'Weekday' with break

   Cases 1-5 print 'Weekday' and break to avoid fall-through.

3. Step 3: Check default for invalid days

   Default prints 'Invalid day' if no case matches.

4. Final Answer:

   switch(day) { case 6: case 7: console.log('Weekend'); break; case 1: case 2: case 3: case 4: case 5: console.log('Weekday'); break; default: console.log('Invalid day'); } -> Option A

5. Quick Check:

   Group cases, use break to stop fall-through [OK]

Hint: Group cases without code, break after last case [OK]

Common Mistakes:

• Missing break causing fall-through
• Repeating console.log in each case unnecessarily
• Omitting default case for invalid input