Loops In JavaScript

Hey Devs!

Ever find yourself writing the same line of code over and over again? Or maybe you need to process a long list of items? That's a classic problem in programming, and thankfully, there's a powerful solution: loops!

Loops are a fundamental concept in programming that allow you to automate repetitive tasks. Instead of manually writing the same code multiple times, you write it once and tell the computer how many times to repeat it. This saves you a ton of time and makes your code much more efficient.

In this guide, we'll break down the most common types of loops in JavaScript. We'll cover everything from the basic for loop to the modern for...of loop and the versatile forEach() method. By the end, you'll have a solid understanding of how each loop works and when to use it.

What Exactly Is a Loop?

At its core, a loop is a way to execute a block of code multiple times. Think of it like a "repeat" button for your code.

For example, imagine you have a list of ten names and you want to print each one. Without a loop, you'd have to write console.log() ten times. A loop lets you write that command just once and tells the computer to run it for every name on the list.

Every loop has three key components:

1. A starting point for the loop.

2. A condition that must be true for the loop to continue running.

3. A way to move to the next step so the loop doesn't run forever.

Let's explore the different types of loops that use these concepts.

The for Loop: The Classic Counter

The for loop is one of the most common and powerful loops. It's perfect for situations where you know exactly how many times you want the loop to run.

Its structure is straightforward and includes all three components mentioned above in a single line:

for (initialization; condition; increment) { // Code to repeat }

• initialization: This is where you create a counter variable, like let i = 0. This part runs only once when the loop starts.

• condition: This is a test that the computer checks before each repetition. If the condition is true, the loop continues. If it's false, the loop stops.

• increment: This code runs after each repetition. It's usually used to increase the counter variable, like i++.

Example: Let's print the numbers from 1 to 5.

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

// Output:
// Count: 1
// Count: 2
// Count: 3
// Count: 4
// Count: 5

Here, the loop starts with i = 1, runs as long as i <= 5, and increases i by one after each run.

Note: You can also decrement the value and run the loop. For example if you want to print the digits in reverse order (From 5 to 1). You can initialize i = 5 and it will run as long as i >= 1 and then decrement the value of i by i--.

The while Loop: The Simple Condition

The while loop is a simpler loop that continues to run as long as a specified condition is true. It's incredibly useful when you don't know in advance how many times the loop needs to run.

Its structure is much leaner:

while (condition) { // Code to repeat }

The most important thing to remember with a while loop is that you must have some code inside the loop that will eventually make the condition false. If you don't, the loop will run forever, creating an infinite loop that can crash your program.

Example: Let's keep adding 2 to a number until it's bigger than 10.

let number = 4;
while (number <= 10) {
  console.log("The number is:", number);
  number += 2; // This line ensures the condition will eventually become false.
}

// Output:
// The number is: 4
// The number is: 6
// The number is: 8
// The number is: 10

The do...while Loop: Run at Least Once

The do...while loop is a variation of the while loop with one key difference: it will always execute the code at least once, even if the condition is false from the very beginning. This is because the condition is checked at the end of the loop, not the start. That's why the for and while loops are known as Entry Controlled Loops , and do...while is known as Exit Controlled Loop.

Its structure looks like this:

do { // Code to repeat } while (condition)

Example: This code will print "Hello" one time, even though the condition is false.

let count = 10;
do {
  console.log("Hello");
  count++;
} while (count < 5); // The condition is false, but the code already ran once.

// Output:
// Hello

Looping Through Collections: Arrays and Objects

When you work with lists of data, like an array or an object, JavaScript gives you special loops that are designed specifically for these tasks.

The for...of Loop: For Values in an Array

This modern loop is perfect for iterating over arrays. It gives you the actual value of each item in the collection with a clean, readable syntax.

Use it when you want to work with the individual items of an array.

Example: Loop through an array of fruits to get each one.

const fruits = ["apple", "banana", "cherry"];
for (const fruit of fruits) {
  console.log(fruit);
}

// Output:
// apple
// banana
// cherry

The for...in Loop: For Keys in an Object

This loop is specifically designed to iterate over the properties (keys) of an object. It gives you the name of each property as a string.

Use it when you want to see all the property names and their corresponding values inside an object.

Example: Loop through an object holding a user's details.

const user = {
  name: "Ujjwalit",
  age: 21,
  city: "Moradabad"
};

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

// Output:
// name : Ujjwalit
// age : 21
// city : Moradabad

Important: While for...in can be used on arrays, it's generally a bad idea and can lead to unexpected results. Stick to for...of or forEach() for arrays.

The forEach() Method: The Modern Array Iterator

The forEach() method is a built-in function that exists on every array. It provides a clean, modern, and readable way to loop through an array. You give it a function, and forEach() will run that function for every item in the array.

Use it for a clean and simple way to perform an action on every element of an array.

Example: Use forEach() to print each color from a list.

const colors = ["red", "green", "blue"];
colors.forEach(function(color) {
  console.log("The color is:", color);
});

// Output:
// The color is: red
// The color is: green
// The color is: blue

The function you pass to forEach() can also accept a second parameter for the index and a third for the array itself, which can be very helpful!

Choosing the Right Loop

Here's a quick and simple table to help you decide which loop to use for different situations.

Wrapping Up

Loops are a core concept in programming that you'll use constantly. They are your best friends when it comes to automating tasks and writing efficient code.

The best way to master these loops is to practice. Try opening your browser's console (right-click on a page and choose "Inspect", then go to the "Console" tab) and run the examples yourself. Create your own arrays and objects and see what happens when you loop through them.

Enjoy the content here?

Sign up on our platform or join our WhatsApp channel here to get more hands-on guides like this, delivered regularly.

See you in the next blog. Until then, keep practicing and happy learning!