{"id":51725,"date":"2019-03-13T11:58:23","date_gmt":"2019-03-13T06:28:23","guid":{"rendered":"https:\/\/data-flair.training\/blogs\/?p=51725"},"modified":"2019-03-12T13:59:23","modified_gmt":"2019-03-12T08:29:23","slug":"javascript-switch-case-statement","status":"publish","type":"post","link":"https:\/\/data-flair.training\/blogs\/javascript-switch-case-statement\/","title":{"rendered":"JavaScript Switch Case with Example – Learn in 12 Mins"},"content":{"rendered":"

JavaScript Switch Case Statement<\/strong> use\u00a0for a value to change control of execution. It is an easy way to dispatch execution to different parts of code\u00a0based on the value of the expression. The definition clearly shows us the working of Switch cases, but how are these statements used in JavaScript? So, we will explore the working with an\u00a0example of a switch case in JavaScript.<\/p>\n

\"Learn<\/a><\/p>\n

What is JavaScript Switch Case Statement?<\/h2>\n

The JavaScript switch case statement is used for decision-making purposes<\/em>. Using if-else statements for this purpose will be less efficient over switch case statements and also it will make the code look complex.<\/p>\n

The switch case in JavaScript is a multi-way branch statement.<\/p>\n

The Syntax of JavaScript Switch Case<\/strong><\/p>\n

switch(expression) \r\n{\r\ncase value 1:\r\n        statement1;\r\n        break;\r\ncase value 2:\r\n        statement2;\r\n        break;\r\ncase value N;\r\n        statementN;\r\n        break;\r\ndefault: statement default;\r\n<\/pre>\n
You must learn about JavaScript\u00a0Syntax and implemenation of code<\/a><\/strong><\/p>\n
Execution Flow of Switch Cases Statement<\/strong><\/p>\n
\"Execution<\/a><\/p>\n
Explore the Architecture of JavaScript<\/a><\/strong><\/p>\n
Example<\/strong><\/p>\n
let a = 2+ 2;\r\nSwitch (a) {\r\n Case 1:\r\n    alert( \u201cToo small\u201d);\r\n    Break;\r\nCase 2:\r\n    alert(\u201cexactly\u201d);\r\n    Break;\r\nCase 3:\r\n    alert(\u201cToo large\u201d);\r\n    Break;\r\nDefault:\r\nalert(\u201cI don\u2019t know such values\u201d);\r\n}<\/pre>\n
Here, the switch starts to compare ‘a’ from first case variant that is 1. Then, the match fails. Then 2. That\u2019s a match, so the execution starts from case 2 until the nearest break.<\/p>\n
If there is no break then the execution continues with the next case without any choice.<\/p>\n
Both switch and case allow arbitrary expressions<\/strong>.<\/p>\n
Example<\/strong><\/p>\n
let a = \u201c1\u201d;\r\n Let b = \u201c0\u201d;\r\nswitch(+a) {\r\n    case b+1:\r\n      alert(\u201cthis runs\u201d);\r\n     break;\r\ndefault:\r\n    alert(\u201cthis doesn\u2019t run\u201d);\r\n}\r\n<\/pre>\n
Here, ‘+a’ gives 1, that\u2019s compared with ‘b+1’ in a case and the corresponding code executed.<\/p>\n
Recommended reading – Javascript classes<\/a><\/strong><\/p>\n
Grouping of Case in JavaScript Switch Case<\/h2>\n
Grouping can be done on the variant of the similar type.<\/p>\n
Example<\/strong><\/p>\n
let a = 2 + 2;\r\nswitch(a) {\r\n  case 1:\r\n    alert( \u2018right\u2019);\r\n    break;\r\n  case 2:\r\n  case 3:\r\n    alert(\u2018wrong\u2019);\r\nalert(\u2018why don\u2019t you take a math class?\u2019);\r\nbreak;\r\ndefault:\r\n  alert(\u2018The result is strange: really\u2019);\r\n}\r\n<\/pre>\n
Note ‘2’ and ‘3’ show the same message. The ability to \u201cgroup\u201d cases is the effect of how switch\/case works without break. Here, the execution of case 3 starts from line(*) and goes through case 5, because there is no break.<\/p>\n
Importance of Type in Switch Case<\/h2>\n
The values should be of the same type to match.<\/p>\n
Example<\/strong><\/p>\n
let arg = prompt (\u201center a value?\u201d);\r\nswitch(arg) {\r\n  case \u20180\u2019:\r\n  case \u20181\u2019:\r\n    alert(\u2018one or zero\u2019);\r\n    break;\r\n  case \u20182\u2019:\r\n    alert(\u2018two\u2019);\r\n    break;\r\n  case \u20183\u2019:\r\n    alert(\u2018never executes\u2019);\r\n   break;\r\ndefault: \r\n    alert(\u201cAn unknown value\u201d);\r\n}\r\n<\/pre>\n
1. For 0, 1 and the first alert runs.
\n2. For 2 the second alert runs.<\/p>\n
Follow this link to know about the JavaScript object<\/a><\/strong><\/p>\n
The Break Keyword<\/h2>\n
We have already seen the use of break for each statement. This causes the statements to \u2018break out\u2019<\/strong> of the JavaScript switch statement and continue to the next block of code.<\/p>\n
In other words when a match is found, then the break statement is encountered.<\/em><\/p>\n
If you would like multiple matches to bigger code blocks then the break statement would stop that from happening.<\/p>\n
JavaScript Switch with Multiple Cases and Same Code<\/h2>\n
There are many cases where a range is not the right solution, but you need to apply the same execution to multiple values.<\/p>\n
Instead of creating a complicated statement with multiple expression evaluations you can \u2018stack\u2019 the cases.<\/p>\n
Example<\/strong><\/p>\n
var my-day = new Time();\r\nswitch(my - Time .getTime())\r\n{\r\ncase 0 : console.log(\u201c Welcome to Time Schedule\u201d);\r\n         break;\r\ncase 1 :\r\ncase 2:\r\ncase 3:\r\ncase 4:\r\ncase 5:\r\n console.log( \u201cIt\u2019s early morning\u201d);\r\ncase 6: console.log(\u201c Morning Vibes at 4:00 A.M\u201d);\r\n         break;\r\n}\r\n<\/pre>\n
Output:<\/strong><\/p>\n
Welcome to Time Schedule<\/p>\n
Its early morning<\/p>\n
Morning vibes at 4:00 A.M<\/p>\n
Read about – 10 Essential Applications of JavaScript<\/a><\/strong><\/p>\n
Summary<\/h2>\n
Switch case statements are the fundamental pattern, which can be seen in every language. Developers can use the JavaScript switch case to replace complex if-else statement. From the above article, we learned three things, if multiple cases match a case value, so the first case will select. If no match cases are found, so the program continues to the default\u00a0label. Lastly, if no default label is found, so the program will continue to the statement after the switch.<\/p>\n
Hope, you liked the explanation. Post your queries and suggestions, into the comment box.<\/p>\n","protected":false},"excerpt":{"rendered":"
JavaScript Switch Case Statement use\u00a0for a value to change control of execution. It is an easy way to dispatch execution to different parts of code\u00a0based on the value of the expression. The definition clearly...<\/p>\n","protected":false},"author":5,"featured_media":51754,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18979],"tags":[19204,19206,19205,19207],"class_list":["post-51725","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-javascript-switch-case","tag-javascript-switch-case-example","tag-switch-case-statement","tag-the-break-keyword"],"yoast_head":"\nJavaScript Switch Case with Example - Learn in 12 Mins - DataFlair<\/title>\n<meta name=\"description\" content=\"Learn the execution flow of JavaScript Switch Case Statement with syntax and example. Also, see the working of Break statement, Multiple cases and same code\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/data-flair.training\/blogs\/javascript-switch-case-statement\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript Switch Case with Example - Learn in 12 Mins - DataFlair\" \/>\n<meta property=\"og:description\" content=\"Learn the execution flow of JavaScript Switch Case Statement with syntax and example. Also, see the working of Break statement, Multiple cases and same code\" \/>\n<meta property=\"og:url\" content=\"https:\/\/data-flair.training\/blogs\/javascript-switch-case-statement\/\" \/>\n<meta property=\"og:site_name\" content=\"DataFlair\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DataFlairWS\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-03-13T06:28:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/03\/JavaScript-Switch-Cases-Statements.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"DataFlair Team\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:site\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"DataFlair Team\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JavaScript Switch Case with Example - Learn in 12 Mins - DataFlair","description":"Learn the execution flow of JavaScript Switch Case Statement with syntax and example. Also, see the working of Break statement, Multiple cases and same code","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/data-flair.training\/blogs\/javascript-switch-case-statement\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript Switch Case with Example - Learn in 12 Mins - DataFlair","og_description":"Learn the execution flow of JavaScript Switch Case Statement with syntax and example. Also, see the working of Break statement, Multiple cases and same code","og_url":"https:\/\/data-flair.training\/blogs\/javascript-switch-case-statement\/","og_site_name":"DataFlair","article_publisher":"https:\/\/www.facebook.com\/DataFlairWS\/","article_published_time":"2019-03-13T06:28:23+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/03\/JavaScript-Switch-Cases-Statements.jpg","type":"image\/jpeg"}],"author":"DataFlair Team","twitter_card":"summary_large_image","twitter_creator":"@DataFlairWS","twitter_site":"@DataFlairWS","twitter_misc":{"Written by":"DataFlair Team","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/data-flair.training\/blogs\/javascript-switch-case-statement\/#article","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/javascript-switch-case-statement\/"},"author":{"name":"DataFlair Team","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/7f83c342f5d1632d6f7b4b0b0f447823"},"headline":"JavaScript Switch Case with Example – Learn in 12 Mins","datePublished":"2019-03-13T06:28:23+00:00","mainEntityOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/javascript-switch-case-statement\/"},"wordCount":551,"commentCount":0,"publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/javascript-switch-case-statement\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/03\/JavaScript-Switch-Cases-Statements.jpg","keywords":["JavaScript Switch Case","JavaScript Switch Case Example","Switch Case Statement","The break Keyword"],"articleSection":["JavaScript Tutorial"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/data-flair.training\/blogs\/javascript-switch-case-statement\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/data-flair.training\/blogs\/javascript-switch-case-statement\/","url":"https:\/\/data-flair.training\/blogs\/javascript-switch-case-statement\/","name":"JavaScript Switch Case with Example - Learn in 12 Mins - DataFlair","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/javascript-switch-case-statement\/#primaryimage"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/javascript-switch-case-statement\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/03\/JavaScript-Switch-Cases-Statements.jpg","datePublished":"2019-03-13T06:28:23+00:00","description":"Learn the execution flow of JavaScript Switch Case Statement with syntax and example. Also, see the working of Break statement, Multiple cases and same code","breadcrumb":{"@id":"https:\/\/data-flair.training\/blogs\/javascript-switch-case-statement\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/data-flair.training\/blogs\/javascript-switch-case-statement\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/javascript-switch-case-statement\/#primaryimage","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/03\/JavaScript-Switch-Cases-Statements.jpg","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/03\/JavaScript-Switch-Cases-Statements.jpg","width":1200,"height":628,"caption":"Learn Switch Case Statement in JavaScript"},{"@type":"BreadcrumbList","@id":"https:\/\/data-flair.training\/blogs\/javascript-switch-case-statement\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog Home","item":"https:\/\/data-flair.training\/blogs\/"},{"@type":"ListItem","position":2,"name":"JavaScript Tutorial","item":"https:\/\/data-flair.training\/blogs\/category\/javascript\/"},{"@type":"ListItem","position":3,"name":"JavaScript Switch Case with Example – Learn in 12 Mins"}]},{"@type":"WebSite","@id":"https:\/\/data-flair.training\/blogs\/#website","url":"https:\/\/data-flair.training\/blogs\/","name":"DataFlair","description":"Learn Today. Lead Tomorrow.","publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/data-flair.training\/blogs\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/data-flair.training\/blogs\/#organization","name":"DataFlair","url":"https:\/\/data-flair.training\/blogs\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","width":106,"height":48,"caption":"DataFlair"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DataFlairWS\/","https:\/\/x.com\/DataFlairWS","https:\/\/www.linkedin.com\/company\/dataflair-web-services-pvt-ltd\/","https:\/\/www.youtube.com\/user\/DataFlairWS"]},{"@type":"Person","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/7f83c342f5d1632d6f7b4b0b0f447823","name":"DataFlair Team","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/4cf3a74600d131330b8c481d519afd1574093ed89f6d3396a95393ad223eb7cd?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/4cf3a74600d131330b8c481d519afd1574093ed89f6d3396a95393ad223eb7cd?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4cf3a74600d131330b8c481d519afd1574093ed89f6d3396a95393ad223eb7cd?s=96&d=mm&r=g","caption":"DataFlair Team"},"description":"DataFlair Team creates expert-level guides on programming, Java, Python, C++, DSA, AI, ML, data Science, Android, Flutter, MERN, Web Development, and technology. Our goal is to empower learners with easy-to-understand content. Explore our resources for career growth and practical learning.","url":"https:\/\/data-flair.training\/blogs\/author\/dfteam1\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/51725","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/comments?post=51725"}],"version-history":[{"count":6,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/51725\/revisions"}],"predecessor-version":[{"id":51991,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/51725\/revisions\/51991"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media\/51754"}],"wp:attachment":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media?parent=51725"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/categories?post=51725"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/tags?post=51725"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}