JavaScript If Else Statement
Decision making is at the heart of every program. JavaScript provides if, else, else if, nested if, and the ternary operator to run different code based on conditions.
What is the If Else Statement?
The if statement runs a block of code only when a condition is true. Combined with else and else if, it allows your program to make choices and follow different paths of logic.
Types of Conditional Statements
if Statement
Runs a block only when the condition is true.
if … else
Runs one block if the condition is true, another if false.
else if Ladder
Tests multiple conditions one by one until one matches.
Nested if
An if statement placed inside another if statement.
Ternary ? :
Short single-line replacement for simple if-else.
Switch (next)
A cleaner alternative for many equal-value comparisons.
If Else in JavaScript
If-Else statements are used for decision making in JavaScript. They allow programs to execute different blocks of code based on conditions.
Basic Features
-
Conditions evaluate to
trueorfalse. -
Use
==for value comparison and===for strict comparison. -
Logical operators
&&,||,!combine conditions. -
Curly braces
{ }group multiple statements.
Structure of If Else
The if block runs when the condition is true. Otherwise the else block executes.
if(condition){
// code if true
}else{
// code if false
}
Your First If Else Program
This program checks whether a number is positive, negative, or zero.
<script>
let num = 7;
if(num > 0){
document.write(
num + " is positive"
);
}else if(num < 0){
document.write(
num + " is negative"
);
}else{
document.write(
"Number is zero"
);
}
</script>
Example 1 : Even or Odd
This example checks whether a number is even or odd.
<script>
let n = 10;
if(n % 2 == 0){
document.write(
n + " is Even"
);
}else{
document.write(
n + " is Odd"
);
}
</script>
Example 2 : Perfect Square
This program checks whether a number is a perfect square.
<script>
let n = 9;
let a =
Math.sqrt(n);
if(a * a == n){
document.write(
"Perfect Square"
);
}else{
document.write(
"Not Perfect Square"
);
}
</script>
Example 3 : Largest of Three Numbers
This program finds the largest among three numbers.
<script>
let a = 12;
let b = 25;
let c = 18;
if(a >= b && a >= c){
document.write(
"Largest = " + a
);
}else if(b >= a && b >= c){
document.write(
"Largest = " + b
);
}else{
document.write(
"Largest = " + c
);
}
</script>
Example 4 : Pythagorean Triplet
This example checks whether three numbers form a Pythagorean triplet.
<script>
let a = 3;
let b = 4;
let c = 5;
if(a*a + b*b == c*c){
document.write(
"Pythagorean Triplet"
);
}else{
document.write(
"Not a Triplet"
);
}
</script>
Example 5 : Grade Calculator
This program calculates grade using else-if ladder.
<script>
let marks = 78;
if(marks >= 90){
document.write(
"Grade A+"
);
}else if(marks >= 75){
document.write(
"Grade A"
);
}else if(marks >= 60){
document.write(
"Grade B"
);
}else{
document.write(
"Fail"
);
}
</script>
Example 6 : Ternary Operator
The ternary operator is a short form of if else condition.
<script> let age = 20; let result = (age >= 18) ? "Adult" : "Minor"; document.write(result); </script>
Practice Exercises
- Write a program to find largest among three numbers.
- Write a program to check whether a number is a Buzz Number or not.
Conclusion
If Else statements are essential for decision-making in JavaScript. They help programs execute different blocks of code based on conditions and user input.
Comparison & Logical Operators
| Operator | Meaning | Example |
|---|---|---|
| == | Equal (value) | 5 == "5" → true |
| === | Equal (value + type) | 5 === "5" → false |
| != | Not equal (value) | 5 != 6 → true |
| > | Greater than | 7 > 3 → true |
| <= | Less or equal | 4 <= 4 → true |
| && | Logical AND | true && false → false |
| || | Logical OR | true || false → true |
| ! | Logical NOT | !true → false |
Important Notes
- Always prefer
===(strict equality) to avoid hidden type conversion bugs. - Indent your
ifblocks properly — clean code is easier to debug. - Don't write deeply nested ifs — refactor with
else ifor functions. - Curly braces are optional for a single statement but recommended for clarity.
Real-Life Use Cases
Login Validation
Check whether the entered username/password matches.
Discount Logic
Apply different discount percentages based on cart total.
Form Validation
Display error messages when required fields are empty.
Game Rules
Decide win, lose or draw based on player scores.
Practice Questions
- Take a number and print whether it is positive, negative or zero.
- Take age and print whether the person can vote.
- Find the largest of two numbers using a ternary operator.
- Take a year and check whether it is a leap year.
- Take 3 sides and check whether a triangle is equilateral, isosceles or scalene.
Frequently Asked Questions
| Question | Answer |
|---|---|
| Q. What is the difference between == and ===? | == compares only values after type conversion. === compares both value and type. |
| Q. Can I write if without else? | Yes. else is optional. If the condition is false, nothing happens. |
| Q. What is the ternary operator? | A short form: condition ? a : b. Use it for simple two-way choices only. |
| Q. Can I nest if statements? | Yes, you can place an if inside another if. Try to avoid deep nesting for readability. |
| Q. What is short-circuit evaluation? | && and || stop evaluating as soon as the result is known. |
Conclusion
The if-else family is the foundation of decision making in JavaScript. By combining comparison and logical operators with if, else if, and the ternary operator, you can model almost any real-world rule in code.
JavaScript All Chapters
Continue Learning
Previous
Go to User Input Chapter