for/of Loops

Understanding the Syntax of for/of Loops

Alright, let's go over the JavaScript "for/of" loop right now. Its simple construction allows one very easy access.

for (variable of iterable) {
  // code block to be executed
}

Alright, now here's the deal: "variable" is what's holding the current element we're dealing with—your friend in the loop. Plus, "iterable"? We are iterating over that. Say you have a lot of fruit and want to highlight each one of them. Using an array would help you to achieve:

let fruits = ['apple', 'banana', 'mango'];

for (let fruit of fruits) {
  console.log(fruit);
}

Discover what happened there. The chum I mentioned—every loop around—grabbs the next fruit from "fruits," our iterable friend. And we shout it out loud in the console each time it does.

Here are some neat tips to help you lock in your thoughts on using "for/of" loops:

The element itself from the iterable is the "variable," not a number or location.
Think arrays, strings, maps, sets, and the like; your "iterable" can be anything following the iterable protocol.
You will have a fit if you try to loop over something like null or basic objects that cannot be looped over. You should be cautioned!

Making the most of these loops when building your JavaScript code requires you to be cozy with "for/of" syntax. So spin it to see how it might liven things up!

Difference between for/in and for/of Loops

Alright, let's break out the differences between JavaScript's "for/in" and "for/of" loops. They both focus on looping even if they have different gigs. Especially if you're playing about with things and need to know what's inside, the "for/in" loop is your go-to for looking at an object's properties. Examine it:

let car = {make: 'Toyota', model: 'Camry', year: 2020};

for (let property in car) {
  console.log(`${property}: ${car[property]}`);
}

Parading over the traits of the "vehicle" object in this small show, "For/in" flaunts each name and its value. About "for/of," though, it's mostly about sticking about with iterable groups like arrays, strings, maps, or sets, where you obtain each element straight-forwardly. It goes like this:

let fruits = ['apple', 'banana', 'mango'];

for (let fruit of fruits) {
  console.log(fruit);
}

The "for/of" loop is traveling the "fruits" array giving each fruit some attention as you can see here.

Let's reduce the primary variations between these two loops:

Whereas 'for/of' dances over the elements of an iterable, 'for/in' loops over the characteristics of an object.
'for/in' can manage any old item you toss at it; yet, 'for/of' follows its mob only iteratively.
Though "for/in" is all about the values (elements from the iterable), "for/in" hands you the keys (such property names) of the object.

Whether you're looping through an object's contents or pulling pieces from an iterable collection, determining whether to use "for/in" or "for/of" essentially comes down.

Using for/of with Arrays

When it comes to using "for/of" loops, arrays are best buddies. This loop lets you cruise over every element in an array with simplicity and clarity. Think of this fundamental picture:

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

for (let number of numbers) {
  console.log(number);
}

Here the "for/of" loop puts every number in the "numbers" array onto the terminal.Like our tiny helper, the "number" variable tracks every component as we proceed. Here is now the scoop on using 'for/of' with arrays:

The 'for/of' loop hands you the elements straight rather than their indices or places. If you must retrieve those indices, though, you may do a clever trick using the "Array.prototype.entries()" method to create an iterator with index-value pairs.
As in a standard "for," feel free to employ "break," "continue," and "return" in a "for/of" loop. Your control friends are them!
The "for/of" loop is not finicky; it's cool with all kinds of arrays—including those elegant typed arrays or arrays with unusual index configurations.

Especially when you're working through each piece one by one, using "for/of" with arrays is a fantastic approach to maintain your code nice and easy to read.

Using for/of with Strings

Hello here! JavaScript strings are really iterable, did you know? Yes, you can cruise across every character in a string using a "for/of" loop. Let us now have a look at how that operates:

let greeting = 'Hello, world!';

for (let char of greeting) {
  console.log(char);
}

In this case, the "for/of" loop is traversing the "greeting" string displaying each character one by one on the console. The variable "char" holds each character in turn, much as our dependable friend. Here's what you should bear in mind now while utilizing "for/of" with strings:

