If...Else Statements in JavaScript

What Are If...Else Statements?

Every decision your application makes starts with conditional logic. The if...else statement is the fundamental building block for controlling program flow in JavaScript, enabling applications to respond dynamically to user input, data conditions, and runtime environments.

At its core, an if...else statement executes a specific block of code when a condition evaluates to truthy, and optionally executes a different block when the condition is falsy. This simple mechanism forms the foundation of all conditional logic in JavaScript applications.

let temperature = 72;

if (temperature > 80) {
 console.log("Turn on the AC");
} else if (temperature < 60) {
 console.log("Turn on the heater");
} else {
 console.log("Open the windows");
}

This example demonstrates how applications make decisions based on conditions--in this case, adjusting climate control based on temperature readings. The same pattern powers everything from form validation to user interface updates in modern web applications.

The Building Blocks of Conditional Logic

Understanding if...else requires grasping three key components:

• Condition: The boolean expression that determines which path executes
• True Branch: Code that runs when the condition is truthy
• False Branch: Optional code that runs when the condition is falsy

Conditional logic follows a simple flow: evaluate the condition, then execute the appropriate branch based on whether that condition is true or false. This decision-making capability is what transforms static code into dynamic, interactive applications. For related coverage of JavaScript values and their evaluation, see our guide on values and units.

Basic Syntax and Usage

JavaScript provides multiple forms of if...else syntax to handle different scenarios. Understanding these variations helps you choose the right structure for each situation.

Simple If Statement

When you only need to execute code under one condition, use a standalone if statement:

const temperature = 25;

if (temperature > 20) {
 console.log("It's warm outside");
}

// Output: "It's warm outside"

This pattern is ideal for actions that should only occur when a specific condition is met, such as displaying a notification only when new messages arrive.

If...Else Statement

For two mutually exclusive conditions, use if...else:

const age = 18;

if (age >= 18) {
 console.log("You are an adult");
} else {
 console.log("You are a minor");
}

// Output: "You are an adult"

The else clause handles everything that doesn't meet the if condition, making this structure perfect for binary decisions like authenticated vs. unauthenticated user states.

Else If Chains

When multiple conditions need checking, chain else if statements. Note that JavaScript uses "else if" (two words), not "elseif" as in some other languages:

const score = 85;
let grade;

if (score >= 90) {
 grade = "A";
} else if (score >= 80) {
 grade = "B";
} else if (score >= 70) {
 grade = "C";
} else {
 grade = "F";
}

console.log(`Grade: ${grade}`); // Output: "Grade: B"

Performance Tip: When you have multiple conditions in an else if chain, put the most likely conditions first. This minimizes the number of evaluations needed in typical cases and can significantly improve performance in frequently executed code. For handling more complex conditional scenarios, consider learning about the nullish coalescing operator which provides a cleaner syntax for null/undefined checks.

These syntax patterns cover the vast majority of conditional logic needs in JavaScript applications. As documented in the MDN JavaScript reference, these forms can be combined and nested to create complex decision trees for your application logic.

Understanding Truthy and Falsy Values

A critical concept that often trips up JavaScript developers is the distinction between truthy and falsy values. Unlike languages with strict boolean types, JavaScript allows any value in a condition, evaluating them as either truthy or falsy.

The Eight Falsy Values

According to the MDN Web Docs, only these eight values evaluate to false in conditional contexts:

Everything Else Is Truthy

Every other value in JavaScript evaluates to true, which often surprises developers new to the language:

// All of these are truthy!
if (true) console.log("true is truthy");
if (1) console.log("1 is truthy");
if ("hello") console.log("non-empty string is truthy");
if ({}) console.log("empty object is truthy");
if ([]) console.log("empty array is truthy");
if ("false") console.log("string 'false' is truthy!");
if ("0") console.log("string '0' is truthy!");

Common Pitfall: Boolean Objects

A critical nuance that catches many developers: Boolean objects are always truthy, even when their wrapped value is false:

const b = new Boolean(false);
if (b) {
 console.log("b is truthy"); // This executes!
}

The new Boolean() constructor creates an object, and all objects are truthy regardless of their content. Always use primitive boolean values (true, false) for conditions, not Boolean objects.

Practical Truthy/Falsy Checks

Understanding truthiness enables concise conditional logic:

// Check if string is not empty
if (userName) {
 // userName is truthy (not empty)
}

// Default value pattern
const displayName = userName || "Guest";

// Check if array has content
if (items.length) {
 // array has items (length > 0)
}

// Safely access nested properties
const street = user?.address?.street || "Unknown";

