Switch statement in Javascript - Mini Project: Build & Apply

Using a Switch Statement in JavaScript

📖 Scenario: You are creating a simple program that tells the day of the week based on a number input. This is like a small helper that converts numbers 1 to 7 into day names.

🎯 Goal: Build a JavaScript program that uses a switch statement to print the correct day name for a given number from 1 to 7.

📋 What You'll Learn

Create a variable called dayNumber with a number from 1 to 7

Create a variable called dayName to store the day name

Use a switch statement with dayNumber to assign the correct day name to dayName

Print the value of dayName

💡 Why This Matters

🌍 Real World

Switch statements are useful when you want to choose between many options based on one value, like menu selections or commands.

💼 Career

Understanding switch statements helps in writing clear and efficient code for decision-making in many programming jobs.

1

Create the dayNumber variable

Create a variable called dayNumber and set it to the number 3.

Javascript

// Create a variable called dayNumber and set it to 3
// Your code here

Hint

Use let dayNumber = 3; to create the variable.

2

Create the dayName variable

Create a variable called dayName and set it to an empty string "".

Javascript

let dayNumber = 3;
// Create a variable called dayName and set it to an empty string
// Your code here

Hint

Use let dayName = ""; to create the variable.

3

Use a switch statement to assign the day name

Write a switch statement using dayNumber to assign the correct day name to dayName. Use these cases:
1: "Monday"
2: "Tuesday"
3: "Wednesday"
4: "Thursday"
5: "Friday"
6: "Saturday"
7: "Sunday"
Include a default case that sets dayName to "Invalid day".

Javascript

let dayNumber = 3;
let dayName = "";
// Write a switch statement using dayNumber to set dayName
// Your code here

Hint

Use switch (dayNumber) { case 1: dayName = "Monday"; break; ... default: dayName = "Invalid day"; }

4

Print the dayName

Write a console.log statement to print the value of dayName.

Javascript

let dayNumber = 3;
let dayName = "";
switch (dayNumber) {
  case 1:
    dayName = "Monday";
    break;
  case 2:
    dayName = "Tuesday";
    break;
  case 3:
    dayName = "Wednesday";
    break;
  case 4:
    dayName = "Thursday";
    break;
  case 5:
    dayName = "Friday";
    break;
  case 6:
    dayName = "Saturday";
    break;
  case 7:
    dayName = "Sunday";
    break;
  default:
    dayName = "Invalid day";
}
// Print the dayName below
// Your code here

Hint

Use console.log(dayName); to print the day name.

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