JavaScript Basics: Control Flow (Conditionals and Loops)

When writing a program, you often need to control how and when certain pieces of code run. This is where control flow comes in. Control flow lets JavaScript decide:

• Which block of code should run?
• How many times should it run?

Two fundamental aspects of control flow are:

1. Conditionals (decision-making)
2. Loops (repetition)

Let’s explore both step by step.

1. Conditionals (Decision-Making)

Conditionals allow JavaScript to make decisions based on conditions.

• The if Statement The most basic conditional checks if a condition is true and executes a block of code.

javascript
let age = 20;

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

• The if-else Statement If the condition is not true, else provides an alternative.

javascript
let age = 16;

if (age >= 18) {
  console.log("You can vote.");
} else {
  console.log("You are too young to vote.");
}

• if...else if...else (Multiple Conditions) Use this when you want to check multiple possible conditions.

javascript
let score = 75;

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

• The switch Statement When you have multiple values to compare against one variable, switch is cleaner.

javascript
let day = 3;
let dayName;

switch (day) {
  case 1:
    dayName = "Monday";
    break;
  case 2:
    dayName = "Tuesday";
    break;
  case 3:
    dayName = "Wednesday";
    break;
  default:
    dayName = "Invalid day";
}

console.log(dayName); // Wednesday

• Each case checks a value.
• Use break to stop execution once a match is found.
• default runs if no case matches.

2. Loops (Repetition)

Loops let you execute a block of code multiple times without writing it repeatedly.

• for Loop Best when you know how many times the code should run.

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

• let i = 1; → initialize counter
• i <= 5; → condition to keep looping

• i++ → update counter each time

• while Loop
  Repeats as long as the condition is true.
  

javascript
let count = 1;

while (count <= 5) {
  console.log("Count is: " + count);
  count++;
}

This runs until count is greater than 5.

• do...while Loop Similar to while, but runs at least once, even if the condition is false.

javascript
let num = 6;

do {
  console.log("Number is: " + num);
  num++;
} while (num <= 5);

The message prints once, even though num <= 5 was already false.

3. break and continue Statements

• break: Exit a loop immediately.
• continue: Skip the current iteration and move to the next.

javascript
for (let i = 1; i <= 5; i++) {
  if (i === 3) {
    continue; // Skip number 3
  }
  if (i === 5) {
    break;    // Stop loop completely
  }
  console.log(i);
}

// Output: 1, 2, 4

Final Thoughts

Control flow in JavaScript allows you to:

• Conditionals → make decisions (if-else, switch)
• Loops → repeat code (for, while, do...while)

Stay tuned for more insights as you continue your journey into the world of web development!

Check out theYouTubePlaylist for great JavaScript content for basic to advanced topics.

Please Do Subscribe Our YouTube Channel for clearing programming concept and much more ...CodenCloud

Comments

[Alex Mustiere]

There are more loops available in JavaScript.

items.forEach((item, index) => { /* ... */ } // iteration on an array
for (const item of items) { /* ... */ } // iteration on an array
for (const property in object) { /* ... */ } // iteration on an object