These patterns are fundamental to writing concise JavaScript and appear throughout modern frameworks and libraries. For more on type checking and comparisons, explore our coverage of JavaScript types and operators.

Best Practices for Clean Conditional Logic

Well-structured if...else statements make your code more readable, maintainable, and less prone to bugs.

Always Use Block Statements

The "dangling else" problem occurs when else clauses bind unexpectedly to the wrong if statement. The MDN Web Docs explains this classic ambiguity:

Avoid This (Ambiguous - Dangling Else):

function checkValue(a, b) {
 if (a === 1)
 if (b === 2)
 console.log("a is 1 and b is 2");
 else
 console.log("a is not 1");
}
// The else binds to the INNER if (b === 2), not the outer!

Do This (Clear with Blocks):

function checkValue(a, b) {
 if (a === 1) {
 if (b === 2) {
 console.log("a is 1 and b is 2");
 }
 } else {
 console.log("a is not 1");
 }
}

Avoid Deep Nesting

When if statements nest more than 2-3 levels deep, code becomes hard to follow. Use these strategies to keep logic flat:

• Early Returns: Handle error/special cases first, return immediately
• Guard Clauses: Check for invalid states first and exit the function
• Extract Conditions: Move complex conditions into named functions

Keep Conditions Simple

Break complex boolean expressions into readable named variables:

// Complex condition - hard to read
if (user.isActive && user.hasPermission && data.isValid && !isBlocked && !isExpired) {
 processData();
}

// Better: Named conditions - self-documenting
const canProcess = user.isActive && user.hasPermission && data.isValid;
const isAllowed = !isBlocked && !isExpired;

if (canProcess && isAllowed) {
 processData();
}

This approach makes your code's intent clear and simplifies debugging, as you can log individual conditions to understand which part of a complex check is failing. For additional patterns on organizing JavaScript code, see our guide on class selectors and CSS organization strategies.

Performance Considerations

While modern JavaScript engines are highly optimized, understanding performance implications helps you write more efficient code.

If...Else vs Switch Statements

As noted by De Salas Works, for checking a value against multiple conditions, switch statements can be optimized more easily by the JavaScript engine during compilation. However, the performance difference is typically negligible in real applications.

Use switch when:

• Checking one value against multiple possibilities
• Readability and maintainability are priorities
• You have 3+ conditions to compare

Use if...else when:

• Comparing ranges or complex conditions
• Only 2-3 conditions to check
• Conditions involve different expressions

Short-Circuit Evaluation

For simple conditions, JavaScript's logical operators provide concise alternatives:

// Instead of:
if (isValid) {
 processData();
}

// Use short-circuit AND:
isValid && processData();

// Default value pattern with OR
const userName = input.name || "Anonymous";

// Nullish coalescing for null/undefined only
const value = input.value ?? "default";

When to Optimize

"Premature optimization is the root of all evil." - Donald Knuth

According to MDN's JavaScript Performance guide, focus on:

• Writing clear, correct code first
• Profiling actual performance bottlenecks
• Optimizing hot paths in frequently executed code
• Prioritizing readability over micro-optimizations

The JavaScript engine's JIT compiler optimizes your code at runtime, often making micro-optimizations irrelevant. Write clean code that expresses intent clearly, then profile to identify actual bottlenecks before optimizing.

Remember that code is read far more often than it's written. The performance gained from complex condition optimizations rarely justifies the maintenance cost of unclear code.

Common Patterns and Examples

Here are practical if...else patterns you'll use frequently in JavaScript applications.

Validating User Input

Form validation is one of the most common use cases for conditional logic. Early returns make validation clear and efficient:

function validateForm(user) {
 // Check required fields first
 if (!user.email) {
 return { valid: false, error: "Email is required" };
 }
 if (!user.name || user.name.trim() === "") {
 return { valid: false, error: "Name is required" };
 }
 if (user.age < 18) {
 return { valid: false, error: "Must be 18 or older" };
 }
 
 // All validations passed
 return { valid: true };
}

This pattern returns immediately upon finding an error, making validation both efficient and easy to debug. See our guide on form handling for more patterns.

Handling Different States

State machines and status handling benefit from structured if...else chains:

function handlePaymentStatus(status) {
 if (status === "pending") {
 return "Payment is being processed";
 } else if (status === "completed") {
 return "Payment successful";
 } else if (status === "failed") {
 return "Payment failed - please try again";
 } else if (status === "refunded") {
 return "Payment has been refunded";
 } else {
 return "Unknown payment status";
 }
}

