JavaScript If Else Statement

The JavaScript If Else Statement is an extension of the If statement that we already explained in the previous article. 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 else 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.

JavaScript if else syntax

The syntax of the 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, JS will display another two. Please refer to the If condition article.

<!DOCTYPE html>

<html>
<head>
    <title> Else Statement </title>
</head>
 <h1> Else Statement </h1>
<body>
<script>
  let 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 Example

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

You Failed
Better Luck Next Time

JavaScript if else multiple conditions

We can use the logical AND (&&) or logical OR (||) operator to write multiple conditions inside the if else statement.

let age = 20;
let user = "admin";
if(user == "admin" && age > 18) {
    console.log("Welcome");
}
else {
    console.log("Invalid entry");
}
Welcome

JavaScript if else shorthand

The shorthand of the if else statement to write in one line is the ternary operator or the conditional operator. It starts with an expression followed by a true result and then falsy result.

let n = 10;
let result = n % 2 == 0? "Even":"Odd";
console.log(result);
Even

What is the difference between == and === in JavaScript if statements?

Both == (equality) and === (strict equality) are used to find the equality. However, they differ in the type casting. For the same data types, both return the same result; whereas type casting is required, they differ.

let a = 10;
let b = "10";
if (a == b) {
    console.log("Equal");
}
Equal

If we use the same program with strict equality (===), the condition fails because it does not support typecasting. So, both 10 and “10” are two distinct items.

let a = 10;
let b = "10";
if (a === b) {
    console.log("Equal");
} else {
    console.log("Not Equal");
}
Not Equal

TIP: Please refer to the Assignment Operators article to see more information about the equality (==) and strict equality (===) operators.

JavaScript if else array

We can use the if else statement on array items in many ways. For instance, searching for an item, finding even numbers in an array, etc. In the following example, we use the if else statement with the array.include() method to find Kiwi inside the fruits array. Similarly, use condition (n >0) approach to find each array number is a positive or negative number.

const fruits = ["apple", "kiwi", "banana", "orange"];

if (fruits.includes("kiwi")) {
    console.log("Fruit Found");
} else {
    console.log("Not found");
}
Fruit Found