JavaScript Switch Case Statement 2024
JavaScript Switch Case Statement
The switch statement evaluates an expression, matching the expression's value against a series of
case clauses, and executes statements after the first case clause with a matching value, until a
break statement is encountered. The default clause of a switch statement will be jumped to if no
case matches the expression's value.
The switch statement is used to perform different actions based on different conditions. Use the
switch statement to select one of many code blocks to be executed.
The switch case provides an alternative to long if-else chains, improving readability and
maintainability, especially when handling multiple conditional branches.
JavaScript Switch Case Syntax
switch (expression) {
case value1:
// code block 1;
break;
case value2:
// code block 2;
break;
...
default:
// default code block;
©Juliet 2026 Page 1
JavaScript Switch Case Statement 2024
Explanation:-
1. Expression is the value that you want to compare.
2. Case value1, case value2, etc., represent the possible values of the expression.
3. Break statement terminates the switch statement. Without it, execution will continue into
the next case. If break is omitted, execution will continue to the next case (known as
“fall-through”).
4. Default specifies the code to run if none of the cases match the expression. The default
case is optional. If no match is found, the code block under default is executed.
How the switch case statement works:-
1. The switch expression is evaluated once.
2. The value of the expression is compared with the values of each case.
3. If there is a match, the associated block of code is executed.
4. If there is no match, the default code block is executed.
©Juliet 2026 Page 2
JavaScript Switch Case Statement 2024
A Switch case statement flowchart illustration
Expression
Matches
case 1? Code block A
executed
Matches
case 2? Code block B
executed
Matches
case 3? Code block C
executed
Default Code
executed
©Juliet 2026 Page 3
JavaScript Switch Case Statement 2024
An example of a Switch Case Statement JavaScript program
<html>
<title>Switch Case program</title>
<style>
p{
color: green;
</style>
</head>
<body>
<p>A JavaScript Switch Case Program</p>
<p>This program uses The getDay() method to return the weekday as a number between 1 and
7</p>
<p>( Monday=1, Tuesday=2, Wednesday=3,...).<p>
<p>This program uses the weekday number to calculate the weekday name</p>
<p id="mypage"></p>
<script>
let day;
switch (new Date().getDay()) {
©Juliet 2026 Page 4
JavaScript Switch Case Statement 2024
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";
break;
©Juliet 2026 Page 5
JavaScript Switch Case Statement 2024
case 7:
day = "Sunday";
[Link]("mypage").innerHTML = "Today is " + day;
</script>
</body>
</html>
Example 2:
A JavaScript switch case program that assigns a value C to a Grade variable. The switch
statement evaluates the value of grade. Since the grade is 'C', the code block following case 'C':
is executed.
The resulting output is: "C (Below average)" since the variable is assigned the string "C (Below
average)".The break statement terminates the switch statement.
The InnerHTML outputting method outputs "C (Below average)".</h3>
Program Code:
<html>
<title>Grade</title>
<body>
<p id="mypage"></p>
©Juliet 2026 Page 6
JavaScript Switch Case Statement 2024
<H2 style="color:red;"> This program assigns a value C to a Grade variable.</h2>
<h3 style="color:blue;">The switch statement evaluates the value of grade. Since the grade is 'C',
the code block following case 'C': is executed.</h3>
<h3 style="color:green;">The resulting output is: "C (Below average)" since the variable is
assigned the string "C (Below average)".</h3>
<h3 style="color:pink;">The break statement terminates the switch statement.</h3>
<h3 style="color:orange;">The innerHTML outputting method outputs "C (Below
average)".</h3>
<script>
let grade = 'C';
let result;
switch (grade) {
case 'A':
result = "A (Excellent)";
break;
case 'B':
result = "B (Average)";
break;
case 'C':
result = "C (Below average)";
©Juliet 2026 Page 7
JavaScript Switch Case Statement 2024
break;
default:
result = "No Grade";
[Link]("mypage").innerHTML = "Your Grade is " + result;;
</script>
</body>
</html>
Practice Exercises:-
Exercise one:
Create an HTML page with some embedded JavaScript switch case statements to create a
program that prompts the user to enter two numbers.
In addition, the program should prompt the user to enter an arithmetic operator sign (either +, -, *
or /). The program then uses the user entered numbers and the selected operator sign to carry out
the arithmetic operation and displays the results using an alert method.
Note: The page output must have some inline CSS textual formatting.
©Juliet 2026 Page 8
JavaScript Switch Case Statement 2024
Program Code:
<html>
<title>case switch </title>
<body>
<H2 style="color:red;"> A Javascript switch case program.</h2>
<p style="color:pink;font-size:50;font-family:chiller;">The switch statement uses the user
entered numbers and the selected operator sign to carry out an arithmetic operation.</p>
<script>
let number1 = parseInt(prompt("Please Enter the first number"));//The parseInt method parses a
//value as a string and returns the first integer.
let number2 = parseInt(prompt("Please enter the second number"));
let operator = prompt("Enter an operator sign ( either +, -, * or / ): ");
let result;
switch(operator) {
case "-":
result = number1 - number2;
alert(result);
break;
©Juliet 2026 Page 9
JavaScript Switch Case Statement 2024
case "*":
result = number1 * number2;
alert(result);
break;
case "/":
result = number1 / number2;
alert(result);
break;
case "+":
result = number1 + number2;
alert(result);
break;
default:
alert("Invalid operator");
</script>
</body>
</html>
©Juliet 2026 Page 10
JavaScript Switch Case Statement 2024
Exercise 2:
1. Using switch case statement, create an HTML page with some embedded JavaScript code
to create a program that prompts the user to enter an ATM main menu option.
2. The program should then display the user selected option using the alert method.
3. Note; use the Main Menu options provided below:-
Main Menu Options
Option Number Displayed Option
1. Deposit Option
2. Check Account Balance Option
3. Withdrawal Option
4. Print Transaction Receipt Option
5. Exit Main Menu Option
Any other selected option Invalid Option Selected
Program Code:
<html>
<title>An ATM Main Menu Program</title>
<body>
<h3 style="color:pink;">A JavaScript program that displays the user selected ATM Main Menu
option.</h3>
©Juliet 2026 Page 11
JavaScript Switch Case Statement 2024
<hr>
<script>
let option =parseInt(prompt("Enter an option ranging from 1–5"));
switch (option) {
case 1:
alert("1. Deposit Option");
break;
case 2:
alert("2. Check Account Balance Option");
break;
case 3:
alert("3. Withdrawal Option");
break;
case 4:
alert("4. Print Transaction Receipt Option");
break;
case 5:
alert("5. Exit Main Menu Option");
©Juliet 2026 Page 12
JavaScript Switch Case Statement 2024
break;
default:
alert("Invalid Option Selected");
</script>
</body>
</html>
©Juliet 2026 Page 13