// Usage
console.log(handlePaymentStatus("completed")); // "Payment successful"
console.log(handlePaymentStatus("pending")); // "Payment is being processed"

Conditional Object Properties

Building objects with optional properties is common in API responses and configuration:

function createUserProfile(user) {
 const profile = {
 name: user.name,
 email: user.email
 };

 // Only add optional properties if they exist
 if (user.avatar) {
 profile.avatar = user.avatar;
 }
 if (user.bio) {
 profile.bio = user.bio;
 }
 if (user.phone) {
 profile.phone = user.phone;
 }

 return profile;
}

// Returns profile with only truthy properties

This pattern keeps objects clean by excluding undefined properties, which is often preferred in API responses and database records.

Feature Toggles and A/B Testing

Conditional logic powers feature flags and experimentation:

function getFeatureConfig(user) {
 const config = { enabled: false };
 
 if (user.isAdmin) {
 config.enabled = true;
 config.level = "admin";
 } else if (user.isBetaTester) {
 config.enabled = true;
 config.level = "beta";
 } else if (experiment.isActive("new-feature")) {
 config.enabled = true;
 config.level = "experimental";
 }
 
 return config;
}

For more advanced state management patterns, explore our resources on HTML5 application structure.

When to Use Alternatives

While if...else is fundamental, JavaScript provides alternatives for specific scenarios. Choosing the right tool makes code cleaner and more maintainable.

Ternary Operator for Simple Assignments

The ternary operator (? :) works well for simple conditional assignments:

Good use of ternary:

const status = isActive ? "Active" : "Inactive";
const displayName = user?.name ?? "Guest";
const classes = isValid ? "valid" : "error";

Avoid for complex logic:

// Hard to read - nested ternaries are confusing
const result = condition1 
 ? (condition2 ? "A" : "B") 
 : "C";

// Better - use if...else for clarity
let result;
if (condition1) {
 result = condition2 ? "A" : "B";
} else {
 result = "C";
}

Object Lookup for Known Values

When checking a value against known options, object lookups can replace long if-else chains with cleaner, more maintainable code:

// Long if-else chain - harder to maintain
function getDiscount(plan) {
 if (plan === "basic") return 0.1;
 if (plan === "pro") return 0.2;
 if (plan === "enterprise") return 0.3;
 return 0;
}

// Object lookup - cleaner and extensible
const discounts = {
 basic: 0.1,
 pro: 0.2,
 enterprise: 0.3
};
function getDiscount(plan) {
 return discounts[plan] ?? 0;
}

Object lookups are O(1) operations and can be more performant than long if-else chains. They also make it easy to add or modify values without changing the function logic.

Map for Dynamic Lookups

For more complex scenarios, Map objects provide additional flexibility:

const statusMessages = new Map([
 ["pending", "Processing..."],
 ["completed", "Done!"],
 ["failed", "Please try again"],
 ["refunded", "Money returned"]
]);

function getStatusMessage(status) {
 return statusMessages.get(status) ?? "Unknown status";
}

Modern JavaScript: Pattern Matching

Upcoming JavaScript features like pattern matching (in ES2025+) provide powerful alternatives for complex conditional logic. For now, use the patterns that best fit your codebase's browser support requirements and team familiarity. To learn about related modern JavaScript features, see our coverage of the after function pattern and other array methods like flatmap.

The key principle: choose the option that makes your code most readable and maintainable for your specific use case.

Summary

The if...else statement is fundamental to JavaScript programming, enabling applications to make decisions based on conditions. Key takeaways:

• Master the basics: Understand truthy/falsy values and always use block statements with curly braces to avoid the dangling else problem
• Write clean code: Avoid deep nesting beyond 2-3 levels, use early returns for validation, and name your conditions for self-documenting logic
• Choose wisely: Use if...else for simple cases and range comparisons, consider switch for multiple value checks against known options
• Profile before optimizing: Modern JavaScript engines are highly optimized--write clear code first and only optimize actual bottlenecks

Practice these patterns in your projects, and conditional logic will become second nature. The principles covered here--block statements, truthy/falsy understanding, and clean condition structure--apply across all JavaScript codebases and frameworks.

For more on JavaScript development best practices, explore our web development services or learn about other JavaScript concepts.

Sources

1. MDN Web Docs: if...else Statement - Official JavaScript reference covering syntax, truthy/falsy values, block statements, and dangling else explanation
2. MDN Web Docs: JavaScript Performance Optimization - Comprehensive guide on writing efficient JavaScript code
3. De Salas Works: 25 JavaScript Performance Techniques - Detailed coverage of switch vs if-then-else optimization considerations