DEV Community

Sh Raj
Sh Raj

Posted on • Updated on

Loops in JavaScript

A Comprehensive Guide to Loops in JavaScript

Loops are fundamental constructs in programming that allow you to repeat a block of code multiple times. In JavaScript, there are several types of loops, each serving different purposes and providing flexibility in how you iterate over data. Let's explore each type of loop with examples:

1. for Loop

The for loop is one of the most commonly used loops. It's ideal for iterating a specific number of times.

for (let i = 0; i < 5; i++) {
  console.log(i);
}
// Output: 0, 1, 2, 3, 4
Enter fullscreen mode Exit fullscreen mode

2. while Loop

The while loop repeatedly executes a block of code as long as a specified condition is true.

let count = 0;
while (count < 3) {
  console.log(count);
  count++;
}
// Output: 0, 1, 2
Enter fullscreen mode Exit fullscreen mode

3. do...while Loop

Similar to while, but it ensures that the code block is executed at least once before the condition is tested.

let num = 0;
do {
  console.log(num);
  num++;
} while (num < 3);
// Output: 0, 1, 2
Enter fullscreen mode Exit fullscreen mode

4. for...in Loop

Used to iterate over the enumerable properties of an object.

const person = {
  name: 'John',
  age: 30,
  gender: 'male'
};

for (let key in person) {
  console.log(key + ': ' + person[key]);
}
// Output: name: John, age: 30, gender: male
Enter fullscreen mode Exit fullscreen mode

5. for...of Loop

Introduced in ES6, this loop is used to iterate over iterable objects like arrays, strings, etc.

const colors = ['red', 'green', 'blue'];

for (let color of colors) {
  console.log(color);
}
// Output: red, green, blue
Enter fullscreen mode Exit fullscreen mode

6. forEach() Method

Specifically for arrays, forEach() executes a provided function once for each array element.

const numbers = [1, 2, 3];

numbers.forEach(function(number) {
  console.log(number * 2);
});
// Output: 2, 4, 6
Enter fullscreen mode Exit fullscreen mode

7. map() Method

Similar to forEach(), but it creates a new array with the results of calling a provided function on every element in the array.

const numbers = [1, 2, 3];

const doubled = numbers.map(function(number) {
  return number * 2;
});

console.log(doubled);
// Output: [2, 4, 6]
Enter fullscreen mode Exit fullscreen mode

8. filter() Method

Creates a new array with elements that pass a test specified by a function.

const numbers = [1, 2, 3, 4, 5];

const evenNumbers = numbers.filter(function(number) {
  return number % 2 === 0;
});

console.log(evenNumbers);
// Output: [2, 4]
Enter fullscreen mode Exit fullscreen mode

9. reduce() Method

Reduces an array to a single value by executing a reducer function for each element.

const numbers = [1, 2, 3, 4];

const sum = numbers.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);

console.log(sum);
// Output: 10
Enter fullscreen mode Exit fullscreen mode

These examples cover the major types of loops and iteration methods in JavaScript. Understanding these concepts will empower you to efficiently work with arrays, objects, and other iterable data structures in your JavaScript applications.

Top comments (0)