Switch statement in Javascript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to start a switch statement that checks the variable color.

Javascript

switch([1]) {
  case 'red':
    console.log('Red color');
    break;
  default:
    console.log('Unknown color');
}

Drag options to blanks, or click blank then click option'

Ainput

Bvalue

Ccolor

Dchoice

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable name that is not defined or unrelated to the switch.

Leaving the parentheses empty.

The switch statement must check the variable color to decide which case to execute.

2fill in blank

medium

Complete the code to add a case for the value 'blue' that logs 'Blue color'.

Javascript

switch(color) {
  case 'red':
    console.log('Red color');
    break;
  case [1]:
    console.log('Blue color');
    break;
  default:
    console.log('Unknown color');
}

Drag options to blanks, or click blank then click option'

A'green'

B'blue'

C'yellow'

D'black'

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to put quotes around the case value.

Using a different color string than 'blue'.

The case must match the string 'blue' to handle that color correctly.

3fill in blank

hard

Fix the error by completing the code to properly end the switch statement.

Javascript

switch(color) {
  case 'red':
    console.log('Red color');
    break;
  default:
    console.log('Unknown color');
  [1]
}

Drag options to blanks, or click blank then click option'

A}

Breturn

Cbreak;

Dend

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'end' which is not valid in JavaScript.

Using 'break;' outside a case block.

Using 'return' which is not the block end.

The switch statement must be closed with a closing curly brace '}'.

4fill in blank

hard

Fill both blanks to create a switch that logs 'Small' for 1, 'Medium' for 2, and 'Large' for 3.

Javascript

switch([1]) {
  case 1:
    console.log('Small');
    break;
  case [2]:
    console.log('Medium');
    break;
  case 3:
    console.log('Large');
    break;
  default:
    console.log('Unknown size');
}

Drag options to blanks, or click blank then click option'

Asize

B2

Clevel

D4

Attempts:

3 left

💡 Hint

Common Mistakes

Using a wrong variable name in the switch expression.

Using a case value that does not match the intended number.

The switch must check the variable 'size' and the second case must be 2 to match 'Medium'.

5fill in blank

hard

Fill both blanks to create a switch that logs the day name for 1, 2, and 3.

Javascript

switch([1]) {
  case 1:
    console.log([2]);
    break;
  case 2:
    console.log('Tuesday');
    break;
  case 3:
    console.log('Wednesday');
    break;
  default:
    console.log('Invalid day');
}

Drag options to blanks, or click blank then click option'

Aday

B'Monday'

D'Sunday'

Attempts:

3 left

💡 Hint

Common Mistakes

Using a wrong variable name in the switch expression.

Not using quotes around the day name strings.

The switch checks the variable 'day'. For case 1, it logs 'Monday'. The second blank is the string 'Monday' to print.

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