{"id":1020,"date":"2021-05-30T16:16:38","date_gmt":"2021-05-30T16:16:38","guid":{"rendered":"https:\/\/usemynotes.com\/?p=1020"},"modified":"2024-10-27T20:29:04","modified_gmt":"2024-10-27T14:59:04","slug":"javascript-switch-statement","status":"publish","type":"post","link":"https:\/\/usemynotes.com\/javascript-switch-statement\/","title":{"rendered":"JavaScript Switch Statement"},"content":{"rendered":"<p>Hi guys, welcome back, in this tutorial, I am going to discuss the <strong>JavaScript switch statement<\/strong>. In the previous module, we have studied conditional statements in JavaScript. So, without any delay, let\u2019s begin and know the switch statement.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_80 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 eztoc-toggle-hide-by-default' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/usemynotes.com\/javascript-switch-statement\/#JavaScript_Switch_Statement\" >JavaScript Switch Statement<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/usemynotes.com\/javascript-switch-statement\/#Flow_chart_of_the_switch_statement\" >Flow chart of the switch statement<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/usemynotes.com\/javascript-switch-statement\/#Why_use_switch_statement_in_JavaScript\" >Why use switch statement in JavaScript?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/usemynotes.com\/javascript-switch-statement\/#Nested_switch_statement\" >Nested switch statement<\/a><\/li><\/ul><\/nav><\/div>\n<h2 style=\"text-align: center;\"><span class=\"ez-toc-section\" id=\"JavaScript_Switch_Statement\"><\/span>JavaScript Switch Statement<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Like if and <a href=\"https:\/\/usemynotes.com\/javascript-conditional-statements\/\">if-else statements<\/a>, the switch statement in JavaScript is also a conditional statement, which means that the statement will execute depending upon the condition or expression.<\/p>\n<p><img decoding=\"async\" class=\"size-full wp-image-1022 aligncenter\" src=\"https:\/\/usemynotes.com\/wp-content\/uploads\/2021\/05\/javascript-switch-statement.jpg\" alt=\"javascript switch statement\" width=\"930\" height=\"649\" title=\"\" srcset=\"https:\/\/usemynotes.com\/wp-content\/uploads\/2021\/05\/javascript-switch-statement.jpg 930w, https:\/\/usemynotes.com\/wp-content\/uploads\/2021\/05\/javascript-switch-statement-300x209.jpg 300w, https:\/\/usemynotes.com\/wp-content\/uploads\/2021\/05\/javascript-switch-statement-768x536.jpg 768w, https:\/\/usemynotes.com\/wp-content\/uploads\/2021\/05\/javascript-switch-statement-150x105.jpg 150w, https:\/\/usemynotes.com\/wp-content\/uploads\/2021\/05\/javascript-switch-statement-696x486.jpg 696w, https:\/\/usemynotes.com\/wp-content\/uploads\/2021\/05\/javascript-switch-statement-602x420.jpg 602w, https:\/\/usemynotes.com\/wp-content\/uploads\/2021\/05\/javascript-switch-statement-100x70.jpg 100w\" sizes=\"(max-width: 930px) 100vw, 930px\" \/><\/p>\n<p><strong>Syntax<\/strong><\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nswitch(expression)\r\n{\r\n    case constant1: statement(s)\r\n                    break;\r\n    case constant2: statement(s)\r\n                    break;\r\n    \u2026\u2026\u2026\r\n    \u2026\u2026\u2026\r\n    case constant: statement(s)\r\n               break;\r\n    default: statement(s)\r\n}\r\n<\/pre>\n<p>An expression can be a number, <a href=\"https:\/\/usemynotes.com\/what-are-data-types-in-javascript\/\">string<\/a>, or character.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nlet a=2;\r\nswitch(a)\r\n{\r\n    case 1: console.log(&quot;One&quot;); break;\r\n    case 2: console.log(&quot;Two&quot;); break;\r\n    default: console.log (&quot;Wrong Choice!&quot;);\r\n}\r\n\r\n\/\/Output\r\n\/\/Two\r\n<\/pre>\n<h2><span class=\"ez-toc-section\" id=\"Flow_chart_of_the_switch_statement\"><\/span>Flow chart of the switch statement<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><img decoding=\"async\" class=\"size-full wp-image-1021 aligncenter\" src=\"https:\/\/usemynotes.com\/wp-content\/uploads\/2021\/05\/flowchart-of-javascript-switch-statement.jpg\" alt=\"flowchart of javascript switch statement\" width=\"900\" height=\"660\" title=\"\" srcset=\"https:\/\/usemynotes.com\/wp-content\/uploads\/2021\/05\/flowchart-of-javascript-switch-statement.jpg 900w, https:\/\/usemynotes.com\/wp-content\/uploads\/2021\/05\/flowchart-of-javascript-switch-statement-300x220.jpg 300w, https:\/\/usemynotes.com\/wp-content\/uploads\/2021\/05\/flowchart-of-javascript-switch-statement-768x563.jpg 768w, https:\/\/usemynotes.com\/wp-content\/uploads\/2021\/05\/flowchart-of-javascript-switch-statement-150x110.jpg 150w, https:\/\/usemynotes.com\/wp-content\/uploads\/2021\/05\/flowchart-of-javascript-switch-statement-696x510.jpg 696w, https:\/\/usemynotes.com\/wp-content\/uploads\/2021\/05\/flowchart-of-javascript-switch-statement-573x420.jpg 573w, https:\/\/usemynotes.com\/wp-content\/uploads\/2021\/05\/flowchart-of-javascript-switch-statement-80x60.jpg 80w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/p>\n<p>The default block is optional. The statements or code corresponding to the default block will be executed only when none of the cases matches. Suppose in the above example, if a=3, we will get the Wrong Choice! as output.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nlet a=3;\r\nswitch(a)\r\n{\r\n    case 1: console.log(&quot;One&quot;); break;\r\n    case 2: console.log(&quot;Two&quot;); break;\r\n    default: console.log (&quot;Wrong Choice!&quot;);\r\n}\r\n\r\n\/\/Output\r\n\/\/Wrong Choice!\r\n<\/pre>\n<p>The break keyword is also optional. The switch block terminates as soon as the break statement is reached and the control flow of the program jumps to the statements immediately following the switch block. If we do not write a break keyword then all the cases will be executed.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nlet num=3;\r\nswitch(num)\r\n{\r\n    case 1: console.log(&quot;One&quot;);\r\n    case 2: console.log(&quot;Two&quot;);\r\n    case 3: console.log(&quot;Three&quot;);\r\n    case 4: console.log(&quot;Four&quot;);\r\n    case 5: console.log(&quot;Five&quot;);\r\n    case 6: console.log(&quot;Six&quot;);\r\n    case 7: console.log(&quot;Seven&quot;);\r\n    default: console.log (&quot;Wrong Choice!&quot;);\r\n}\r\n\r\n\/\/Output\r\n\/\/Three\r\n\/\/Four\r\n\/\/Five\r\n\/\/Six\r\n\/\/Seven\r\n\/\/Wrong Choice!\r\n<\/pre>\n<p>In the above example, you might be surprised why we are getting output other than Three, this is because there is no break keyword so all the remaining cases will also be executed after case 3. So, be careful to use the break keyword in a switch statement, otherwise, we will be getting the wrong output.<\/p>\n<p>The break is not used in the default block because the flow of control will automatically come out of the switch after the default is executed.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Why_use_switch_statement_in_JavaScript\"><\/span>Why use switch statement in JavaScript?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>You might be thinking about why to use a switch statement if we have an if-else statement in <a href=\"https:\/\/usemynotes.com\/javascript\/\">JavaScript<\/a>. So, let\u2019s discuss.<\/p>\n<p>If multiple if-else statements are used in the program, then the program might become difficult to understand and read. The programmer might get confused. So, to overcome the same problem, we need to use the switch statement to make our program easy to read and understand. The switch statement is an alternative to if-else-if statements.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nconst ch=3;\r\nif(ch==1)\r\n    console.log(&quot;Today in Monday &quot;);\r\nelse if(ch==2)\r\n    console.log(&quot;Today in Tuesday &quot;);\r\nelse if(ch==3)\r\n    console.log(&quot;Today in Wednesday &quot;);\r\nelse if(ch==4)\r\n    console.log(&quot;Today in Thursday &quot;);\r\nelse if(ch==5)\r\n    console.log(&quot;Today in Friday &quot;);\r\nelse if(ch==6)\r\n    console.log(&quot;Today in Saturday &quot;);\r\nelse if(ch==7)\r\n    console.log(&quot;Today in Sunday &quot;);\r\nelse\r\n    console.log(&quot;Wrong Choice!&quot;);\r\n\/\/Output\r\n\/\/Today is Wednesday\r\n<\/pre>\n<p>The above program can be done using a switch statement.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nconst ch=3;\r\nswitch(ch)\r\n{\r\n    case 1: console.log(&quot;Today is Monday&quot;); break;\r\n    case 2: console.log(&quot;Today is Tuesday&quot;); break;\r\n    case 3: console.log(&quot;Today is Wednesday&quot;);break;\r\n    case 4: console.log(&quot;Today is Thursday&quot;);break;\r\n    case 5: console.log(&quot;Today is Friday&quot;);break;\r\n    case 6: console.log(&quot;Today is Saturday&quot;);break;\r\n    case 7: console.log(&quot;Today is Sunday&quot;);break;\r\n    default: console.log(&quot;Wrong Choice!&quot;);\r\n}\r\n\r\n\/\/Output\r\n\/\/Today is Wednesday\r\n<\/pre>\n<p>We can also use an expression in place of a condition.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nconst n=201;\r\nswitch(n%2)\r\n{\r\n    case 0: console.log (&quot;201 is an even number.&quot;); break;\r\n    case 1: console.log (&quot;201 is an odd number.&quot;); break;\r\n}\r\n\r\n\/\/Output\r\n\/\/201 is an odd number.\r\n<\/pre>\n<h2><span class=\"ez-toc-section\" id=\"Nested_switch_statement\"><\/span>Nested switch statement<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Like nested if-else, we can also use nested switch statements in our program.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nlet a=1;\r\nconst ch='-';\r\nundefined\r\nswitch(a)\r\n{\r\n    case 1:console.log(&quot;One&quot;);\r\n    switch(ch) {\r\n        case '+': console.log(&quot;Sum&quot;,12+7); break;\r\n        case '-': console.log(&quot;Difference&quot;,12-7); break;\r\n    }\r\n    case 2: console.log(&quot;Two&quot;); break;\r\n    default: console.log(&quot;Wrong Choice&quot;);\r\n}\r\n\r\n\/\/Output\r\n\/\/One\r\n\/\/Difference 5\r\n\/\/Two\r\n<\/pre>\n<p>I hope you liked this module and understood what is <strong>switch statement in javascript<\/strong> and why to use it. Stay connected with us for more modules like this. Until then, keep practicing!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hi guys, welcome back, in this tutorial, I am going to discuss the JavaScript switch statement. In the previous module, we have studied conditional statements in JavaScript. So, without any delay, let\u2019s begin and know the switch statement. JavaScript Switch Statement Like if and if-else statements, the switch statement in JavaScript is also a conditional [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1022,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14],"tags":[],"class_list":{"0":"post-1020","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-javascript"},"_links":{"self":[{"href":"https:\/\/usemynotes.com\/wp-json\/wp\/v2\/posts\/1020","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/usemynotes.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/usemynotes.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/usemynotes.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/usemynotes.com\/wp-json\/wp\/v2\/comments?post=1020"}],"version-history":[{"count":0,"href":"https:\/\/usemynotes.com\/wp-json\/wp\/v2\/posts\/1020\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/usemynotes.com\/wp-json\/wp\/v2\/media\/1022"}],"wp:attachment":[{"href":"https:\/\/usemynotes.com\/wp-json\/wp\/v2\/media?parent=1020"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/usemynotes.com\/wp-json\/wp\/v2\/categories?post=1020"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/usemynotes.com\/wp-json\/wp\/v2\/tags?post=1020"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}