Overview of Conditional Statements & Loops in JavaScript

In web development, JavaScript is a dominant language, and its power largely comes from features like conditional statements and loops. These fundamental constructs allow developers to make decisions in their code and perform repetitive tasks efficiently.

Conditional Statements in JavaScript

Conditional statements enable programs to perform actions based on whether certain conditions are true or false. By evaluating expressions, these statements determine which specific sections of code will be executed.

1. if Statement

As the most basic conditional structure, the if statement allows you to run specific code when a given condition holds true.

let age = 18;

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

Since the value of age is 18, the condition holds true, and the program outputs the message to the console.

2. if…else Statement

if…else provides a way to choose between two code paths depending on whether a condition is met.

let isRaining = true;

if (isRaining) {
  console.log("Take an umbrella.");
} else {
  console.log("No umbrella needed.");
}

Here, depending on whether it’s raining or not, the appropriate advice is given.

3. else if Statement

Use else if to check multiple conditions in a sequence. This is useful when more than two outcomes are possible.

let score = 75;

if (score >= 90) {
  console.log("Grade: A");
} else if (score >= 80) {
  console.log("Grade: B");
} else if (score >= 70) {
  console.log("Grade: C");
} else {
  console.log("Grade: F");
}

Each condition is checked in order. As soon as one of the conditions is true, the program executes its block of code and ignores all others.

4. Ternary Operator

A ternary operator is a quick way to check a condition and choose between two values: one if it’s true and one if it’s false.

let age = 16;
let message = age >= 18 ? "Adult" : "Minor";
console.log(message);

This single line replaces what could otherwise be a more verbose if…else block.

Loops in JavaScript

Loops let you execute a block of code multiple times, which is especially useful when dealing with arrays, collections, or repetitive tasks.

1. for Loop

Typically used when the number of iterations is predetermined.

for (let i = 0; i < 5; i++) {
  console.log("Number:", i);
}

This loop will print numbers 0 to 4. It includes an initializer (let i = 0), a condition (i < 5), and an increment (i++).

2. while Loop

A while loop continues to run as long as a specified condition remains true.

let i = 0;

while (i < 5) {
  console.log("Counting:", i);
  i++;
}

Unlike for, this is often used when the number of iterations isn’t known in advance.

3. do…while Loop

This loop guarantees the code block runs at least once, even if the condition is false the first time.

let i = 0;

do {
  console.log("Value:", i);
  i++;
} while (i < 5);

Useful when the action must be taken at least once before checking the condition.

4. for…of Loop

The for…of loop is perfect for iterating over arrays and iterable objects.

const fruits = ["apple", "banana", "cherry"];

for (const fruit of fruits) {
  console.log(fruit);
}

5. for…in Loop

Used to iterate over object properties:

const person = { name: "Alex", age: 36 };

for (const key in person) {
  console.log(key, ":", person[key]);
}

Break & Continue

• break: exits the loop entirely.
• continue: skips the current iteration.

for (let i = 0; i < 10; i++) {
  if (i === 5) break;      // Exit from the loop
  if (i % 2 === 0) continue; // Skip even numbers
  console.log(i);
}

Conclusion

Mastering conditional statements and loops is essential for any JavaScript developer. They form the building blocks of logic and control flow in your code. Whether you’re building a simple web app or a complex system, these tools help make your programs smart and efficient.