bugl
bugl
HomeLearnPatternsPathsSearchPremium
HomeLearnPatternsPaths
Learn/JavaScript/JavaScript Foundations
JavaScript•JavaScript Foundations

JavaScript Switch Statement

Switch Control Flow

Based on a condition, switch selects one or more code blocks to be executed .

switch executes the code blocks that matches an expression .

switch is often used as a more readable alternative to many if...else if...else statements, especially when dealing with multiple possible values.

Syntax

switch(
expression
) {
 case
x
 // code block
 break;
 case
y
 // code block
 break;
 default:
 //
code block
 }

This is how it works

  • The switch expression is evaluated once.
  • The value of the expression is compared with the values of each case.
  • If there is a match, the associated block of code is executed.
  • If there is no match, no code is executed.
switch (new Date().getDay()) {
 case 0:
 day = "Sunday";
 break;
 case 1:
 day = "Monday";
 break;
 case 2:
 day = "Tuesday";
 break;
 case 3:
 day = "Wednesday";
 break;
 case 4:
 day = "Thursday";
 break;
 case 5:
 day = "Friday";
 break;
 case 6:
 day = "Saturday";
}

The getDay() method returns the weekday as a number between 0 and 6.

(Sunday = 0, Monday = 1, Tuesday = 2 ..)

The break Keyword

When JavaScript reaches a break keyword, it breaks out of the switch block.

This will stop the execution inside the switch block.

No more statements in the switch block will be executed.

It is not necessary to break the last case. The switch ends (breaks) there anyway.

The break keyword is crucial for preventing a "fall-through."

Without break , the code will continue to execute the next case blocks (and the default block if present) even if their values do not match the expression .

The default Keyword

The default keyword specifies a block of code to run if there is no case match.

The default keyword is optional.

The default can act as a fallback:

getDay()

The default case does not have to be the last case in a switch block:

switch (new Date().getDay()) {
 default:
 text = "Looking forward to the Weekend";
 break;
 case 6:
 text = "Today is Saturday";
 break;
 case 0:
 text = "Today is Sunday";
}

If default is not the last case in the switch block, remember to end the default case with a break.

Common Code Blocks

Sometimes you will want different switch cases to use the same code.

In this example case 4 and 5 share the same code block, and 0 and 6 share another code block:

switch (new Date().getDay()) {
 case 4: case 5:
 text = "Soon it is Weekend";
 break;
 case 0:
 case 6:
 text = "It is Weekend";
 break;
 default:
 text = "Looking forward to the Weekend";
}

Switching Details

If multiple cases matches a case value, the first case is selected.

If no matching cases are found, the program continues to the default label.

If no default label is found, the program continues to the statement(s) after the switch .

Strict Comparison

Switch uses strict comparison (===).

The values must be of the same type to match.

A strict comparison can only be true if both operands are of the same type.

Example

let x = "0";
switch (x) {
  case 0: text = "Off";
  break;
  case 1: text = "On";
  break;
  default: text = "No value found";
}

Previous

JavaScript Comparison

Next

JavaScript Break

This chapter

Overview
51

Lessons

194m

Read time

1. JavaScript Tutorial2. JavaScript Syntax3. JavaScript Operators4. JavaScript if5. JavaScript Loops6. JavaScript Functions7. JavaScript Scope8. JavaScript Data Types9. JavaScript Style Guide10. JavaScript Introduction11. JavaScript Statements12. JavaScript Arithmetic13. JavaScript else14. JavaScript For Loop15. JavaScript Functions16. JavaScript Code Blocks17. JavaScript Primitives18. JavaScript Best Practices19. JavaScript Where To20. JavaScript Comments21. JavaScript Assignment22. The JavaScript Ternary Operator23. JavaScript While Loops24. Invoking JavaScript Functions25. JavaScript Hoisting26. JavaScript Built-In Objects27. JavaScript Common Mistakes28. JavaScript Output29. JavaScript Variables30. JavaScript Comparison31. JavaScript Switch Statement32. JavaScript Break33. JavaScript Function Parameters34. JavaScript Use Strict35. JavaScript typeof36. JavaScript Performance37. JavaScript Let38. JavaScript Conditionals39. JavaScript Booleans40. JavaScript Continue41. JavaScript Function Return42. JavaScript toString()43. JavaScript Const44. JavaScript Logical Operators45. JavaScript Control Flow46. JavaScript Function Arguments47. JavaScript Type Conversion48. JavaScript Datatypes49. JavaScript Function Expressions50. JavaScript Destructuring51. JavaScript Arrow Functions

On this page

Switch Control FlowThe break KeywordThe default KeywordCommon Code BlocksSwitching DetailsStrict Comparison