{"id":1001,"date":"2021-05-16T13:51:38","date_gmt":"2021-05-16T13:51:38","guid":{"rendered":"https:\/\/usemynotes.com\/?p=1001"},"modified":"2024-10-27T20:28:36","modified_gmt":"2024-10-27T14:58:36","slug":"javascript-conditional-statements","status":"publish","type":"post","link":"https:\/\/usemynotes.com\/javascript-conditional-statements\/","title":{"rendered":"JavaScript Conditional Statements"},"content":{"rendered":"<p>Hello everyone, welcome back, in this module, I am going to discuss <strong>Javascript Conditional Statements<\/strong>. In the previous modules, we have studied what is JavaScript, and what are variables, operators, and functions in JavaScript. Now, let\u2019s know conditional statements.<\/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-conditional-statements\/#JavaScript_Conditional_Statements\" >JavaScript Conditional Statements<\/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-conditional-statements\/#Why_use_conditional_statements_in_JavaScript\" >Why use conditional statements in JavaScript?<\/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-conditional-statements\/#if-statement_in_JavaScript\" >if-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-conditional-statements\/#if-else_statement_in_JavaScript\" >if-else statement in JavaScript<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/usemynotes.com\/javascript-conditional-statements\/#Nested_if_statement_in_JavaScript\" >Nested if statement in JavaScript<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/usemynotes.com\/javascript-conditional-statements\/#If-else-if_ladder_in_JavaScript\" >If-else-if ladder in JavaScript<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/usemynotes.com\/javascript-conditional-statements\/#if-else_with_relational_operators_in_JavaScript\" >if-else with relational operators in JavaScript<\/a><\/li><\/ul><\/nav><\/div>\n<h2 style=\"text-align: center;\"><span class=\"ez-toc-section\" id=\"JavaScript_Conditional_Statements\"><\/span><strong>JavaScript Conditional Statements<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>In this module, I will discuss if and if-else statements, and in the next module, I will be discussing the switch statement.<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-1014 size-full\" src=\"https:\/\/usemynotes.com\/wp-content\/uploads\/2021\/05\/javascript-conditional-statements1.png\" alt=\"JavaScript conditional statements\" width=\"994\" height=\"650\" title=\"\" srcset=\"https:\/\/usemynotes.com\/wp-content\/uploads\/2021\/05\/javascript-conditional-statements1.png 994w, https:\/\/usemynotes.com\/wp-content\/uploads\/2021\/05\/javascript-conditional-statements1-300x196.png 300w, https:\/\/usemynotes.com\/wp-content\/uploads\/2021\/05\/javascript-conditional-statements1-768x502.png 768w, https:\/\/usemynotes.com\/wp-content\/uploads\/2021\/05\/javascript-conditional-statements1-150x98.png 150w, https:\/\/usemynotes.com\/wp-content\/uploads\/2021\/05\/javascript-conditional-statements1-696x455.png 696w, https:\/\/usemynotes.com\/wp-content\/uploads\/2021\/05\/javascript-conditional-statements1-642x420.png 642w, https:\/\/usemynotes.com\/wp-content\/uploads\/2021\/05\/javascript-conditional-statements1-741x486.png 741w\" sizes=\"(max-width: 994px) 100vw, 994px\" \/><\/p>\n<p>Like other programming languages, conditional statements in JavaScript are also known as decision-making statements. Conditional statements are the statements used to execute a particular set of codes depending upon the condition.<\/p>\n<p>In JavaScript, there are three types of conditional statements or decision-making statements.<\/p>\n<ol>\n<li>if statement<\/li>\n<li>if-else statement<\/li>\n<li><a href=\"https:\/\/usemynotes.com\/javascript-switch-statement\/\">switch statement<\/a><\/li>\n<\/ol>\n<h2><span class=\"ez-toc-section\" id=\"Why_use_conditional_statements_in_JavaScript\"><\/span>Why use conditional statements in JavaScript?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>In our daily life, we have to make some decisions and, based on the decision taken we decide what to do next or perform some task. For example, if I am hungry, only I will take dinner. Similarly, in programming sometimes a decision has to be made to perform some operation or execute statements.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"if-statement_in_JavaScript\"><\/span>if-statement in JavaScript<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The if-statement in JavaScript executes the set of statements only if the given condition is true.<\/p>\n<p><strong>Syntax<\/strong><\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nif (condition){\r\n    \/\/ statements\r\n}\r\n<\/pre>\n<p><strong>Example<\/strong><\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nif (age&gt;=18){\r\n    console.log (&quot;Eligible&quot;);\r\n}\r\n\r\n\/\/Eligible\r\n<\/pre>\n<p>Here, in the above example, the condition age&gt;=18 is true so, we are getting Eligible as an output.<\/p>\n<p>Given below is the flow chart for the if-statement to show how the if-statement executes the statements.<\/p>\n<p><img decoding=\"async\" class=\"size-full wp-image-1007 aligncenter\" src=\"https:\/\/usemynotes.com\/wp-content\/uploads\/2021\/05\/if-statement.jpg\" alt=\"if statement\" width=\"864\" height=\"864\" title=\"\" srcset=\"https:\/\/usemynotes.com\/wp-content\/uploads\/2021\/05\/if-statement.jpg 864w, https:\/\/usemynotes.com\/wp-content\/uploads\/2021\/05\/if-statement-300x300.jpg 300w, https:\/\/usemynotes.com\/wp-content\/uploads\/2021\/05\/if-statement-150x150.jpg 150w, https:\/\/usemynotes.com\/wp-content\/uploads\/2021\/05\/if-statement-768x768.jpg 768w, https:\/\/usemynotes.com\/wp-content\/uploads\/2021\/05\/if-statement-696x696.jpg 696w, https:\/\/usemynotes.com\/wp-content\/uploads\/2021\/05\/if-statement-420x420.jpg 420w\" sizes=\"(max-width: 864px) 100vw, 864px\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"if-else_statement_in_JavaScript\"><\/span>if-else statement in JavaScript<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The if-else statement executes the if-block statements only if the given condition is true, otherwise, it executes the else-block statements.<\/p>\n<p><strong>Syntax<\/strong><\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nif (condition) {\r\n    \/\/ statement1\r\n}\r\nelse {\r\n    \/\/ statement2\r\n}\r\n<\/pre>\n<p><strong>Example<\/strong><\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nlet age=14;\r\nif (age&gt;=18)\r\n    console.log (&quot;Eligible&quot;);\r\nelse\r\n    console.log (&quot;Not Eligible&quot;);\r\n\r\n\/\/Not Eligible\r\n<\/pre>\n<p>Here, in the above example, the condition age&gt;=18 is false, the else block is executed and we get a Not Eligible message as output. Given below is the flow chart for the if-statement to show how the if-statement executes the statements.<\/p>\n<p><img decoding=\"async\" class=\"size-full wp-image-1006 aligncenter\" src=\"https:\/\/usemynotes.com\/wp-content\/uploads\/2021\/05\/if-else-statement.jpg\" alt=\"if-else statement\" width=\"918\" height=\"918\" title=\"\" srcset=\"https:\/\/usemynotes.com\/wp-content\/uploads\/2021\/05\/if-else-statement.jpg 918w, https:\/\/usemynotes.com\/wp-content\/uploads\/2021\/05\/if-else-statement-300x300.jpg 300w, https:\/\/usemynotes.com\/wp-content\/uploads\/2021\/05\/if-else-statement-150x150.jpg 150w, https:\/\/usemynotes.com\/wp-content\/uploads\/2021\/05\/if-else-statement-768x768.jpg 768w, https:\/\/usemynotes.com\/wp-content\/uploads\/2021\/05\/if-else-statement-696x696.jpg 696w, https:\/\/usemynotes.com\/wp-content\/uploads\/2021\/05\/if-else-statement-420x420.jpg 420w\" sizes=\"(max-width: 918px) 100vw, 918px\" \/><\/p>\n<p><strong>Note:<\/strong> If there is only one line of statement inside if-block or else-block, then we can omit curly braces ({}).<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Nested_if_statement_in_JavaScript\"><\/span>Nested if statement in JavaScript<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The nested if-statement means if statements or if-else statements are placed inside other if statements or else statements. Using a nested if statement, you can create multiple conditions.<\/p>\n<p><strong>Syntax<\/strong><\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nif (condition1) {\r\n    if (condition2) {\r\n        \/\/ statement (s)\r\n    }\r\n}\r\n<\/pre>\n<p><strong>Example<\/strong><\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nif (6&gt;3) {\r\n    if (4&gt;2)\r\n        console.log (&quot;Hello&quot;);\r\n}\r\n\r\n\/\/Hello\r\n<\/pre>\n<p>Here, in the above example, the condition age&gt;=18 is true, we are getting Eligible as an output.<\/p>\n<p>We can also use nested if-statement inside the else block.<\/p>\n<p><strong>Syntax<\/strong><\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nif(condition1) {\r\n    \/\/ statement (s)\r\n}\r\nelse {\r\n    if (condition2) {\r\n        \/\/ statement (s)\r\n    }\r\n}\r\n<\/pre>\n<p><strong>Example<\/strong><\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nlet a=-6;\r\nif (a&lt;0)\r\n    console.log(&quot;a is less than 0.&quot;);\r\nelse\r\n{\r\n    if (a%2==0)\r\n        console.log (&quot;a is even.&quot;);\r\n}\r\n<\/pre>\n<p>We can also use another if-else statement inside if and else. For example,<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nlet a=6;\r\nif (a&lt;0)\r\n    console.log (&quot;a is less than 0.&quot;);\r\nelse\r\n{\r\n    if(a%2==0)\r\n        console.log(&quot;a is even.&quot;);\r\nelse\r\n    console.log (&quot;a is odd.&quot;);\r\n}\r\n<\/pre>\n<h2><span class=\"ez-toc-section\" id=\"If-else-if_ladder_in_JavaScript\"><\/span>If-else-if ladder in JavaScript<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>We can use multiple if-else-if statements to make multiple decisions. As soon as the condition satisfies or evaluates to be true, the statement associated with the if or else if block is executed, otherwise the statement associated with the else block is executed and the remaining else-if statements are ignored or not executed.<\/p>\n<p><strong>Syntax<\/strong><\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nif(condition1){\r\n    \/\/statement1\r\n}\r\nelse if(statement2) {\r\n    \/\/ statement2\r\n}\r\n\u2026\u2026...\r\nelse {\r\n    \/\/ statement(s)\r\n}\r\n<\/pre>\n<p><strong>Example<\/strong><\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nlet a=10,b=4;\r\nif(a&lt;b)\r\n    console.log(&quot;a is less than b.&quot;);\r\nelse if(a&gt;b)\r\n    console.log(&quot;a is greater than b.&quot;);\r\nelse\r\n    console.log(&quot;a is equal to b.&quot;);\r\n\/\/ Output\r\n\/\/a is greater than b.\r\n<\/pre>\n<h2><span class=\"ez-toc-section\" id=\"if-else_with_relational_operators_in_JavaScript\"><\/span>if-else with relational operators in JavaScript<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>We use relational operators with if and if-else statements for testing conditions and making a decision.<br \/>\nRelational <a href=\"https:\/\/usemynotes.com\/what-are-operators-in-javascript\/\">operators in JavaScript<\/a> are:<\/p>\n<ul>\n<li>&gt; greater than<\/li>\n<li>&gt;= greater than or equal to<\/li>\n<li>&lt; less than<\/li>\n<li>&lt;= less than or equal to<\/li>\n<li>== equal to<\/li>\n<li>!= not equal to<\/li>\n<li>=== strict equality<\/li>\n<li>!== strict inequality<\/li>\n<\/ul>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nlet a=9,b=9;\r\nif(a!=b)\r\n    console.log(&quot;a and b are not equal.&quot;);\r\nelse\r\n    console.log(&quot;a and b are equal.&quot;);\r\n\/\/a and b are equal.\r\n<\/pre>\n<p>If we use an assignment operator (=) instead of a comparison operator (==) in the condition then it will always return true because it performs assignment, not comparison.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nif(a=12)\r\n    console.log(&quot;Hii&quot;);\r\nelse\r\n    console.log(&quot;Hello&quot;);\r\n\r\n\/\/Hii\r\n<\/pre>\n<p>So, I hope you have now gained all the information about <strong>conditional statements in <a href=\"https:\/\/usemynotes.com\/what-is-javascript\/\">JavaScript<\/a><\/strong>. In the next module, I will discuss the <strong>switch statement<\/strong>. Until then, stay connected with us for more tutorials like these. Keep Coding!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hello everyone, welcome back, in this module, I am going to discuss Javascript Conditional Statements. In the previous modules, we have studied what is JavaScript, and what are variables, operators, and functions in JavaScript. Now, let\u2019s know conditional statements. JavaScript Conditional Statements In this module, I will discuss if and if-else statements, and in the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1014,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14],"tags":[],"class_list":{"0":"post-1001","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\/1001","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=1001"}],"version-history":[{"count":0,"href":"https:\/\/usemynotes.com\/wp-json\/wp\/v2\/posts\/1001\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/usemynotes.com\/wp-json\/wp\/v2\/media\/1014"}],"wp:attachment":[{"href":"https:\/\/usemynotes.com\/wp-json\/wp\/v2\/media?parent=1001"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/usemynotes.com\/wp-json\/wp\/v2\/categories?post=1001"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/usemynotes.com\/wp-json\/wp\/v2\/tags?post=1001"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}