Skip to content

JavaScript Loops

This lesson explains JavaScript Loops in JavaScript with beginner-friendly examples, practical use cases, and clear best practices.

JavaScript Loops Overview

JavaScript loops are used to execute a block of code repeatedly until a specific condition is met. Loops help developers avoid writing the same code multiple times and are commonly used for working with arrays, objects, user input, lists, tables, API data, and repeated calculations.

JavaScript provides several loop types, including for, while, do...while, for...of, and for...in. Choosing the correct loop improves readability, performance, and maintainability.

Loop Type Purpose Best Use Case
for Runs code a known number of times. Index-based loops and counters.
while Runs code while a condition remains true. Unknown number of iterations.
do...while Runs code at least once before checking the condition. Menus, prompts, and retry logic.
for...of Loops through iterable values. Arrays, strings, maps, and sets.
for...in Loops through object keys. Object property iteration.

JavaScript Loops Example

const fruits = ["Apple", "Banana", "Mango"];

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

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

The first loop uses an index to access each array item. The second loop uses for...of, which is cleaner when you only need the values from an array or another iterable object.

When to Use Each JavaScript Loop

Scenario Recommended Loop
Loop a known number of times for
Loop while a condition is true while
Run code at least once do...while
Loop through array values for...of
Loop through object properties for...in
Transform array values map method
Filter array values filter method

Top 10 Useful JavaScript Loop Examples

# Use Case Recommended Loop Sample Pattern Result
1 Print numbers 1 to 10 for for (let i = 1; i <= 10; i++) Known iteration counter.
2 Iterate array values for...of for (const item of items) Clean value-based iteration.
3 Loop object properties for...in for (const key in user) Accesses object keys dynamically.
4 Retry until success while while (!isConnected) Runs until condition becomes true.
5 Show menu at least once do...while do { ... } while (choice !== "exit") Executes body before checking condition.
6 Filter active users for...of if (user.active) active.push(user) Collects matching records.
7 Calculate total sum for sum += numbers[i] Accumulates numeric values.
8 Find first matching item for + break if (item.id === target) break Stops loop early for efficiency.
9 Skip invalid values for...of + continue if (!value) continue Ignores unwanted iterations.
10 Nested matrix traversal Nested for for (...) { for (...) { ... } } Processes rows and columns.

Best Practices

  • Use for...of when looping through array values.
  • Use for...in mainly for object properties.
  • Use let for loop counters that change.
  • Avoid infinite loops by updating loop conditions correctly.
  • Keep loop bodies small and focused.
  • Use array methods like map, filter, and reduce when they improve readability.
  • Avoid modifying arrays while looping unless necessary.
  • Use break and continue carefully to control loop flow.

Common Mistakes

  • Forgetting to update the loop counter.
  • Creating infinite loops accidentally.
  • Using for...in for arrays instead of objects.
  • Writing complex logic inside a loop.
  • Changing array length while looping without planning.
  • Using the wrong comparison condition.
  • Ignoring performance when looping through large datasets.

Key Takeaways

  • Loops execute code repeatedly based on a condition.
  • The for loop is useful when the number of iterations is known.
  • The while loop is useful when the number of iterations is unknown.
  • for...of is ideal for arrays and iterable values.
  • for...in is mainly used for object properties.
  • Choosing the correct loop improves readability and prevents bugs.

Pro Tip

Use for...of for clean array iteration and use array methods such as map, filter, and reduce when transforming or processing collections in modern JavaScript.

You now understand JavaScript loops, including for, while, do...while, for...of, and for...in. Continue to the next lesson to learn JavaScript Functions and how to organize reusable logic.