Conditional Statements in JavaScript for Beginners

Learn JavaScript conditional statements with practical examples. Understand if, else, else if, switch statements, ternary operators, and real-world decision-making logic.

JavaScript Conditional Statements Explained with Examples

Conditional statements are one of the most important concepts in JavaScript.

They allow applications to make decisions based on different conditions.

Modern JavaScript applications use conditional statements for:

• authentication systems
• form validation
• role-based access
• API responses
• e-commerce applications
• dashboards
• React applications
• Next.js applications

Without conditional statements, applications would not be able to respond dynamically to user actions.

What are Conditional Statements?

Conditional statements allow JavaScript to execute different blocks of code depending on whether a condition is true or false.

Example:

  const age = 20;

if (age >= 18) {
  console.log("You can vote");
}
  

Output:

  You can vote
  

JavaScript checks the condition and executes the code only when the condition is true.

Why Conditional Statements are Important

Conditional statements help developers:

• make decisions
• control application flow
• validate user input
• handle different scenarios
• build dynamic applications

Almost every JavaScript application relies on conditions.

The if Statement

The if statement executes code when a condition is true.

Syntax:

  if (condition) {
  // code
}
  

Example:

  const isLoggedIn = true;

if (isLoggedIn) {
  console.log("Welcome Back");
}
  

Output:

  Welcome Back
  

Understanding the Condition

JavaScript evaluates the expression inside parentheses.

Example:

  const score = 80;

if (score > 50) {
  console.log("Passed");
}
  

Output:

  Passed
  

Since the condition is true, the code executes.

The if...else Statement

Sometimes we need an alternative outcome.

Example:

  const age = 16;

if (age >= 18) {
  console.log("Adult");
} else {
  console.log("Minor");
}
  

Output:

  Minor
  

The else block runs when the condition is false.

Real-World Example

Login system:

  const isAuthenticated = false;

if (isAuthenticated) {
  console.log("Dashboard");
} else {
  console.log("Login Page");
}
  

This type of logic is common in modern web applications.

The if...else if...else Statement

Used when multiple conditions need to be checked.

Example:

  const marks = 75;

if (marks >= 90) {
  console.log("Grade A");
} else if (marks >= 70) {
  console.log("Grade B");
} else if (marks >= 50) {
  console.log("Grade C");
} else {
  console.log("Failed");
}
  

Output:

  Grade B
  

This approach is useful when handling multiple scenarios.

Multiple Conditions with Logical Operators

Conditional statements often use logical operators.

Example:

  const age = 22;
const hasLicense = true;

if (age >= 18 && hasLicense) {
  console.log("Can Drive");
}
  

Output:

  Can Drive
  

Both conditions must be true.

Using OR Operator

Example:

  const isAdmin = false;
const isManager = true;

if (isAdmin || isManager) {
  console.log("Access Granted");
}
  

Output:

  Access Granted
  

At least one condition must be true.

Nested Conditional Statements

Conditional statements can be placed inside other conditions.

Example:

  const isLoggedIn = true;
const isAdmin = true;

if (isLoggedIn) {

  if (isAdmin) {
    console.log("Admin Panel");
  }

}
  

Output:

  Admin Panel
  

Nested conditions are common in permission systems.

The Ternary Operator

The ternary operator is a shorter version of if...else .

Example:

  const age = 20;

const result =
  age >= 18 ? "Adult" : "Minor";

console.log(result);
  

Output:

  Adult
  

This syntax is widely used in React applications.

The switch Statement

When multiple fixed values need to be checked, switch can be useful.

Example:

  const role = "admin";

switch (role) {

  case "admin":
    console.log("Admin Dashboard");
    break;

  case "user":
    console.log("User Dashboard");
    break;

  default:
    console.log("Guest");
}
  

Output:

  Admin Dashboard
  

if vs switch

Choose the approach that best fits the situation.

Real-World Example: E-Commerce Discount

Example:

  const total = 6000;

if (total > 5000) {
  console.log("20% Discount");
} else {
  console.log("No Discount");
}
  

This type of business logic is extremely common.

Watch Full JavaScript Conditional Statements Tutorial

If you prefer video learning, watch the complete tutorial below where we explain conditional statements with practical coding examples.

[Watch the Full JavaScript Conditional Statements Tutorial ( https://youtu.be/KHIS9C1rp2U )

This tutorial demonstrates how conditions are used in real-world JavaScript applications.

Common Beginner Mistakes

Using = Instead of ===

Incorrect:

  if (age = 18)
  

Correct:

  if (age === 18)
  

Always use comparison operators inside conditions.

Writing Too Many Nested Conditions

Deep nesting can make code difficult to read.

Consider breaking logic into functions when possible.

Ignoring Logical Operators

Understanding && and || is essential for writing effective conditions.

Conditional Statements in React

Conditional rendering is very common in React.

Example:

  const isLoggedIn = true;

return (
  <>
    {
      isLoggedIn
        ? <Dashboard />
        : <Login />
    }
  </>
);
  

React applications rely heavily on conditional logic.

Internal Learning Recommendation

Before learning conditional statements, make sure you understand:

• JavaScript Variables
• JavaScript Data Types
• JavaScript Operators

Operators and data types are heavily used inside conditions.

Production Tip

Professional developers usually:

• keep conditions simple
• avoid unnecessary nesting
• use meaningful variable names
• prefer readability over clever code
• extract complex logic into functions

Clean conditional logic improves maintainability significantly.

Why Conditional Statements Matter

Conditional statements help developers:

• control application behavior
• validate data
• manage permissions
• handle user interactions
• build dynamic experiences

They are a fundamental part of programming.

Conclusion

JavaScript conditional statements allow applications to make decisions based on different conditions.

Understanding if , else , else if , ternary operators, and switch statements helps developers build smarter and more dynamic applications.

As you move into React.js, Next.js, APIs, and backend development, conditional statements become even more important because they power much of the logic behind modern applications.