JavaScript Conditions

JavaScript Conditional Statements: if, else if, else

Conditional statements are used to perform different actions based on whether a specified condition evaluates to true or false.

Conditional Statements

Often when you write code, you need to make decisions and execute different blocks of code depending on those decisions.

JavaScript provides the following conditional statements:

• Use if to specify a block of code to be executed if a condition is true.
• Use else to specify a block of code to be executed if the same condition (from the preceding if) is false.
• Use else if to specify a new condition to test if the first condition (from the preceding if or else if) is false.
• Use switch to specify many alternative blocks of code to be executed based on the value of an expression (covered in a separate chapter).

The if Statement

Use the if statement to execute a block of JavaScript code only if a specified condition is true.

Syntax:

if (condition) {
  // block of code to be executed if the condition is true
}

	Note: if must be in lowercase. Using If or IF will result in a JavaScript error. The condition is typically an expression that evaluates to a boolean (true or false).

Example:

const hour = new Date().getHours(); // Get current hour (0-23)
let greeting;

if (hour < 18) {
    greeting = "Good day";
}
// If hour is, for example, 10, greeting will be "Good day".
// If hour is 20, greeting will remain undefined (or its previous value).

The else Statement

Use the else statement to specify a block of code to be executed if the condition in the if statement is false.

Syntax:

if (condition) {
  // block of code to be executed if the condition is true
} else {
  // block of code to be executed if the condition is false
}

Example:

const hour = new Date().getHours();
let greeting;

if (hour < 18) {
    greeting = "Good day";
} else {
    greeting = "Good evening";
}
// If hour is 10, greeting is "Good day". If hour is 20, greeting is "Good evening".

The else if Statement

Use the else if statement to specify a new condition to test if the previous condition (from if or another else if) was false.

Syntax:

if (condition1) {
  // block of code to be executed if condition1 is true
} else if (condition2) {
  // block of code to be executed if condition1 is false and condition2 is true
} else {
  // block of code to be executed if both condition1 and condition2 are false
}

Example:

const time = new Date().getHours();
let greeting;

if (time < 10) {
    greeting = "Good morning";
} else if (time < 18) {
    greeting = "Good day";
} else if (time < 22) {
    greeting = "Good evening";
} else {
    greeting = "Good night";
}
// This provides more granular greetings based on the time.

Ternary Operator (Conditional Operator)

JavaScript also has a conditional (ternary) operator that provides a shorthand for simple if...else statements. It takes three operands: a condition followed by a question mark (?), then an expression to execute if the condition is true, followed by a colon (:), and finally the expression to execute if the condition is false.

Syntax:

variable = (condition) ? valueIfTrue : valueIfFalse;

Example:

const age = 20;
const canVote = (age >= 18) ? "Can vote" : "Cannot vote";
// canVote will be "Can vote"

const isAuthenticated = true;
const userName = isAuthenticated ? "Alice" : "Guest";
// userName will be "Alice"

While concise, ternary operators can become hard to read if nested or too complex. Use them for simple conditional assignments.

Example: Random Decision

This example demonstrates using if...else with a random number to make a decision:

let randomNumber = Math.random(); // Generates a number between 0 (inclusive) and 1 (exclusive)
let outcome;

if (randomNumber < 0.5) {
    outcome = "Heads";
} else {
    outcome = "Tails";
}

console.log(`The coin toss resulted in: ${outcome}`);
// There's a 50% chance for "Heads" and 50% for "Tails".