Understanding Conditional Statements in JavaScript

In JavaScript, conditional statements help us make decisions in our code based on different conditions. Let's explore how these statements work and understand their nuances with some examples.

Basic if Statement

The basic if statement checks a condition and executes a block of code if the condition is true.

const temperature = 41;

if (temperature === 40) {
    console.log("less than 50");
} else {
    console.log("temperature is greater than 40");
}
console.log("execute"); //this will always get executed as it is outside the else block

//outputs: temperature is greater than 40

In this example, the if condition checks if the temperature is equal to 40. Since it's not, the else block executes, logging "temperature is greater than 40". The final console.log("execute") runs regardless of the condition.

Operators Used in Conditions

• < : Less than

• > : Greater than

• <= : Less than or equal to

• >= : Greater than or equal to

• == : Equal to (value only)

• != : Not equal to (value only)

• === : Strict equal to (value and type)

• !== : Strict not equal to (value and type)

Scope in Conditional Statements

const score = 200;
if (score > 100) {
    let power = "fly";
    console.log(`User power: ${power}`); //outputs: User power: fly
}
console.log(`user power: ${power}`); // scope issue

In this example, the power variable is declared using let inside the if block, so it's not accessible outside that block. This will throw an error when trying to access power outside the block.

Implicit Scope

const balance = 1000;
if (balance > 500) console.log("test"); // implicit scope

// If we want to write multiple lines
if (balance > 600) console.log("check"), console.log("balance"); // not a good way to write code

//if and else if
if (balance < 500) {
    console.log("less than 500");
} 
else if (balance < 750) {
    console.log("less than 750");
} 
else if (balance < 900)
    console.log("less than 900");
} 
else {
    console.log("less than 1200"); //this will be executed
}

//outputs: less than 1200

Explanation:

• Implicit Scope: The if statement if (balance > 500) console.log("test"); executes the console.log("test"); statement because the condition is true. This is an example of an implicit block where only one statement follows the if.

• Multiple Lines: if (balance > 600) console.log("check"), console.log("balance"); executes both console.log statements, but this is not a recommended practice because it reduces readability. Using {} for multiple lines is cleaner and more maintainable.

Logical Operators in Conditions

Logical operators like && (AND) and || (OR) are used to combine multiple conditions.

const userLoggedIn = true;
const debitCard = true;
const loggedInFromGoogle = false;
const loggedInFromEmail = true;

if (userLoggedIn && debitCard && 2 == 3) {
    console.log("allow to buy course"); // won't get printed as "2 == 3" is not true
}

if (loggedInFromGoogle || loggedInFromEmail) {
    console.log("user logged in");
}

Explanation:

• AND Operator (&&): The if condition checks if userLoggedIn, debitCard, and 2 == 3 are all true. Since 2 == 3 is false, the block inside the if statement doesn't execute.

• OR Operator (||): The if condition checks if either loggedInFromGoogle or loggedInFromEmail is true. Since loggedInFromEmail is true, the block executes and prints "user logged in".

Summary

Understanding conditional statements in JavaScript is crucial for controlling the flow of your programs. By using if, else if, and else statements along with logical operators, you can create complex decision-making structures that make your code more dynamic and responsive to different conditions.

This blog has covered:

• Basic if statements

• Scope issues in conditional blocks

• Implicit vs. explicit block usage

• Combining conditions with logical operators

I hope this helps you understand how to effectively use conditional statements in your JavaScript code!