The "for/of" loop allows you to collect every character straight forwardly without considering their locations. If you do, however, want such positions, you can convert the text into an array with "Array.from()" or the spread operator ("...") then call "Array.prototype.entries()" for those index-value pairs.
With Unicode characters—including those challenging surrogate pairings—it's rather clever! Especially if your strings have complicated characters, this makes "for/of" a better choice than the traditional "for" loop or "for/in".
Using "for/of," you may completely rock "break," "continue," and "return," thereby providing all the control you need, just as in the traditional loops!

Therefore, "for/of" is your buddy while looping through strings since it will help you to simplify things and easily manage those particular characters!

Using for/of with Maps and Sets

Fine! Let's explore using JavaScript's Maps and Sets how "for/of" loops function. These people are iterable, which means you could loop through all their components really effortlessly. Look at this map-based example:

let map = new Map();
map.set('name', 'John');
map.set('age', 30);

for (let [key, value] of map) {
  console.log(`${key}: ${value}`);
}

Here the "for/of" loop is working, iteratively writing out those key-value pairs like a pro from every element in the "map." Every loop-around the variables "key" and "value" capture the current key and value. Let us therefore observe it in action using a Set:

let set = new Set(['apple', 'banana', 'mango']);

for (let fruit of set) {
  console.log(fruit);
}

In this case, the 'for/of' loop visits every item in the'set' distributing the fruit names to the console. As we move, the "fruit" variable grips onto the current element. Here's what to keep in mind therefore when using 'for/of' with Maps and Sets:

The 'for/of' loop allows you straight-up access to the Map or Set components. While in a Set you simply get the item itself, with a Map you have an array for every item [key, value].
With a "for/of" loop, you can absolutely employ "break," "continue," and "return"—just as you would with the traditional "for" loop—it's all in your control!
"For/of" maintains everything in line as per the insertion order by respecting the sequence in which you included elements to your Map or Set.

Especially when you have to sequence over each element, using "for/of" with Maps and Sets is a great approach to maintain your code neat and simple to understand.

Using for/of with Node Lists and HTML Collections

So let's discuss how you might use NodeLists and HTMLCollections in JavaScript "for/of" loops. You have been working with these collections if you have ever applied DOM techniques including "document.querySelectorAll()" or "document.getElementsByClassName()". And speculate what? They are iterative, hence "for/of" loops fit them exactly. Using a NodeList will help us see how it's done:

let paragraphs = document.querySelectorAll('p');

for (let paragraph of paragraphs) {
  console.log(paragraph.textContent);
}

Here our "for/of" loop is publishing the content inside each member in the "paragraphs" NodeList while it is strutting its business. Every time we loop through, the "paragraph" variable notes the current element. See now how it performs with an HTML Collection:

let cells = document.getElementsByClassName('cell');

for (let cell of cells) {
  console.log(cell.innerHTML);
}

In this case, the "for/of" loop shows off the inner HTML of every element in the "cells' HTML Collection." Rising above all else, the "cell" variable carries the current element every time around. These ideas apply to using "for/of" with NodeLists and HTMLCollections:

Not the index numbers, the 'for/of' loop provides a straight line path to the elements themselves. If you require the indices, however, just convert the collection into an array using 'Array.from()' or the spread operator ('...') then pair them with their indices using 'Array.prototype.entries()'.
Like in the old-fashioned "for" loops, your reliable "break," "continue," and "return" lines function great in a "for/of" loop. You have all control.
Working with NodeLists and HTMLCollections is much benefited from the 'for/of' keeping the elements in the precise sequence they occur in the DOM.

Give it a try; utilizing 'for/of' with NodeLists and HTMLCollections is a fantastic approach to simplify and clarify your DOM code!

Error Handling in for/of Loops

Let's talk about how to handle errors in JavaScript, especially with "for/of" loops. Becoming in charge of this will make your code much more reliable. So, "for/of" loops are just like any other type of loop when it comes to handling mistakes. A common problem is trying to run through something that can't be iterated, which will lead to a TypeError.You can use "typeof" or "Array.isArray()" to see if the thing you want to run over can be iterated. Here's an example:

try {
  for (let element of nonIterable) {
    // This will throw a TypeError
  }
} catch (error) {
  console.error('An error occurred:', error);
}

