{"id":40,"date":"2019-03-28T15:53:41","date_gmt":"2019-03-28T15:53:41","guid":{"rendered":"https:\/\/www.kindsonthegenius.com\/javascript\/?p=40"},"modified":"2020-08-06T06:02:23","modified_gmt":"2020-08-06T06:02:23","slug":"07-javascript-switch-statement","status":"publish","type":"post","link":"https:\/\/kindsonthegenius.com\/javascript\/07-javascript-switch-statement\/","title":{"rendered":"JavaScript – Switch Statement"},"content":{"rendered":"

Previously we discussed if-statement under Conditional Statements<\/a>. Now, you could have several if-else-if statements. But this is not always the best solution. Hence, there is an alternative to this. That is the Switch Statement.<\/p>\n

 <\/p>\n

How the Switch Statement Works<\/strong><\/p>\n

You can use the switch statement to\u00a0 replace repeated if-else-if statements.<\/p>\n

The flowchart of the switch statement is given below.<\/p>\n

 <\/p>\n

\"Switch<\/p>\n

 <\/p>\n

Syntax<\/strong><\/h4>\n

I consists of a switch statement and a number of case statements.<\/p>\n

Each case statement is followed by a corresponding block of code (statement). The interpreter checks each case statement against the value of the switch expression. If a match is found, then the particular case statement is executed.<\/p>\n

If no match is found for all the case statements, then the default statement is executed.<\/p>\n

 <\/p>\n

The syntax of the Switch statement is given below.<\/p>\n

<\/p>\n

switch (expression) {\r\n   case condition 1: statement 1\r\n   break;\r\n   \r\n   case condition 2: statement 2\r\n   break;\r\n   ...\r\n   \r\n   case condition n: statement n\r\n   break;\r\n   \r\n   default: default statement\r\n}\r\n<\/pre>\n
 <\/p>\n
Also notice the break<\/strong> statement. It’s just a single line. Just one word: break. This is used to exit the switch statement. So once a match is found and the statement is executed, then the break statement exits the switch statement.<\/p>\n
 <\/p>\n
Switch Statement Example<\/strong><\/h4>\n
An example of switch statement is given in the html file below.<\/p>\n
 <\/p>\n
<html><\/span>\r\n<head><title><\/span>Switch Statement Example<\/title><\/head><\/span>\r\n   <body><\/span>\r\n   \r\n      <script <\/span>type =<\/span> \"text\/javascript\"<\/span>><\/span>\r\n         <!--<\/span>\r\n            var<\/span> grade =<\/span> 'B'<\/span>;\r\n            document<\/span>.write(\"Entering switch statement block<br \/>\"<\/span>);\r\n            switch<\/span> (grade) {\r\n               case<\/span> 'A'<\/span>:<\/span> document<\/span>.write(\"Excellent<br \/>\"<\/span>);\r\n               break<\/span>;\r\n            \r\n               case<\/span> 'B'<\/span>:<\/span> document<\/span>.write(\"Very Good<br \/>\"<\/span>);\r\n               break<\/span>;\r\n            \r\n               case<\/span> 'C'<\/span>:<\/span> document<\/span>.write(\"Good<br \/>\"<\/span>);\r\n               break<\/span>;\r\n            \r\n               case<\/span> 'D'<\/span>:<\/span> document<\/span>.write(\"Fair<br \/>\"<\/span>);\r\n               break<\/span>;\r\n            \r\n               case<\/span> 'F'<\/span>:<\/span> document<\/span>.write(\"Fail<br \/>\"<\/span>);\r\n               break<\/span>;\r\n            \r\n               default<\/span>:<\/span>  document<\/span>.write(\"Invalid grade<br \/>\"<\/span>)\r\n            }\r\n         \/\/--><\/span>\r\n      <\/script><\/span>                  \r\n      \r\n      You can try different values for grade\r\n   <\/body><\/span>\r\n<\/html><\/span>\r\n<\/pre>\n
 <\/p>\n
If you view the code above, you will have the output:<\/p>\n
 <\/p>\n
Entering switch statement block\r\nVery Good\r\nYou can try different values for grade \r\n<\/pre>\n
 <\/p>\n
Now, assuming you did not use the break statements? Let’s try it to see what the output will be.<\/p>\n
The code without break statements is given below:<\/p>\n
 <\/p>\n
<html><\/span>\r\n<head><title><\/span>Switch Statement Example<\/title><\/head><\/span>\r\n   <body><\/span>\r\n   \r\n      <script <\/span>type =<\/span> \"text\/javascript\"<\/span>><\/span>\r\n         <!--<\/span>\r\n            var<\/span> grade =<\/span> 'B'<\/span>;\r\n            document<\/span>.write(\"Entering switch statement block<br \/>\"<\/span>);\r\n            switch<\/span> (grade) {\r\n               case<\/span> 'A'<\/span>:<\/span> document<\/span>.write(\"Excellent<br \/>\"<\/span>);\r\n            \r\n               case<\/span> 'B'<\/span>:<\/span> document<\/span>.write(\"Very Good<br \/>\"<\/span>);\r\n            \r\n               case<\/span> 'C'<\/span>:<\/span> document<\/span>.write(\"Good<br \/>\"<\/span>);\r\n            \r\n               case<\/span> 'D'<\/span>:<\/span> document<\/span>.write(\"Fair<br \/>\"<\/span>);\r\n            \r\n               case<\/span> 'F'<\/span>:<\/span> document<\/span>.write(\"Fail<br \/>\"<\/span>);\r\n            \r\n               default<\/span>:<\/span>  document<\/span>.write(\"Invalid grade<br \/>\"<\/span>)\r\n            }\r\n         \/\/--><\/span>\r\n      <\/script><\/span>                  \r\n      \r\n      You can try different values for grade\r\n   <\/body><\/span>\r\n<\/html><\/span>\r\n<\/pre>\n
 <\/p>\n
Now, if you view this page, you will see that it displays the result below. Clearly, this does not make any sense. Because we only have one grade.<\/p>\n
 <\/p>\n
Entering switch statement block\r\nVery Good\r\nGood\r\nFair\r\nFail\r\nInvalid grade\r\nYou can try different values for grade \r\n<\/pre>\n
 <\/p>\n
So don’t forget break statement.<\/p>\n","protected":false},"excerpt":{"rendered":"
Previously we discussed if-statement under Conditional Statements. Now, you could have several if-else-if statements. But this is not always the best solution. Hence, there is … <\/p>\n","protected":false},"author":395,"featured_media":42,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"footnotes":""},"categories":[2],"tags":[],"class_list":["post-40","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript-tutorials"],"_links":{"self":[{"href":"https:\/\/kindsonthegenius.com\/javascript\/wp-json\/wp\/v2\/posts\/40","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kindsonthegenius.com\/javascript\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kindsonthegenius.com\/javascript\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/javascript\/wp-json\/wp\/v2\/users\/395"}],"replies":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/javascript\/wp-json\/wp\/v2\/comments?post=40"}],"version-history":[{"count":2,"href":"https:\/\/kindsonthegenius.com\/javascript\/wp-json\/wp\/v2\/posts\/40\/revisions"}],"predecessor-version":[{"id":111,"href":"https:\/\/kindsonthegenius.com\/javascript\/wp-json\/wp\/v2\/posts\/40\/revisions\/111"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/javascript\/wp-json\/wp\/v2\/media\/42"}],"wp:attachment":[{"href":"https:\/\/kindsonthegenius.com\/javascript\/wp-json\/wp\/v2\/media?parent=40"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/javascript\/wp-json\/wp\/v2\/categories?post=40"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/javascript\/wp-json\/wp\/v2\/tags?post=40"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}