JavaScript If Else

Learn JavaScript if else statements with detailed explanations, syntax, examples, outputs, and real-world practical usage.

JavaScript If Else

if else statements are used to make decisions in JavaScript programs. They allow programs to execute different blocks of code based on conditions.

Decision making is one of the most important concepts in programming because real-world applications constantly check conditions before performing actions.

Why If Else is Important?

  • Helps programs make decisions
  • Executes different code based on conditions
  • Creates dynamic applications
  • Handles user choices and validations
  • Controls program flow

What is a Condition?

A condition is an expression that returns either true or false. 

10 > 5

Output

true

Since the condition is true, JavaScript can execute related code.

JavaScript if Statement

The if statement executes code only when the condition is true. 

let age = 20;

if(age >= 18){

    console.log("You are eligible to vote");

}

Output

You are eligible to vote

Explanation

  • The condition checks whether age is greater than or equal to 18.
  • Since the condition is true, the code inside if block executes.
  • Curly braces {} define the code block.

JavaScript if else Statement

The if else statement executes one block if the condition is true, and another block if the condition is false. 

let age = 15;

if(age >= 18){

    console.log("Adult");

}else{

    console.log("Minor");

}

Output

Minor

Detailed Explanation

  • The condition checks whether age is 18 or more.
  • Since age is 15, the condition becomes false.
  • The else block executes instead.

JavaScript else if Statement

else if allows checking multiple conditions. 

let marks = 75;

if(marks >= 90){

    console.log("Grade A");

}else if(marks >= 70){

    console.log("Grade B");

}else{

    console.log("Grade C");

}

Output

Grade B

Explanation

  • The first condition checks for Grade A.
  • Since marks are less than 90, JavaScript checks the next condition.
  • The second condition becomes true.
  • Therefore Grade B is displayed.

Using Logical Operators with if else

Logical operators allow checking multiple conditions together. 

let age = 22;

let hasLicense = true;

if(age >= 18 && hasLicense){

    console.log("You can drive");

}else{

    console.log("You cannot drive");

}

Output

You can drive

Explanation

  • && means AND operator.
  • Both conditions must be true.
  • Since both are true, the if block executes.

Nested if Statement

An if statement inside another if statement is called nested if. 

let age = 25;

let citizen = true;

if(age >= 18){

    if(citizen){

        console.log("Eligible to vote");

    }

}

Output

Eligible to vote

Explanation

  • The outer if checks age.
  • The inner if checks citizenship.
  • Both conditions are true.
  • Therefore the message is displayed.

Ternary Operator

The ternary operator is a short form of if else. 

let age = 20;

let result = age >= 18 ? "Adult" : "Minor";

console.log(result);

Output

Adult

Explanation

  • If the condition is true, "Adult" is returned.
  • Otherwise "Minor" is returned.
  • Ternary operators make code shorter.

Complete Real Life Example

The following example shows a simple student result checker using JavaScript if else statements. 

<!DOCTYPE html>

<html>

<head>

    <title>JavaScript If Else Example</title>

</head>

<body>

<h2>Student Result Checker</h2>

<input type="number"
id="marks"
placeholder="Enter Marks">

<br><br>

<button onclick="checkResult()">

Check Result

</button>

<h3 id="output"></h3>

<script>

function checkResult(){

    let marks =
    document.getElementById("marks").value;

    if(marks >= 40){

        document.getElementById("output").innerHTML =

        "Result: Pass";

    }else{

        document.getElementById("output").innerHTML =

        "Result: Fail";

    }

}

</script>

</body>

</html>

Output

Student Result Checker

Input:
50

Output:
Result: Pass

Detailed Explanation of Example

  • The input field accepts marks from the user.
  • The button runs the checkResult() function.
  • The if condition checks whether marks are 40 or more.
  • If true, "Pass" is displayed.
  • Otherwise "Fail" is displayed.
  • innerHTML dynamically updates webpage content.

Common Mistakes

  • Using = instead of == or ===.
  • Forgetting curly braces {}.
  • Writing incorrect conditions.
  • Ignoring case sensitivity.

Best Practices

  • Write clear and simple conditions.
  • Use meaningful variable names.
  • Use === for strict comparisons.
  • Keep nested conditions minimal.
  • Indent code properly for readability.

Important Notes

  • if executes code only when condition is true.
  • else executes when condition is false.
  • else if checks multiple conditions.
  • Logical operators combine conditions.
  • Decision making controls program flow.

Summary

  • if else statements help programs make decisions.
  • Conditions return true or false.
  • if executes when condition is true.
  • else executes when condition is false.
  • else if checks multiple conditions.
  • Ternary operator is a shortcut for if else.
  • if else statements are widely used in real applications.
← Previous Next →