Using if Statement
The if statement is the most basic form of a conditional statement in JavaScript. It allows you to execute a block of code only if a specified condition is true. Here's the syntax of an if statement:
Syntax:
if (condition) {
// code to be executed if the condition is true
}
Example :
JavaScript
let age = 18;
if (age >= 18) {
console.log("You are eligible to vote.");
}
You can also try this code with Online Javascript Compiler
Output
You are eligible to vote.
In this example, the condition age >= 18 is evaluated. If the condition is true (i.e., if the value of age is greater than or equal to 18), the code inside the if block is executed, and the message "You are eligible to vote." is logged to the console.
Using if-else Statement
The if-else statement extends the functionality of the if statement by allowing you to specify a block of code to be executed if the condition is false. Here's the syntax of an if-else statement:
Syntax:
if (condition) {
// code to be executed if the condition is true
} else {
// code to be executed if the condition is false
}
Example :
JavaScript
let num = 5;
if (num % 2 === 0) {
console.log(num + " is even.");
} else {
console.log(num + " is odd.");
}
You can also try this code with Online Javascript Compiler
Output
5 is odd
In this example, the condition num % 2 === 0 checks if num is divisible by 2 (i.e., if it's an even number). If the condition is true, the code inside the if block is executed, and the message "5 is even." is logged to the console. Otherwise, if the condition is false, the code inside the else block is executed, and the message "5 is odd." is logged.
Using else if Statement
The else if statement allows you to check for multiple conditions in a single if-else statement. It is used when you have more than two possible outcomes based on different conditions. Here's the syntax of an else if statement:
Syntax:
if (condition1) {
// code to be executed if condition1 is true
} else if (condition2) {
// code to be executed if condition2 is true
} else {
// code to be executed if all conditions are false
}
Example :
JavaScript
let grade = 85;
if (grade >= 90) {
console.log("A");
} else if (grade >= 80) {
console.log("B");
} else if (grade >= 70) {
console.log("C");
} else {
console.log("D");
}
You can also try this code with Online Javascript Compiler
Output
B
In this example, multiple conditions are checked using else if statements. If the value of grade is greater than or equal to 90, the code inside the first if block is executed, and "A" is logged to the console. If the first condition is false, the program moves to the next else if condition. If grade is greater than or equal to 80, the code inside the second else if block is executed, and "B" is logged. This process continues until a condition is true or all conditions are false, in which case the code inside the final else block is executed.
Using Switch Statement (JavaScript Switch Case)
The switch statement is an alternative to using multiple else-if statements. It allows you to test a variable against multiple possible values and execute different code blocks based on the matching value.
Here's the syntax of a switch statement:
Syntax:
switch (variable) {
case value1:
// code to be executed if variable === value1
break;
case value2:
// code to be executed if variable === value2
break;
// more cases...
default:
// code to be executed if no case matches
}
Example :
JavaScript
let fruit = "apple";
switch (fruit) {
case "apple":
console.log("You selected an apple.");
break;
case "banana":
console.log("You selected a banana.");
break;
case "orange":
console.log("You selected an orange.");
break;
default:
console.log("Invalid fruit selection.");
}
You can also try this code with Online Javascript Compiler
Output
You selected an apple.
In this example, the switch statement checks the value of the fruit variable. If the value matches any of the specified case values, the corresponding code block is executed. The break statement is used to exit the switch statement once a matching case is found. If none of the cases match, the code inside the default block is executed.
Using Ternary Operator ( ?: )
The ternary operator is a shorthand way of writing an if-else statement in a single line. It is often used for simple conditional assignments or when the if-else statement is short. Here's the syntax of the ternary operator:
Syntax:
condition? expression1 : expression2
If the condition is true, expression1 is evaluated and returned. If the condition is false, expression2 is evaluated and returned.
Example :
JavaScript
let age = 20;
let canDrink = age >= 21 ? "Yes" : "No";
console.log(canDrink);
You can also try this code with Online Javascript Compiler
Output:
"No"
In this example, the ternary operator checks if age is greater than or equal to 21. If the condition is true, the value "Yes" is assigned to the canDrink variable. If the condition is false, the value "No" is assigned to canDrink.
The ternary operator is a concise way to write simple conditional statements, but it can become difficult to read if the expressions are complex. It's recommended to use the ternary operator for simple conditions and switch to if-else statements for more complex scenarios.
Nested if…else
Nested if...else statements allow you to have if...else statements inside other if...else statements. This is useful when you need to check for multiple conditions and execute different code blocks based on those conditions.
Syntax:
if (condition1) {
// code to be executed if condition1 is true
if (condition2) {
// code to be executed if condition2 is true
} else {
// code to be executed if condition2 is false
}
} else {
// code to be executed if condition1 is false
if (condition3) {
// code to be executed if condition3 is true
} else {
// code to be executed if condition3 is false
}
}
Example :
JavaScript
let num = 10;
if (num > 0) {
console.log("The number is positive.");
if (num % 2 === 0) {
console.log("The number is even.");
} else {
console.log("The number is odd.");
}
} else {
console.log("The number is not positive.");
}
You can also try this code with Online Javascript Compiler
Output
The number is even.
In this example, the outer if...else statement checks if num is greater than 0. If it is, the code inside the outer if block is executed, and the message "The number is positive." is logged to the console.
Inside the outer if block, there is another if...else statement that checks if num is even or odd. If num is divisible by 2 (i.e., if it's even), the message "The number is even." is logged. Otherwise, if num is not divisible by 2 (i.e., if it's odd), the message "The number is odd." is logged.
If the outer if condition is false (i.e., if num is not greater than 0), the code inside the outer else block is executed, and the message "The number is not positive." is logged.
Frequently Asked Questions
How many types of conditions are there in JavaScript?
There are three main types of conditions in JavaScript: if, else if, and else, allowing complex decision-making in code.
What is the 3 condition if statement in JavaScript?
A 3 condition if statement uses if, else if, and else to evaluate multiple conditions and execute different blocks of code accordingly.
How do you write an if statement in JavaScript?
Use if (condition) { // code } to execute the code block if the specified condition evaluates to true.
Can we use multiple conditions in an if statement?
Yes, you can use logical operators like && (AND) and || (OR) to combine multiple conditions in an if statement.
Is it necessary to use the else block in an if-else statement?
No, the else block is optional. You can omit it if you don't need to specify an alternative code block for when the condition is false.
Can a switch statement be used instead of multiple else if statements?
Yes, a switch statement is often used as an alternative to multiple else if statements when comparing a variable against multiple possible values.
Conclusion
In this article, we learned about various conditional statements in JavaScript, including if, if-else, else if, switch, ternary operator, and nested if-else statements. These conditional statements allow you to make decisions and execute different code blocks based on specific conditions.
You can also practice coding questions commonly asked in interviews on Coding Ninjas Code360.
Also, check out some of the Guided Paths on topics such as Data Structure and Algorithms, Competitive Programming, Operating Systems, Computer Networks, DBMS, System Design, etc., as well as some Contests, Test Series, and Interview Experiences curated by top Industry Experts.
85+ registered