Switch vs if comparison in Javascript - Hands-On Comparison

Switch vs if comparison

📖 Scenario: Imagine you are building a simple program that tells the day of the week based on a number from 1 to 7. You want to see how to use both switch and if statements to do this.

🎯 Goal: You will create a program that takes a number called dayNumber and prints the name of the day using both switch and if statements. This will help you understand how these two ways of making decisions work.

📋 What You'll Learn

Create a variable dayNumber with the value 3

Create a variable dayNameIf to hold the day name using if statements

Create a variable dayNameSwitch to hold the day name using a switch statement

Print both dayNameIf and dayNameSwitch to compare results

💡 Why This Matters

🌍 Real World

Programs often need to make choices based on values, like showing the day name from a number. Knowing both <code>if</code> and <code>switch</code> helps you write clear code.

💼 Career

Understanding decision-making in code is essential for all programming jobs. Using <code>switch</code> or <code>if</code> statements correctly helps you write readable and efficient code.

1

Create the dayNumber variable

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

Javascript

# Your code here

Hint

Use const dayNumber = 3; to create the variable.

2

Create dayNameIf using if statements

Create a variable called dayNameIf. Use if, else if, and else statements to set dayNameIf to the correct day name for dayNumber. Use these mappings: 1 = 'Monday', 2 = 'Tuesday', 3 = 'Wednesday', 4 = 'Thursday', 5 = 'Friday', 6 = 'Saturday', 7 = 'Sunday'. If the number is not 1 to 7, set dayNameIf to 'Invalid day'.

Javascript

const dayNumber = 3;
// Your code here

Hint

Use if and else if to check dayNumber and assign the correct day name to dayNameIf.

3

Create dayNameSwitch using a switch statement

Create a variable called dayNameSwitch. Use a switch statement on dayNumber to set dayNameSwitch to the correct day name using the same mappings as before. Use a default case to set dayNameSwitch to 'Invalid day' if the number is not 1 to 7.

Javascript

const dayNumber = 3;
let dayNameIf;
if (dayNumber === 1) {
    dayNameIf = 'Monday';
} else if (dayNumber === 2) {
    dayNameIf = 'Tuesday';
} else if (dayNumber === 3) {
    dayNameIf = 'Wednesday';
} else if (dayNumber === 4) {
    dayNameIf = 'Thursday';
} else if (dayNumber === 5) {
    dayNameIf = 'Friday';
} else if (dayNumber === 6) {
    dayNameIf = 'Saturday';
} else if (dayNumber === 7) {
    dayNameIf = 'Sunday';
} else {
    dayNameIf = 'Invalid day';
}
// Your code here

Hint

Use switch (dayNumber) with case for each day number and a default for invalid numbers.

4

Print both dayNameIf and dayNameSwitch

Write two console.log statements to print the values of dayNameIf and dayNameSwitch.

Javascript

const dayNumber = 3;
let dayNameIf;
if (dayNumber === 1) {
    dayNameIf = 'Monday';
} else if (dayNumber === 2) {
    dayNameIf = 'Tuesday';
} else if (dayNumber === 3) {
    dayNameIf = 'Wednesday';
} else if (dayNumber === 4) {
    dayNameIf = 'Thursday';
} else if (dayNumber === 5) {
    dayNameIf = 'Friday';
} else if (dayNumber === 6) {
    dayNameIf = 'Saturday';
} else if (dayNumber === 7) {
    dayNameIf = 'Sunday';
} else {
    dayNameIf = 'Invalid day';
}

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

Hint

Use console.log(dayNameIf); and console.log(dayNameSwitch); to print the results.

Practice

1.

Which statement best describes when to use switch instead of if in JavaScript?

easy

A. Use switch for complex conditions involving ranges or multiple variables.

B. Use switch only for boolean true/false checks.

C. Use switch when checking one value against many fixed options.

D. Use switch to replace all if statements regardless of condition type.

Solution

1. Step 1: Understand the purpose of switch

   switch is designed to compare one value against many possible fixed cases.

2. Step 2: Compare with if usage

   if is better for complex or varied conditions, like ranges or multiple variables.

3. Final Answer:

   Use switch when checking one value against many fixed options. -> Option C

4. Quick Check:

   switch = fixed value checks [OK]

Hint: Use switch for one value, many options; if for complex checks [OK]

Common Mistakes:

• Using switch for complex range conditions
• Thinking switch works with multiple variables
• Believing switch can replace all if statements

2.

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

?

easy

A. switch (variable) {

B. switch variable {

C. switch { variable }

D. switch: (variable) {

Solution

1. Step 1: Recall switch syntax

   The correct syntax requires parentheses around the variable: switch (variable) {.

2. Step 2: Identify incorrect options

   Options A, B, and D have syntax errors like missing parentheses or wrong punctuation.

3. Final Answer:

   switch (variable) { -> Option A

4. Quick Check:

   Parentheses needed after switch [OK]

Hint: Remember: switch needs parentheses around the expression [OK]

Common Mistakes:

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

3.

What will be the output of the following code?

const fruit = 'apple';
switch (fruit) {
  case 'banana':
    console.log('Yellow');
    break;
  case 'apple':
    console.log('Red');
    break;
  default:
    console.log('Unknown');
}

medium

A. Yellow

B. Red

C. Unknown

D. No output

Solution

1. Step 1: Check the value of fruit

   The variable fruit is set to 'apple'.

2. Step 2: Match fruit in the switch cases

   The case 'apple' matches, so it prints 'Red' and then breaks.

3. Final Answer:

   Red -> Option B

4. Quick Check:

   fruit='apple' matches case 'apple' [OK]

Hint: Match value exactly in switch cases to find output [OK]

Common Mistakes:

• Forgetting break causes fall-through
• Assuming default runs even if case matches
• Mixing up case values

4.

Find the error in this switch statement and choose the fix:

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

medium

A. Add parentheses around day in switch: switch (day) {

B. Replace case 3: with case '3':

C. Remove all break; statements

D. Change default to else

Solution

1. Step 1: Identify syntax error in switch statement

   The switch statement is missing parentheses around the variable: it should be switch (day) {.

2. Step 2: Evaluate other options

   Changing case 3 to string is unnecessary; breaks are needed; default cannot be else.

3. Final Answer:

   Add parentheses around day in switch: switch (day) { -> Option A

4. Quick Check:

   switch needs parentheses [OK]

Hint: Always put parentheses after switch keyword [OK]

Common Mistakes:

• Omitting parentheses after switch
• Confusing case value types
• Removing break causing fall-through

5.

You want to write a program that prints a message based on a score:

• If score is exactly 100, print 'Perfect!'
• If score is between 90 and 99, print 'Great!'
• If score is between 60 and 89, print 'Good'
• Otherwise, print 'Try again'

Which approach is best?

hard

A. Use a switch statement with cases for each range.

B. Use a single if statement with all conditions combined.

C. Use a switch with boolean expressions in cases.

D. Use multiple if and else if statements to check ranges.

Solution

1. Step 1: Analyze the conditions

   The conditions involve ranges, not fixed values, so switch is not suitable.

2. Step 2: Choose the best control structure

   Multiple if and else if statements can check ranges easily and clearly.

3. Final Answer:

   Use multiple if and else if statements to check ranges. -> Option D

4. Quick Check:

   Ranges need if/else if, not switch [OK]

Hint: Use if/else for ranges; switch only for exact matches [OK]

Common Mistakes:

• Trying to use switch for range conditions
• Using switch with boolean expressions (not allowed)
• Combining all conditions in one if without else if