Understanding Loops in JavaScript with Examples

Learn JavaScript loops with practical examples. Understand for loops, while loops, do...while, for...of, for...in, break, continue, and loop best practices.

JavaScript Loops Explained with Examples

Loops are one of the most powerful features in JavaScript.

They allow developers to execute the same block of code multiple times without writing duplicate code.

Modern JavaScript applications use loops for:

• displaying product lists
• rendering UI components
• processing API data
• handling user records
• generating reports
• working with arrays
• dashboards
• React applications

Understanding loops is essential before learning advanced JavaScript concepts.

What are Loops in JavaScript?

Loops are used to repeat a block of code until a specific condition is met.

Example:

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

Output:

  1
2
3
4
5
  

Instead of writing console.log() five times, the loop performs the task automatically.

Why Loops are Important

Loops help developers:

• reduce repetitive code
• improve efficiency
• process large datasets
• work with arrays and objects
• build scalable applications

Almost every JavaScript application relies on loops.

Types of Loops in JavaScript

JavaScript provides several types of loops.

Each loop is useful in different situations.

The for Loop

The for loop is the most commonly used loop in JavaScript.

Syntax:

  for (initialization; condition; update) {
  // code
}
  

Example:

  for (let i = 1; i <= 3; i++) {
  console.log(i);
}
  

Output:

  1
2
3
  

Understanding for Loop Parts

Example:

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

This structure is heavily used in programming.

Real-World Example

Displaying products:

  const products = [
  "Laptop",
  "Phone",
  "Keyboard"
];

for (let i = 0; i < products.length; i++) {
  console.log(products[i]);
}
  

Output:

  Laptop
Phone
Keyboard
  

The while Loop

The while loop runs as long as a condition remains true.

Syntax:

  while (condition) {
  // code
}
  

Example:

  let count = 1;

while (count <= 5) {
  console.log(count);
  count++;
}
  

Output:

  1
2
3
4
5
  

The do...while Loop

The do...while loop executes at least once.

Example:

  let count = 1;

do {
  console.log(count);
  count++;
} while (count <= 5);
  

Output:

  1
2
3
4
5
  

The code executes before the condition is checked.

for...of Loop

Used for iterating over arrays.

Example:

  const skills = [
  "HTML",
  "CSS",
  "JavaScript"
];

for (const skill of skills) {
  console.log(skill);
}
  

Output:

  HTML
CSS
JavaScript
  

This syntax is cleaner than traditional loops.

for...in Loop

Used for iterating through object properties.

Example:

  const user = {
  name: "Sachin",
  role: "Developer"
};

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

Output:

  name Sachin
role Developer
  

Useful when working with objects.

forEach() Method

Arrays provide the forEach() method.

Example:

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

colors.forEach(function(color) {
  console.log(color);
});
  

Output:

  red
blue
green
  

Modern JavaScript developers frequently use forEach() .

Break Statement

The break statement stops a loop immediately.

Example:

  for (let i = 1; i <= 10; i++) {

  if (i === 5) {
    break;
  }

  console.log(i);
}
  

Output:

  1
2
3
4
  

The loop stops when i becomes 5.

Continue Statement

The continue statement skips the current iteration.

Example:

  for (let i = 1; i <= 5; i++) {

  if (i === 3) {
    continue;
  }

  console.log(i);
}
  

Output:

  1
2
4
5
  

The number 3 is skipped.

Infinite Loops

An infinite loop never stops.

Example:

  while (true) {
  console.log("Running...");
}
  

This should generally be avoided.

Infinite loops can crash applications or browsers.

Real-World Example: Display Users

Example:

  const users = [
  "Rahul",
  "Amit",
  "Priya"
];

users.forEach(user => {
  console.log(user);
});
  

Output:

  Rahul
Amit
Priya
  

This type of logic is extremely common in frontend development.

Watch Full JavaScript Loops Tutorial

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

Watch the Full JavaScript Loops Tutorial

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

Common Beginner Mistakes

Creating Infinite Loops

Incorrect loop conditions can cause applications to freeze.

Always ensure the loop condition eventually becomes false.

Using for...in with Arrays

for...in is primarily designed for objects.

For arrays, prefer:

• for
• for...of
• forEach()

Forgetting to Update Variables

Example:

  let count = 1;

while (count <= 5) {
  console.log(count);
}
  

This creates an infinite loop because count never changes.

Loops in React

Loops are commonly used for rendering UI.

Example:

  const products = [
  "Laptop",
  "Phone",
  "Keyboard"
];

products.map(product => (
  <li>{product}</li>
));
  

React applications rely heavily on loops and array methods.

Internal Learning Recommendation

Before learning loops, make sure you understand:

• JavaScript Variables
• JavaScript Arrays
• JavaScript Conditional Statements
• JavaScript Operators

These concepts are heavily used inside loops.

Production Tip

Professional developers usually:

• choose the right loop for the task
• avoid unnecessary nested loops
• prefer readability
• use array methods when appropriate
• optimize loops for performance

Well-structured loops improve code maintainability and efficiency.

Why Loops Matter

Loops help developers:

• process data efficiently
• build dynamic interfaces
• render lists
• automate repetitive tasks
• create scalable applications

They are one of the core concepts of programming.

Conclusion

JavaScript loops allow developers to execute code repeatedly and process data efficiently.

Understanding for , while , do...while , for...of , for...in , and forEach() helps developers write cleaner and more scalable JavaScript code.

As you move into React.js, Next.js, APIs, and backend development, loops become even more important because modern applications frequently process large amounts of dynamic data.