Every JavaScript Loop Type Explained: [With Codeblocks and Examples]

Let me show you how mastering JavaScript loops can greatly simplify writing repetitive code blocks.

Content Navigation show

Since first appearing in 1997, loops have remained critical for web development by saving huge amounts of time and effort. Yet many devs still find loop concepts tricky to apply.

My goal is to clarify the purpose of each type with real code examples you can apply immediately. Soon these foundational constructs will feel natural in your daily coding!

Why Learn JavaScript Looping?

Let‘s briefly appreciate why loops are worth understanding deeply as a JavaScript developer:

Productivity – Rather than writing the same block of code over and over, we can create an automated loop to handle hundreds or thousands of iterations for us. The efficiency gains are massive over time.

Iteration – We can programmatically walk through objects like arrays and strings to access or manipulate their data values. This makes large datasets manageable.

Control Flow – Loops give us fine-grained control over the execution path of our programs. We can delay, pause, or exit early based on conditions.

That covers some high levels pros for embracing loops versus manual repetition. Of course, we should be careful not to create accidental endless loops which can crash our code.

Now let‘s break down each loop variety with examples…

For Loops

We‘ll start from the classic ‘for loop‘, used most often for counted iterations. The syntax shape has remained consistent across JavaScript standards:

for ([initialize]; [condition]; [iterate]) {
   // Execute code block
}

Tracing the typical flow:

  1. Initialize starting variable (i = 0).
  2. Check conditional expression before each iteration.
  3. Iterate by incrementing/decrementing on each loop.
  4. Repeat until condition fails.

Let‘s demonstrate by printing the first 5 counting numbers:

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

//0, 1, 2, 3, 4

Inside the block, we can leverage break and continue statements to explicitly control iteration flow as needed.

While for loops are ideal for counting, we can iterate arrays and strings using indexes as well: 

const fruits = [‘apple‘, ‘mango‘, ‘banana‘];

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

This structure remains useful across nearly all JavaScript environments.

While & Do-While Loops

while and do/while loops are better suited for situations where we want to validate conditions before executing blocks of code.

For example, repeatedly retrieving user input until valid: 

let input;

while (!input) {
  input = fetchInput(); // Keep asking

  if (valid(input)) { 
    break; // Got valid input  
  } 
}

We can also safely call functions that modify external state:

let done = false;

while (!done) {
  done = uploadBatch(); // Upload next batch  
}

With do/while, we run the body first before checking:

let validInput; 

do {
  input = fetchInput(); 
} while (!valid(input));

This structure guarantees running at least once. Handy for menus, games, surveys, and cleaning bad input.

Tip: Beware infinite loops from conditions permanently evaluating as truthy.

For-In and For-Of Loops

The for-in loop appeared in ES3 for easily enumerating JavaScript object properties: 

const person = {
  name: ‘Kyle‘,
  age: 30 
};

for (let key in person) {
  console.log(key); // ‘name‘, ‘age‘
}

Note: Ordering and prototype properties require caveats.

A cleaner iteration syntax arrived in ES6 with for-of for supporting iterables:

const languages = [‘JavaScript‘, ‘Python‘]; 

for (let lang of languages) {
  console.log(lang); 
}

This works out of the box with arrays, strings, maps, sets and more.

Under the hood, for-of leverages these data types implementing the iteration protocol consisting of:

  • [Symbol.iterator]() method returning an iterator
  • next() method returning {value, done} pairs

For unique use cases, we can also create custom iterables.

Controlling Loop Flow

We often need more granular control over loop flow beyond just breaking.

The continue statement skips the current iteration, but keeps looping:

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

  if (i == 3) {
     continue; // Skip printing 3 
  }  

  console.log(i)
}

Labeled statements uniquely identify blocks we can break/continue explicitly:

loop1: 
for (x = 0; x < 5; x++) {

   loop2: 
   for (y = 0; y < 3; y++) {

     if (x === 3) {
        continue loop1; // Skip outer loop next iteration
     }

     console.log(x, y);   
  }
}

This level of control is extremely useful for handling errors, validation, asynchronous callbacks, and more complex exit scenarios.

Now that we can fine-tune flow, let‘s look at…

Nested JavaScript Looping

We can place loops inside other loops to work with multi-dimensional data.

For example, iterating a 2D matrix with coordinates:

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

for (let i = 0; i < matrix.length; ++i) {
  for (let j = 0; j < matrix[i].length; ++j) {
    console.log(`Value at coordinages (${i}, ${j}) is ${matrix[i][j]});  
  }
}

We can nest to any depth, but should be wary of performance impacts regarding time complexity.

Review big-O notation to better understand algorithmic efficiency.

Aim to structure loops by increasing order of volatility. Cache invariants outside nested loops within reasonable memory limits.

In Closing

We‘ve covered a wide range of built-in JavaScript looping constructs:

  • for great for counted iterations
  • while & do validate before/after executing
  • for-in enumerates object keys
  • for-of iterates values of modern iterables

Combine above foundation with break, continue, labels, and nesting to craft specialized control flow.

I hope these practical explanations and code samples help clarify the purpose behind each loop type.

Feel free to reference this guide when evaluating options for your projects. Thanks for reading and happy looping!

Tags: