JavaScript Conditional Statements
Using logical statements in JavaScript, your code may decide which course of action to take and if a certain condition is true or not. Your programs will no longer execute in a static manner, performing the same action each time. If, if else, and else if statements are the main logical statements in JavaScript.
if Statement
The basic method for conditionally executing code is the if statement. It only lets you do something if a certain condition is met.
Syntax:
if (condition) {
// code to be executed if the condition is true
}
The condition is indicated by the part enclosed in parenthesis (). An expression that is evaluated and transformed into a Boolean value (true or false) is this condition. Enclosed in curly braces {}, the code block immediately following the if statement is executed if the resulting Boolean is true. The program proceeds with the code after the if block if the condition evaluates to false, skipping the code block.
It is advised to always enclose your code block with curly brackets {}, even if it only has one statement. This makes the code easier to read and can help you avoid mistakes when you add more statements later.
Example:
let rain = true;
if (rain) {
console.log(“** Taking my umbrella when I need to go outside **”);
}
// If rain is false, this log statement is skipped.
The condition typically uses comparison operators like === (strict equality), == (equality), < (less than), > (greater than), <=, and >=. For instance, age < 18 checks if the age variable is less than 18. Type coercion is performed by ==, while === requires value and type matching. Logical operators like &&, ||, and! can combine conditions.
if else Statement
The if else expression executes one of two pieces of code based on a condition. It is used to conduct one action if the condition is true and another if it is false.
Syntax:
if (condition) {
// code to be executed if condition is true
} else {
// code to be executed if condition is false
}
It is not required to use the else block. The else block is bypassed and the code in the if block is run if the if condition is true. If the if condition is false, the code in the else block is run instead of the if block. Out of the two blocks, only one will run.
Example:
let age = 20;
if (age < 18) {
console.log(“We’re very sorry, but you can’t get in under 18”);
} else {
console.log(“Welcome!”);
}
// If age is 20, the condition age < 18 is false, so the else block is executed.
else if Statement
You can utilise else if statements to manage scenarios with numerous outcomes or test several conditions. The else if pattern, which is commonly employed when an else clause contains another if statement, is not a stand-alone statement. To establish a set of criteria to test, you chain these together.
Syntax:
if (condition1) {
// code to execute if condition1 is true
} else if (condition2) {
// code to execute if condition1 is false AND condition2 is true
} else if (condition3) {
// code to execute if condition1 and condition2 are false AND condition3 is true
} else {
// code to execute if none of the above conditions are true (optional)
}
Conditions are assessed from the top down. When a condition evaluates to true, the code block that corresponds to it is run, and the remainder of the else if chain including any final else blocks is skipped. If there is a final else block, it is executed if none of the if or else if conditions are true. Compared to utilising several independent if statements for mutually exclusive criteria, this approach is frequently clearer and more effective.
Example:
let age = 10; // Variable to store the age
let cost = 0; // Variable to store the calculated cost
let message; // Variable to store the output message
// Checks the conditions sequentially based on age
if (age < 3) { // First condition: age less than 3
// Code block executed if age is less than 3
cost = 0; // Set cost to 0
message = “Access is free under three.”; // Set message for this age group
} else if (age >= 3 && age < 12) { // Second condition: age is 3 or more AND less than 12
// This block is checked ONLY if the first condition is false
// It uses comparison operators (>=, <) and the logical AND (&&) operator to combine conditions
cost = 5; // Set cost to 5
message = “With the child discount, the fee is 5 dollars”; // Set message
} else if (age >= 12 && age < 65) { // Third condition: age is 12 or more AND less than 65
// This block is checked ONLY if the previous two conditions are false
cost = 10; // Set cost to 10
message = “A regular ticket costs 10 dollars.”; // Set message
} else { // Default case: executed if none of the above conditions are true
// Code block executed if age is 65 or older
cost = 7; // Set cost to 7
message = “A ticket is 7 dollars.”; // Set message
}
console.log(message); // Output the message to the console
console.log(“Your Total cost ” + cost); // Output the total cost using string concatenation
If you want your JavaScript programs to react dynamically to various events and data, you must use the if, if else, and else if commands. While switch statements are superior for evaluating a single expression against a wide range of possible values, and the ternary operator. It Can be used as a shortcut for simple if else assignments or extremely brief operations, if, if else, and else if remain essential for making decisions in code.