How JavaScript Makes Decisions: A Beginner's Guide to Conditionals

Conditional statements

Conditional statements in JavaScript allow your code to make decisions and execute different blocks of code based on whether a condition is true or false.

There are 4 primary ways to write conditional logic in JavaScript:

1. The if, else if, and else Statements

This is the most common way to handle sequential conditions. JavaScript evaluates the conditions from top to bottom and runs the block of the first condition that is truthy.

The if...else statement executes a statement if a specified condition is truthy. If the condition is falsy, another statement in the optional else clause will be executed.

let score = 85;

if (score >= 90) {
  console.log("Grade: A"); // Runs if score is 90 or above
} else if (score >= 80) {
  console.log("Grade: B"); // Runs if score is between 80 and 89
} else {
  console.log("Grade: C"); // Runs if all previous conditions fail
}

1. The Ternary Operator (? :)

The Ternary Operator is a compact, one-line shorthand for a simple if...else statement. It is ideal for quickly assigning variables or choosing between two values.

Syntax: condition ? value_if_true : value_if_false;

let age = 20;
let message = age >= 18 ? "Allowed" : "Denied";

console.log(message); // Output: Allowed

1. The switch Statement

A Switch Case statement checks a single variable against multiple exact values. It is cleaner and more readable than multiple else if chains when comparing a variable to fixed options.

Note: Always remember the break keyword to stop execution from falling through to the next case.

let pet = "dog";

switch (pet) {
  case "cat":
    console.log("Meow!");
    break;
  case "dog":
    console.log("Woof!"); // This case matches and executes
    break;
  default:
    console.log("Unknown animal"); // Runs if no cases match
}

1. Logical Operators Shorthand (&& and ||)

You can use short-circuit evaluation as a quick conditional statement:

• && (AND): Runs the right-hand code only if the left-hand condition evaluates to true.

• || (OR): Provides a fallback value if the left-hand condition is false.

let isLoggedIn = true;
// Renders the message only if logged in
isLoggedIn && console.log("Welcome back!"); 

let username = "";
// Falls back to "Guest" because username is an empty string (falsy)
let displayName = username || "Guest"; 

In JavaScript && and || operators basically doesn't only return true or false but also return returned operand based on short-circuiting evaluation.

(!) NOT operator

console.log(!false); //true
console.log(!true); //false

Short - circuit evaluation

JavaScript evaluates logical expressions left to right and it stopped it when the result is determined (completed).

When it stopped the evaluation that moment is called short - circuit.

Types of short - circuit

&& case

• In given condition, if the left operand is truthy, && will return right value

• In given condition, if the left operand is falsy, && will return left value (Don't check rigth)

// 1. if left operand is truthy, return right
console.log(true && 10); // 10
console.log("Hi" && "Bye"); // Bye


// 2. if left operand is falsy, return that
console.log(false && 10); // false
console.log(0 && "Hello"); // 0

|| case

• In given condition, if the left operand is truthy, || will return left value (Don't check right)

• In given condition, if the left operand is falsy, || will return right value (Whether it's truthy or falsy)

// 1. if left operand is truthy, return left
console.log(true || 10); // true
console.log("Hi" || "Bye"); // Bye


// 2. if left operand is falsy, return right
console.log(false || 10); // 10
console.log(0 || "Hello"); // Hello

Best Practices to Keep in Mind

• Use Strict Equality (===): Always use === instead of == to prevent hidden type-coercion bugs (e.g., 5 == "5" is true, but 5 === "5" is false).

• Keep Braces: Always wrap your if statements in curly braces {} even if they are only one line long to improve overall codebase safety.

• Beware of "Falsy" Values: JavaScript treats 0, "" (empty string), null, undefined, NaN, and false automatically as false inside conditions. Everything else is truthy.