- JavaScript Basics
- JS Home
- JS Syntax
- JS Placements
- JS Output
- JS Statements
- JS Keywords
- JS Comments
- JS Variables
- JS var
- JS let
- JS const
- JS var Vs let Vs const
- JS Operators
- JS Arithmetic Operators
- JS Assignment Operators
- JS Comparison Operators
- JS Logical Operators
- JS Bitwise Operators
- JS Ternary Operator
- JS Operator Precedence
- JS Data Types
- JS typeof
- JS Conditional Statements
- JS Conditional Statement
- JS if Statement
- JS if...else Statement
- JS switch Statement
- JS Loops
- JS for Loop
- JS while Loop
- JS do...while Loop
- JS break Statement
- JS continue Statement
- JS break Vs. continue
- JavaScript Popup Boxes
- JS Dialog Box
- JS alert Box
- JS confirm Box
- JS prompt Box
- JavaScript Functions
- JS Functions
- JS setTimeout() Method
- JS setInterval() Method
- JavaScript Events
- JS Events
- JS onclick Event
- JS onload Event
- JS Mouse Events
- JS onreset Event
- JS onsubmit Event
- JavaScript Arrays
- JS Array
- JS Find Length of Array
- JS Add Elements at Beginning
- JS Add Element at End
- JS Remove First Element
- JS Remove Last Element
- JS Get First Index
- JS Get Last Index
- JS Reverse an Array
- JS Sort an Array
- JS Concatenate Arrays
- JS join()
- JS toString()
- JS from()
- JS Check if Value Exists
- JS Check if Array
- JS Slice an Array
- JS splice()
- JS find()
- JS findIndex()
- JS entries()
- JS every()
- JS fill()
- JS filter()
- JS forEach()
- JS map()
- JavaScript Strings
- JS String
- JS Length of String
- JS Convert to Lowercase
- JS Convert to Uppercase
- JS String Concatenation
- JS search()
- JS indexOf()
- JS search() Vs. indexOf()
- JS match()
- JS match() Vs. search()
- JS replace()
- JS toString()
- JS String()
- JS includes()
- JS substr()
- JS Slice String
- JS charAt()
- JS repeat()
- JS split()
- JS charCodeAt()
- JS fromCharCode()
- JS startsWith()
- JS endsWith()
- JS trim()
- JS lastIndexOf()
- JavaScript Objects
- JS Objects
- JS Boolean Object
- JavaScript Math/Number
- JS Math Object
- JS Math.abs()
- JS Math.max()
- JS Math.min()
- JS Math.pow()
- JS Math.sqrt()
- JS Math.cbrt()
- JS Math.round()
- JS Math.ceil()
- JS Math.floor()
- JS Math.trunc
- JS toFixed()
- JS toPrecision()
- JS Math.random()
- JS Math.sign()
- JS Number.isInteger()
- JS NaN
- JS Number()
- JS parseInt()
- JS parseFloat()
- JavaScript Date and Time
- JS Date and Time
- JS Date()
- JS getFullYear()
- JS getMonth()
- JS getDate()
- JS getDay()
- JS getHours()
- JS getMinutes()
- JS getSeconds()
- JS getMilliseconds()
- JS getTime()
- JS getUTCFullYear()
- JS getUTCMonth()
- JS getUTCDate()
- JS getUTCDay()
- JS getUTCHours()
- JS getUTCMinutes()
- JS getUTCSeconds()
- JS getUTCMilliseconds()
- JS toDateString()
- JS toLocaleDateString()
- JS toLocaleTimeString()
- JS toLocaleString()
- JS toUTCString()
- JS getTimezoneOffset()
- JS toISOString()
- JavaScript Browser Objects
- JS Browser Objects
- JS Window Object
- JS Navigator Object
- JS History Object
- JS Screen Object
- JS Location Object
- JavaScript Document Object
- JS Document Object Collection
- JS Document Object Properties
- JS Document Object Methods
- JS Document Object with Forms
- JavaScript DOM
- JS DOM
- JS DOM Nodes
- JS DOM Levels
- JS DOM Interfaces
- JavaScript Cookies
- JS Cookies
- JS Create/Delete Cookies
- JavaScript Regular Expression
- JS Regular Expression
- JS RegEx .
- JS RegEx \w and \W
- JS RegEx \d and \D
- JS RegEx \s and \S
- JS RegEx \b and \B
- JS RegEx \0
- JS RegEx \n
- JS RegEx \xxx
- JS RegEx \xdd
- JS RegEx Quantifiers
- JS RegEx test()
- JS RegEx lastIndex
- JS RegEx source
- JavaScript Advance
- JS Page Redirection
- JS Form Validation
- JS Validations
- JS Error Handling
- JS Exception Handling
- JS try-catch throw finally
- JS onerror Event
- JS Multimedia
- JS Animation
- JS Image Map
- JS Debugging
- JS Browser Detection
- JS Security
- JavaScript Misc
- JS innerHTML
- JS getElementById()
- JS getElementsByClassName()
- JS getElementsByName()
- JS getElementsByTagName()
- JS querySelector()
- JS querySelectorAll()
- JS document.write()
- JS console.log()
- JS instanceof
- JavaScript Programs
- JavaScript Programs
JavaScript switch Statement
The switch statement in JavaScript, is used to execute some block of code, when the case value matches the expression value. For example:
<!DOCTYPE html> <html> <body> <button onclick="myFun()">What Day is Today?</button> <p>Today is: <span id="day">________</span></p> <script> function myFun() { let d; switch(new Date().getDay()) { case 0: d = "Sunday"; break; case 1: d = "Monday"; break; case 2: d = "Tuesday"; break; case 3: d = "Wednesday"; break; case 4: d = "Thursday"; break; case 5: d = "Friday"; break; case 6: d = "Saturday"; break; } document.getElementById("day").innerHTML = d; } </script> </body> </html>
Today is: ________
In above example, new Date().getDay() refers to an expression, whereas 1, 2, 3, 4, 5, and 6 refers to case values.
JavaScript switch Syntax
The syntax of switch statement in JavaScript, is:
switch(expression) { case value1: // block of code to execute // if value1 matches with value of expression break; case value2: // block of code to execute // if value2 matches with value of expression break; case value3: // block of code to execute // if value3 matches with value of expression break; . . . case valueN: // block of code to execute // if valueN matches with value of expression break; default: // block of code to execute // if no case values matches with value of expression break; }
The expression of the switch statement will be executed/evaluated once. Whatever the value comes out after evaluating the expression, is compared with the values of each case, one by one, from value1 to valueN. If a match found, then the block of code associated with that case, will be executed. And if, no match found, then the block of code, associated with default will be executed.
Note - Do not forget to use the break keyword/statement, to avoid executing/matching with other case values. It is not necessary to use the break statement for the last case, as the execution of switch ends at the end or after executing the last switch case.
Note - It is not necessary to put the default case at the end of switch statement.
Note - Sometime we need to execute same block of code for more than one switch case, or if we need to execute a block of code for multiple switch cases, then proceed in this way:
<!DOCTYPE html> <html> <body> <button onclick="myf()">What Day is Today?</button> <p>Today is: <span id="myspan">________</span></p> <script> function myf() { let dy; switch(new Date().getDay()) { case 1: dy = "Monday"; break; case 2: dy = "Tuesday"; break; case 3: dy = "Wednesday"; break; case 4: dy = "Thursday"; break; case 5: dy = "Friday"; break; case 0: case 6: dy = "Weekend Day"; break; } document.getElementById("myspan").innerHTML = dy; } </script> </body> </html>
Today is: ________
See the case 0 and 6 shares the same block of code.
« Previous Tutorial Next Tutorial »