JavaScript for…of Loop

JavaScript is a powerful and versatile programming language widely used for web development. Among its many features is the for…of loop, a convenient way to iterate over iterable objects such as arrays, strings, and more. In this article, we’ll explore the for…of loop in detail, providing clear examples and explanations to help beginners grasp this concept effectively.

The for…of Loop

The for…of loop is a specialized loop in JavaScript that allows you to iterate over elements of iterable objects. This includes, but is not limited to, arrays, strings, and other collections such as NodeLists.

Syntax

The basic syntax of the for…of loop is as follows:

for (const element of iterable) {
      // Code to execute for each element
  }

Example

Let’s look at a simple example to illustrate how the for…of loop works:

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

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

In this example, the loop will print each number in the numbers array to the console.

Looping Through Arrays

Arrays are one of the most common structures you’ll encounter in JavaScript. The for…of loop makes it easy to iterate over each element in an array.

Example

Here’s an example that demonstrates looping through an array:

const fruits = ['Apple', 'Banana', 'Cherry'];

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

Output:

Apple
Banana
Cherry

Looping Through Strings

The for…of loop can also be used to iterate through characters in a string, making it a versatile tool.

Example

Here’s how you can loop through a string:

const greeting = "Hello";

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

Output:

H
e
l
l
o

Looping Through Array-like Objects

Array-like objects, such as the arguments object in functions, can also be traversed using the for…of loop.

Example

Consider the following function that uses an arguments object:

function showArguments() {
    for (const arg of arguments) {
        console.log(arg);
    }
}

showArguments('One', 'Two', 'Three');

Output:

One
Two
Three

Looping Through NodeLists

NodeLists are collections of DOM nodes which can be efficiently iterated with for…of loops. You can obtain a NodeList through methods like querySelectorAll.

Example

Here’s how to loop through a NodeList:

<div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
</div>

Output (in the console):

Item 1
Item 2
Item 3

The Difference Between for…of and for…in

While both for…of and for…in loops are used for iterating, they are fundamentally different in their purposes:

Feature	for…of	for…in
Use Case	Iterates over iterable objects (arrays, strings, etc.)	Iterates over enumerable properties of an object
Output	Returns the value of each element	Returns the key (or index) of each property
Best for	Arrays, Strings, NodeLists, etc.	Objects

Conclusion

The for…of loop is an essential tool in JavaScript for iterating over different types of iterable objects with ease and clarity. By grasping its syntax and how to use it effectively, you can write cleaner and more efficient code. Remember to leverage the for…of loop for use cases where you need to access the elements themselves, while for…in is better suited for working with object properties.

FAQ

What is the primary use of a for…of loop in JavaScript?

The primary use of the for…of loop is to iterate through iterable objects like arrays, strings, and NodeLists, providing a straightforward way to access elements directly.

Can I use for…of with objects?

No, for…of is designed for iterable objects. If you want to loop through an object, use the for…in loop instead.

How do I skip certain elements while using for…of?

You can use continue to skip certain elements in the loop if they meet specific criteria.

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

for (const number of numbers) {
    if (number === 3) continue; // skip 3
    console.log(number);
}

Is for…of loop faster than forEach?

In most cases, for…of is comparable in performance with forEach, but for…of allows for break and continue statements, which can provide more control over the iteration process.

Can I use for…of with a Set or Map?

Yes, you can use for…of to iterate over the values of a Set or the entries of a Map.