totn JavaScript

JavaScript: Switch Statement

This JavaScript tutorial explains how to use the switch statement with syntax and examples.

Description

In JavaScript, the switch statement is used to execute code based on the value of an expression.

Syntax

The syntax for the switch statement in JavaScript is:

switch (expr) {
   case value1:
     // statements to execute when expr matches value1
     break;

   case value2:
     // statements to execute when expr matches value2
     break;

   case value_n:
     // statements to execute when expr matches value_n
     break;

   default:
     // statements to execute when expr does not match any of the values
}

Parameters or Arguments

expr
An expression whose value is compared to a set of values (ie: value1, value2, ... value_n).
value1, value2, ... value_n
These are the values that are compared to expr. These values are preceded by the case keyword and are evaluated in the order listed. Once a value matches expr, the switch statement will execute the corresponding statements. It is important to note that the switch statement performs the comparison using the === operator which means that expr must be equal to the value as well as the same data type in order to be considered a match.
break
Optional. The break statement is an optional statement that generally appears at the end of each code block. It is used to terminate the switch statement. This means that no further values in the switch statement will be compared to expr. If you don't include a break statement, JavaScript will continue evaluating the next values in the switch statement and you may get unexpected results.
default
Optional. It is the block of code that will be executed if none of the values (ie: value1, value2, .. value_n) match expr. If the default label is found at the end of your switch statement, it is not necessary to include a break statement.

Note

  • The switch statement will execute the code block for the first value that matches expr. The break statement ensures that the switch statement is terminated so that no other values are compared to expr.
  • If no value matches expr, the code block within the default section of the switch statement will be executed, if present.

Example

The following is example using the switch statement in JavaScript:

// Set the TechOnTheNet technology to JavaScript
var totn_technology = 'JavaScript';

switch (totn_technology) {
   case 'SQL':
     console.log('TechOnTheNet SQL');
     break;

   case 'JavaScript':
     console.log('TechOnTheNet JavaScript');
     break;

   default:
     console.log('Other TechOnTheNet technologies');
}

In this switch statement example, the code will execute different statements depending on the value of the totn_technology variable. Since the totn_technology variable has been set to the string 'JavaScript', the statements associated with the case 'JavaScript': label will be executed.

In this example, the following will be output to the web browser console log:

TechOnTheNet JavaScript

Sharing Code Blocks

In JavaScript, you can also share code blocks between values.

For example:

// Set the TechOnTheNet technology to JavaScript
var totn_technology = 'JavaScript';

switch (totn_technology) {
   case 'SQL':
     console.log('TechOnTheNet SQL');
     break;

   case 'JavaScript':
   case 'HTML':
     console.log('TechOnTheNet Web Development');
     break;

   default:
     console.log('Other TechOnTheNet technologies');
}

In this example, the values 'JavaScript' and 'HTML' share a code block. Since the totn_technology variable has been set to the string 'JavaScript', the switch statement will execute this shared code block and output the following to the web browser console log:

TechOnTheNet Web Development
Share on: