Teachnique
      CourseRoadmaps
      Login

      OverviewPlacementSyntaxHello WorldConsole.log()CommentsVariableslet StatementConstantsData TypesType ConversionsStrict ModeReserved Keywords

      OperatorsArithmetic OperatorsComparison OperatorsLogical OperatorsBitwise OperatorsAssignment OperatorsConditional Operatorstypeof OperatorNullish Coalescing OperatorDelete OperatorComma OperatorGrouping OperatorYield OperatorSpread OperatorExponentiation OperatorOperator Precedence

      If...ElseWhile LoopsFor LoopFor...in LoopFor...of LoopLoop ControlBreak StatementContinue StatementSwitch CaseUser Defined Iterators

      FunctionsFunction ExpressionsFunction ParametersDefault ParametersFunction() ConstructorFunction HoistingArrow FunctionsFunction InvocationFunction call() MethodFunction apply() MethodFunction bind() MethodClosuresVariable ScopeGlobal VariablesSmart Function Parameters

      NumberBooleanStringsArraysDateMathRegExpSymbolSetsWeakSetMapsWeakMapIterablesReflectTypedArrayTempate LiteralsTagged Templates

      Objects OverviewClassesObject PropertiesObject MethodsStatic MethodsDisplay ObjectsObject AccessorsObject ConstructorsNative PrototypesES5 Object MethodsEncapsulationInheritanceAbstractionPolymorphismDestructuring AssignmentObject DestructuringArray DestructuringNested DestructuringOptional ChainingGlobal ObjectMixinsProxies

      HistoryVersionsES5ES6ECMAScript 2016ECMAScript 2017ECMAScript 2018ECMAScript 2019ECMAScript 2020ECMAScript 2021ECMAScript 2022

      CookiesCookie AttributesDeleting Cookies

      Browser Object ModelWindow ObjectDocument ObjectScreen ObjectHistory ObjectNavigator ObjectLocation ObjectConsole Object

      Web APIHistory APIStorage APIForms APIWorker APIFetch APIGeolocation API

      EventsDOM Events

      Feedback

      Submit request if you have any questions.

      Course
      If...Else

      JavaScript Tutorial

      This JavaScript tutorial is crafted for beginners to introduce them to the basics and advanced concepts of JavaScript. By the end of this guide, you'll reach a proficiency level that sets the stage for further growth. Aimed at empowering you to progress towards becoming a world-class software developer, this tutorial paves the way for a successful career in web development and beyond.

      If...else Statement

      The JavaScript if...else statement executes a block of code when the specified condition is true. When the condition is false the else block will be executed. The if-else statements can be used to control the flow of execution of a program based on different conditions.
      While writing a program, there may be a situation when you need to adopt one out of a given set of paths. In such cases, you need to use conditional statements that allow your program to make correct decisions and perform the right actions.
      JavaScript supports conditional statements used to perform different actions based on different conditions. Here we will explain the if...else statement.

      Flow Chart of if-else

      The following flow chart shows how the if-else statement works.
      
      JavaScript supports the following forms of if...else statement
      • if statement
      • if...else statement
      • if...else if... statement.

      JavaScript if statement

      The if statement is the fundamental control statement that allows JavaScript to make decisions and execute statements conditionally.

      Syntax

      The syntax for a basic if statement is as follows
      if (expression) {
         Statement(s) to be executed if expression is true
      }
      Here a JavaScript expression is evaluated. If the resulting value is true, the given statement(s) are executed. If the expression is false, then no statement would be not executed. Most of the times, you will use comparison operators while making decisions.

      Example

      Try the following example to understand how the if statement works.
      <html>
      <body>     
         <div id ='output'> </div>
         <script type = "text/javascript">
            let result;
            let age = 20;
            if( age > 18 ) {
               result = "Qualifies for driving";
            }
      	  document.getElementById("output").innerHTML = result;
         </script>      
      <p> Set the variable to a different value and then try... </p>
      </body>
      </html>

      Output

      Qualifies for driving
      Set the variable to different value and then try...

      JavaScript if...else statement

      The 'if...else' statement is the next form of control statement that allows JavaScript to execute statements in a more controlled way.

      Syntax

      if (expression) {
         Statement(s) to be executed if expression is true
      } else {
         Statement(s) to be executed if expression is false
      }
      Here JavaScript expression is evaluated. If the resulting value is true, the given statement(s) in the ‘if’ block, are executed. If the expression is false, then the given statement(s) in the else block are executed.

      Example

      Try the following code to learn how to implement an if-else statement in JavaScript.
      <html>
      <body>
         <div id ='output'> </div>
         <script type = "text/javascript">
      	  let result;
            let age = 15;
            if( age > 18 ) {
               result = "Qualifies for driving";
            } else {
               result = "Does not qualify for driving";
            }
            document.getElementById("output").innerHTML = result;
         </script>     
         <p> Set the variable to a different value and then try... </p>
      </body>
      </html>

      Output

      Does not qualify for driving
      Set the variable to different value and then try...

      JavaScript if...else if... statement

      The if...else if... statement (also called as if...else ladder)is an advanced form of if…else that allows JavaScript to make a correct decision out of several conditions.

      Syntax

      The syntax of an if-else-if statement is as follows
      if (expression 1) {
         Statement(s) to be executed if expression 1 is true
      } else if (expression 2) {
         Statement(s) to be executed if expression 2 is true
      } else if (expression 3) {
         Statement(s) to be executed if expression 3 is true
      } else {
         Statement(s) to be executed if no expression is true
      }
      There is nothing special about this code. It is just a series of if statements, where each if is a part of the else clause of the previous statement. Statement(s) are executed based on the true condition, if none of the conditions is true, then the else block is executed.

      Example

      Try the following code to learn how to implement an if-else-if statement in JavaScript.
      <html>
      <body>
         <div id ="demo"></div>
         <script type="text/javascript">
      	  const output = document.getElementById("demo")
            let book = "maths";
            if (book == "history") {
               output.innerHTML="<b>History Book</b>";
            } else if (book == "maths") {
               output.innerHTML="<b>Maths Book</b>";
            } else if (book == "economics") {
               output.innerHTML="<b>Economics Book</b>";
            } else {
               output.innerHTML="<b>Unknown Book</b>";
            }
          </script>
          <p> Set the variable to a different value and then try... </p>
      </body>
      <html>

      Output

      Maths Book
      Set the variable to different value and then try...