This shows that trying to loop through "noniterable" will fail because it is not iterable, so trying to do so will cause a TypeError. But using a "try/catch" block, we find that problem and gently log it off. Runtime problems can thus also surface in the code block of the loop. You approach those as follows:

let numbers = [1, 2, 'three', 4];

for (let number of numbers) {
  try {
    console.log(number.toFixed(2));
  } catch (error) {
    console.error('An error occurred:', error);
  }
}

Here, the "toFixed()" method throws a TypeError by melting when it comes upon the string "three". Still, there's no cause for concern; the "catch" block is ready to log it off. Therefore, keep in mind these guidelines on error management in "for/of" loops:

Make sure your iterable is legitimate constantly to avoid those unpleasant TypeErrors.
Try focusing and grabbing. Pop in "try/throw" blocks to manage any unexpected loop runtime errors.
Consider "finally": Use a "finally" block if you have to tidy or complete tasks regardless of error or lack of one.

Correcting error handling in your "for/of" loops will strengthen your code and help to prevent those unanticipated crashes!

Performance Considerations of for/of Loops

Turning now to the performance aspect of "for/of" loops. For looping through items, they are quite useful and aesthetically pleasing; nonetheless, it's interesting to know how they perform-wise. Generally speaking, "for/of" loops are a little slower than "Array.prototype.forEach()" loops and the classic "for." This slowing down results from "for/of" requiring somewhat more iteratively behind-the-scenes activity. However, this slow down is usually nothing to worry about—unless you're developing some high-stakes, performance-sensitive code or crunching through enormous amounts. See this example to observe the speed variations:

let numbers = Array(1e6).fill(Math.random());

console.time('for loop');
for (let i = 0; i < numbers.length; i++) {
  Math.sin(numbers[i]);
}
console.timeEnd('for loop');


console.time('forEach loop');
numbers.forEach(number => {
  Math.sin(number);
});
console.timeEnd('forEach loop');


console.time('for/of loop');
for (let number of numbers) {
  Math.sin(number);
}
console.timeEnd('for/of loop');

Here, we clock how long each loop takes to go through a million random numbers using 'console.time()' and 'console.timeEnd(). Usually, the "for/of" loop behind the others somewhat. Regarding "for/of" loop performance, however, this is what you need truly remember:

Usually, the speed difference between 'for/of' and other loops is so little that your code won't be slowed down much.
Maybe stay with a conventional "for" loop or "Array.prototype.forEach()," if performance concerns you—that is, if you are working on massive data or your code must be lightning-fast.
Recall that shaving off some milliseconds is less crucial than clear, easily readable code. A major benefit in and of itself is that "for/of" loops help your code seem neat and logical.

Thus, even if "for/of" loops might not be the fastest choice, their simplicity and readability usually triumph over a small performance impact.

Real-world Examples of for/of Loops

Super flexible and useful in many real-world coding situations, HTML "For/of" loops are Let's explore some interesting examples:

One iteratively across an array of things: Say you have a lot of user profiles in an array and you have to yell each user's name out. Gliding right across the array, a "for/of" loop lets you simply remove every user item.

let users = [
  {name: 'John', age: 30},
  {name: 'Jane', age: 25},
  {name: 'Jim', age: 35}
];

for (let user of users) {
  console.log(user.name);
}

Processing form data: Got a form full of input fields? Use a 'for/of' loop to sweep through those fields and gather up all the values in a snap.

let form = document.querySelector('form');
let formData = new FormData(form);

for (let [name, value] of formData) {
  console.log(`${name}: ${value}`);
}

Working with DOM collections: A 'for/of' loop can help you quickly go through elements in NodeLists or HTMLCollections and change them as needed.

let paragraphs = document.querySelectorAll('p');

for (let paragraph of paragraphs) {
  paragraph.style.color = 'blue';
}

These JavaScript examples show just how flexible and handy "for/of" loops can be working with arrays, strings, DOM collections, or any iterable item. They genuinely help to simplify and explain your code.

Previous Next

GyataAI

for/of Loops

Table of Contents

Understanding the Syntax of for/of Loops

Using for/of with Arrays

Error Handling in for/of Loops

Performance Considerations of for/of Loops