JavaScript If Else Statement

In real-time programming, the JavaScript If Statement is one of the most valuable decision-making statements. The If condition allows the compiler to test the condition first. Depending upon the result, it will execute the code block. If the test condition is true, then only the controller executes a code block.

The syntax of the JavaScript If Statement has a simple structure. From the below code, when the test condition in the If is true, the Statement1, 2, 3, ……., n will execute. If the expression is false, all these lines will skip.

if (test condition)
{
 
  Statement1;
  Statement2;
  ………….
  ………….
  StatementN;
}

JavaScript If Statement Example

For the single line, curly brackets are not required in JavaScript, but for multiple blocks of code, it is mandatory. Using curly brackets following the If code is always good practice.

This program will check for a positive number using this If condition.

<!DOCTYPE html>

<html>
<head>
    <title> Example </title>
</head>
 <h1> Js Example </h1>
<body>
<script>
  var number = prompt("Please Enter any integer Value:", "9");
  if( number >= 1 )
  {
    document.write("You Have Entered Positive Integer");
  }
</script>
</body>
</html>

When you open the browser, the prompt box will open with a default value. We left to default 9 and Clicked OK.

Example

You Have Entered Positive Integer: 9

If you look at the above JavaScript if statement, the Value stored in the number variable is greater than zero. That’s why it displays code inside the curly brackets ({ }).

From the above example, what happens if the condition fails? (number < 1). It prints nothing because we have nothing to print after the if condition. I hope you are confused. Let us see the flow chart of the If block for a better understanding.

If Statement Example 2

<!DOCTYPE html>

<html>
<head>
    <title> Example </title>
</head>
 <h1> Js </h1>
<body>
<script>
  var number = prompt("Please Enter any integer Value:", "9");
  if( number >= 1 )
  {
    document.write("You Have Entered Positive Integer:  " + number);
  }
  document.write("<br \> This Message is not coming from IF STATEMENT\n");
</script>
</body>
</html>

In this If statement example, we left the number to default 9

JavaScript If Statement Example

If you can observe from the above output, it is displaying both the document write lines because 9 is greater than 1. Let’s try the negative values in the prompt box to fail the condition deliberately.

-33

If the expression fails because -33 is less than 1, it displays nothing from the If condition or statement block. So, it is showing only the code outside the block.

Js

This Message is not coming from IF STATEMENT

JavaScript If Else Statement

The If Else Statement is an extension of the If we already explained. And it only executes the code when the given expression is evaluated to be true. If the condition is false, it will not run any code inside the block.

It would be nice to execute something in the real world when the condition fails. To do so, We have to use this If else statement. Here, Else will execute the statements when the condition fails.

The syntax of the JavaScript If Else Statement is as follows:

if (Test condition)
{
  //If the condition is TRUE then these will be executed
  True statements;
}

else
{
  //If the condition is FALSE then these will be executed
  False statements;
}

If the test condition in the above structure is true, the True statements will execute. If it is false, the False code will execute.

JavaScript If Else Statement Example

In this if else example program, we will place four different statements. If the condition is true, we will display two different lines. If the condition is false, JavaScript will display another two.

<!DOCTYPE html>

<html>
<head>
    <title> Else Statement </title>
</head>
 <h1> Else Statement </h1>
<body>
<script>
  var marks = 60;
  if( marks >= 50 )
  {
    document.write("<b> Congratulations </b>"); //s1
    document.write("<br\> You Passed the subject" ); //s2
  }
  else
  {
    document.write("<b> You Failed </b>"); //s3
    document.write("<br\> Better Luck Next Time" ); //s4
  }
</script>
</body>
</html>

OUTPUT 1: Here marks is 60, and the Condition is TRUE that’s why statements inside the If Statement are displayed as Browser output

JavaScript If Else Statement 1

OUTPUT 2: Here, we changed the marks variable to 30. It means the Condition is FALSE that’s why code inside the Else block displayed as an output.

You Failed
Better Luck Next Time