JavaScript if-else statements with example programs

If-else statements are the programming language's superheroes, swooping in to save the day when our code needs to make a decision. Without them, our programs would be frozen in indecision, unable to respond to changing conditions.

Understanding how if-else statements work is crucial for creating efficient and effective code. So in this article, I'll list conditional statements along with their definition and example programs. The conditional statements that are going to be covered in this post are:

The if statement in JavaScript

The if statement in JavaScript is used to execute some blocks of code only if the given condition evaluates to be true. For example:

HTML with JavaScript Code
<!DOCTYPE html>
<html>
<body>

   <p id="xyz"></p>
   
   <script>
      let x = 5;
      if(x%2 == 0)
         document.getElementById("xyz").innerHTML = "Even number";
   </script>
   
</body>
</html>
Output

In above example, the following statement:

document.getElementById("xyz").innerHTML = "Even number";

will be executed only if the following condition:

x%2 == 0

evaluates to be true. Since the condition x%2 == 0 or 5%2 == 0 or 1 == 0 evaluates to be false, nothing will be produced on the output.

JavaScript if statement syntax

The syntax of the if statement in JavaScript is:

if(condition) {
   // block of code to execute if condition evaluates to be true
}

JavaScript if statement example

Consider the following code as an example demonstrating the use of the "if" statement in JavaScript:

HTML with JavaScript Code
<!DOCTYPE html>
<html>
<body>

   <p id="abc"></p>
   
   <script>
      let a = 10, b = 20;
      if(b>a)
         document.getElementById("abc").innerHTML = "The value of 'b' is greater than 'a'";
   </script>
   
</body>
</html>
Output

The if inside another if is considered a nested if statement. For example:

HTML with JavaScript Code
<!DOCTYPE html>
<html>
<body>

   <p id="myPara"></p>
   
   <script>
      let m = 10;
      if(m>0)
      {
         if(m==10)
         {
            document.getElementById("myPara").innerHTML = "The value is 10";
         }
      }
   </script>
   
</body>
</html>
Output

The if-else statement in JavaScript

The JavaScript if-else statement is used to execute some block of code if the given condition evaluates to true or some other block of code if the given condition evaluates to false. For example:

HTML with JavaScript Code
<!DOCTYPE html>
<html>
<body>

   <p id="xyz"></p>
   
   <script>
      let x = 5;
      if(x%2 == 0)
         document.getElementById("xyz").innerHTML = "Even number";
      else
         document.getElementById("xyz").innerHTML = "Odd number";
   </script>
   
</body>
</html>
Output

JavaScript if-else statement syntax

The syntax of the if-else statement in JavaScript is:

if(condition) {
   // block of code to execute if condition evaluates to be true
}
else {
   // block of code to execute if condition evaluates to be false
}

JavaScript if-else statement example

Consider the following code as an example demonstrating the use of the if-else statement in JavaScript:

HTML with JavaScript Code
<!DOCTYPE html>
<html>
<body>

   <p id="abc"></p>
   
   <script>
      let a = 10, b = 20;
      if(b>a)
         document.getElementById("abc").innerHTML = "The value of 'b' is greater than 'a'";
      else
         document.getElementById("abc").innerHTML = "The value of 'b' is less than 'a'";
   </script>
   
</body>
</html>
Output

if-else with multiple conditions in JavaScript

We can use the "if-else" statement to implement multiple conditions to execute a particular block of code associated with the condition that evaluates to true. For example:

HTML with JavaScript Code
<!DOCTYPE html>
<html>
<body>

   <p id="myPara"></p>
   
   <script>
      let v = -10;
      if(v>0)
         document.getElementById("myPara").innerHTML = "Positive number";
      else if(v<0)
         document.getElementById("myPara").innerHTML = "Negative number";
      else if(v==0)
         document.getElementById("myPara").innerHTML = "Zero";
      else
         document.getElementById("myPara").innerHTML = "Not a number";
   </script>
   
</body>
</html>
Output

The syntax of an if-else statement with multiple conditions in JavaScript is:

if(condition_1) {
   // block of code to execute if condition_1 evaluates to be true
}
else if(condition_2) {
   // block of code to execute if condition_2 evaluates to be true
}
else if(condition_3) {
   // block of code to execute if condition_3 evaluates to be true
}
:
else if(condition_N) {
   // block of code to execute if condition_N evaluates to be true
}
else {
   // block of code to execute if all conditions evaluates to be false
}

The checking of conditions starts with the first, then the second, then the third, and so on. If any condition evaluates to true, then the block of code associated with that condition will be executed, and all the other conditions along with the "else" will be skipped. For example:

HTML with JavaScript Code
<!DOCTYPE html>
<html>
<body>

   <p id="mypar"></p>
   
   <script>
      let myval = 10;
      if(myval<0) {
         document.getElementById("mypar").innerHTML = "Negative number";
      }
      else if(myval > 100) {
         document.getElementById("mypar").innerHTML = "Greater than 100";
      }
      else if(myval>0) {
         document.getElementById("mypar").innerHTML = "Positive number";
      }
      else if(myval == 10) {
         document.getElementById("mypar").innerHTML = "Equal to 10";
      }
      else if(myval == 0) {
         document.getElementById("mypar").innerHTML = "Equal to 0";
      }
      else {
         document.getElementById("mypar").innerHTML = "Not a number";
      }
   </script>
   
</body>
</html>
Output

The condition right after the myval>0, that is, myval == 10, is also a true one, but will not be executed as a condition before it has already been executed as true. One more thing is that, if none of the mentioned conditions evaluates to true, then the block of code associated with the "else" will be executed.

Nested conditional statements in JavaScript

We can nest one conditional statement inside another. As an example:

HTML with JavaScript Code
<!DOCTYPE html>
<html>
<body>

   <p>Largest = <span id="res"></span></p>
   
   <script>
      let m = 10, n = 8, o = 13, big;
      if(m>n)
      {
         if(n>o)
         {
            big = m;
         }
         else
         {
            if(o>m)
            {
               big = o;
            }
            else
            {
               big = m;
            }
         }
      }
      else
      {
         if(n>o)
         {
            big = n;
         }
         else
         {
            big = o;
         }
      }
      document.getElementById("res").innerHTML = big;
   </script>
   
</body>
</html>
Output

Largest = 13

JavaScript Online Test


« Previous Tutorial Next Tutorial »


Liked this post? Share it!