DONATE  
MENU
AJAX
HTML
JSON
JAVASCRIPT

JavaScript Tutorials

INTRODUCTION

» Introduction to JavaScript

» Practice IT Editor

» JavaScript Example

» JavaScript Placement

» JavaScript Syntax

» JavaScript Statements

» JavaScript Input

» JavaScript Output

» JavaScript Comments

» JavaScript Variables

» Variables' Scope

» JavaScript Operators

» JS Expressions & Concatenation

» JavaScript Data Type

» JavaScript Numbers

» Number Object

» JavaScript Strings

» String Object

» JavaScript Booleans

» Boolean Object

» JavaScript Functions

» JavaScript Arrays

» Array Object - Properties

» Array Object - Methods

» JavaScript Objects

» JavaScript Undefined

» JavaScript Nulls

CONDITIONAL TESTING

» If Statement

» If Else Statement

» JavaScript Ternary Operator

» Switch Statement

LOOPS

» For Loops

» While Loops

» Break & Continue

» For...In Loops

» do...while Loop

FUNCTIONS

» JavaScript Functions

» Creating Functions

» Functions' Parameters

» Functions' Arguments

» Function Invocation

» The Return Keyword

» The Arguments Object

» Callback Functions

» Arrow Functions

ARRAYS

» JavaScript Arrays

» Creating Arrays

» Accessing Arrays

» Looping Arrays

» Multi - dimensional Arrays

OBJECTS

» JavaScript Objects

» Creating Objects

» Prototype Definition

» Accessing Objects

» The this Keyword

AJAX

» Introduction to AJAX

JSON

» Introduction to JSON

JAVASCRIPT DATES

» The Date Object

» Date Methods

» Timing (SetInterval & SetTimeout)

MATH OBJECT

» Math Object

» Math Methods

HTML / JS DOM

» DOM Introduction

» Accessing HTML Elements in DOM

» Get And Change Elements' Contents & Values

» Change Styling - DOM CSS

» DOM Attributes

» JavaScript Event Listeners

» DOM Event Listeners

» JS Events

MISCELLANEOUS

» JS Strict Mode

» JavaScript Hoisting

» JavaScript let keyword

» Reserved Keywords

» JS Best Practices

» JavaScript vs ECMAScript

JAVASCRIPT EXAMPLES

» JavaScript Calculator

.. » JavaScript » Conditional Testing » Switch Statement
Share Tweet WhatsApp

Switch Statement

The switch statement is a condition tester that is almost similar to the if statement but the major difference is that, while the if statement can be used in testing both statements, values, expressions and conditions e.g
if (x = 5){ //A statement testing if 5 has been assigned to variable x
}

if (x == 5){//Testing if the value of x is equal to 5
}

if (x > 12){//A conditional expression
}
The switch statement is used in testing just the value a variable carries. Just as you can switch your phone off and it will go off and on and it will go on. So does the switch statement switch between various cases to identify which one matches its value so as to execute the statements associated with that case.
switch (3){
case 1: 
alert("One"); //Statement to execute for case 1
break;
case 3: 
alert("Three");  //Statement to execute for case 3
break;
Cass 6: 
alert("Six");  //Statement to execute for case 1
break;
default: 
alert("Unaccepted value"); //Statement to execute if no case is found.
}
In the above, we had formed a switch statement and passed a value (3) to find. The switch statement then runs through all the cases in the code block ({}) to find the case whose value matches what it was given. If a match is found, the statements associated with that case are executed. If no case or match is found, the statement associated with the default are executed. The default is not compulsory but it is recommended so that when no case is found, the statement(s) associated with the default keyword is executed.

<script>
var op = prompt("Enter a mathematical operator (+ - ÷ × %)");

switch(op){
case "×":
alert("Multiplication Operator"); break;
case "-":
alert("Subtraction Operator"); break;
case "+":
alert("Addition Operator"); break;
case "÷":
alert("Division Operator"); break;
case "%":
alert("Modulus Operator"); break;

default: alert("Unknown Operator");
}
</script>

Copy PRACTICE IT

break Keyword Notice the use of the break keyword after all statements for each case have been written. This stops the switch from further execution of the statements of other cases once a case have been found and statements associated with it executed. It is more like telling the switch statement that this is the end of all statements that should be executed for this case. Notice what happens in the example below without the break keyword to understand its importance,
<script>
var op = prompt("Enter a mathematical operator (+ - ÷ × %)");

switch(op){
case "×":
alert("Multiplication Operator");
case "-":
alert("Subtraction Operator");
case "+":
alert("Addition Operator");
case "÷":
alert("Division Operator");
case "%":
alert("Modulus Operator");

default: alert("Unknown Operator");
}
</script>

Copy PRACTICE IT

The last case or default keyword, whatever comes last in the switch, should have no break keyword. You will learn more about the break keyword in subsequent pages. All switch statements can be written as if statements but not all if statements can be written the switch way. SWITCH
var num = 3;
switch (num){
case 1: 
alert("One"); //Statement to execute for case 1
break;
case 3: 
alert("Three");  //Statement to execute for case 3
break;
Cass 6: 
alert("Six");  //Statement to execute for case 1
break;
default: 
alert("Unaccepted value"); //Statement to execute if no case is found.
}
IF EQUIVALENT

var num = 3;
if (num == 1)
{
alert("One"); //if num is 1
}
else if (num == 3){
alert("Three"); //if num is 3
}
else if (num == 6){
alert("Six"); //if num is 6
}
else
{
alert("Unaccepted value"); //when num is none of the above
}
WHEN TO USE SWITCH Since it is clear that the switch statement is almost same thing as the if statement, it leaves us with the question as to when to use the switch statement. Anyways, it is your decision to make but we recommend you use the switch statement whenever the value to expect is defined i.e you know the possible values and they aren't much e.g switching between days of the week. SUMMARY
  1. The switch statement is similar to the if statement.
  2. It (switch statement) switches the different cases contained in its code block to find a case that matches the value passed to it.
  3. If a case is found, it executes the statements associated with that case.
  4. If no case is found, it executes the statements associated with the default keyword if available.
  5. It is recommended we use the default keyword except we are very sure, the switch's value will definitely match one of the cases.
  6. The default keyword can be placed just anywhere in the code block but it is usually placed last by most programmers.
  7. The break keyword separates a case and its statement from that of others just as commas(,) separate values in an array.
  8. The last case in a switch should not have a break keyword since no other case exist.
Take a short quiz on Switch Statement.
Ask a question or tell us if Switch Statement is easy or not.
cent?

Join our 1,090 subscribers to receive tutorials' updates!

  We won't spam your mail box. We hate it.





StackBeginner 2021 © Joseph Omamode