Skip to content
Laviyx Learn

Try

JavaScript course menu

JavaScript switch Statement: Cases, break, Fall-through and Alternatives

Learn the JavaScript switch statement: matching a value against cases, why break is needed, intentional fall-through to group cases, the default case, strict comparison in switch, and object lookups as an alternative.

Beginner7 min readUpdated
On this page

When one value must be compared against many possible values, a switch statement can be clearer than a long if...else if chain.

Basic switch#

JavaScript
function dayType(day) {
  switch (day) {
    case "Saturday":
    case "Sunday":
      return "Weekend";
    case "Friday":
      return "Almost the weekend";
    default:
      return "Weekday";
  }
}

console.log(dayType("Sunday"));
console.log(dayType("Friday"));
console.log(dayType("Tuesday"));
Output
Weekend
Almost the weekend
Weekday
  • The value in switch (...) is compared with each case using strict equality (===).
  • default runs when no case matches. It is optional, but usually a good idea.
  • Several case labels in a row share the same code, as Saturday and Sunday do here.

break#

Outside a function (where you cannot return), each case needs a break, or execution falls through into the next case:

JavaScript
const status = "shipped";

switch (status) {
  case "placed":
    console.log("We have your order.");
    break;
  case "shipped":
    console.log("Your order is on the way.");
    break;
  case "delivered":
    console.log("Enjoy your purchase!");
    break;
  default:
    console.log("Unknown status");
}
Output
Your order is on the way.

Here is what happens without the break statements:

JavaScript
const status = "shipped";

switch (status) {
  case "placed":
    console.log("We have your order.");
  case "shipped":
    console.log("Your order is on the way.");
  case "delivered":
    console.log("Enjoy your purchase!");
  default:
    console.log("Unknown status");
}
Output
Your order is on the way.
Enjoy your purchase!
Unknown status

Once a case matches, every following case runs until a break or the end. Forgetting break is the classic switch bug.

Strict comparison#

Because switch uses ===, types must match:

JavaScript
const input = "2";   // from a form: a string

switch (input) {
  case 2:
    console.log("number two");
    break;
  case "2":
    console.log("string two");
    break;
}
Output
string two

switch (true) for ranges#

switch compares values, so ranges need a trick: switch on true and put conditions in the cases. An if...else if chain is usually clearer for this:

JavaScript
const marks = 82;

switch (true) {
  case marks >= 90:
    console.log("A");
    break;
  case marks >= 75:
    console.log("B");
    break;
  default:
    console.log("C or below");
}
Output
B

An alternative: object lookups#

When each case simply maps a value to a result, an object is shorter and easier to extend:

JavaScript
const statusMessages = {
  placed: "We have your order.",
  shipped: "Your order is on the way.",
  delivered: "Enjoy your purchase!",
};

const status = "delivered";
console.log(statusMessages[status] ?? "Unknown status");
Output
Enjoy your purchase!

Objects are covered in Objects.

Practice#

Practice exercise

Write a switch inside a function fileType(extension) that returns "Image" for "jpg", "png" and "webp", "Document" for "pdf" and "docx", and "Unknown" otherwise. Test it with "png", "pdf" and "exe".

Show solution
JavaScript
function fileType(extension) {
  switch (extension.toLowerCase()) {
    case "jpg":
    case "png":
    case "webp":
      return "Image";
    case "pdf":
    case "docx":
      return "Document";
    default:
      return "Unknown";
  }
}

console.log(fileType("png"), fileType("pdf"), fileType("exe"));
Output
Image Document Unknown

Inside a function, return ends the switch too, so no break is needed.

Key takeaway#

Finished this lesson?

Related lessons

JavaScriptJavaScript if, else if and else: Conditions and the Ternary OperatorLearn JavaScript conditional statements: if, else if and else, combining conditions with && and ||, nested conditions, early returns, the ternary operator for choosing values, and common mistakes such as = instead of ===.Beginner7 min readJavaScriptJavaScript Objects: Properties, Methods, Keys and LoopingLearn JavaScript objects: object literals, reading and writing properties with dot and bracket notation, adding and deleting properties, shorthand properties, methods, checking if a key exists, Object.keys, values and entries, nested objects, copying and freezing objects.Beginner11 min readJavaScriptJavaScript break and continue: Controlling LoopsLearn how to use break to exit a loop early and continue to skip to the next iteration in JavaScript, with search and filter examples, labelled statements for nested loops, and alternatives such as find and some.Beginner6 min read