Developed By
Gautam Kumar - Full stack developer
DEEP DIVE INTO
The for...of loop
in JavaScript is an iteration statement introduced in ECMAScript 6 (ES6) that simplifies the process of looping through the elements of iterable objects, such as arrays, strings, maps, sets, and more. It is designed to make iteration over collections of values easier and more intuitive. Here's a deep explanation of the for...of loop:
The for...of loop
has a straightforward syntax:
javascriptfor (const element of iterable) {
// Code to be executed for each element
}
element: A variable that represents the current element in each iteration.
iterable: An iterable object, such as an array, string, map, set, etc., from which you want to extract elements.
Let's look at an example of using a for...of loop
to iterate over an array of fruits:
javascriptconst fruits = ['apple', 'banana', 'cherry'];
for (const fruit of fruits) {
console.log(fruit);
}
In this example, the loop iterates over each element in the fruits array, and fruit represents the current element in each iteration.
Cleaner and more readable code: The syntax is simple and intuitive, making your code easier to understand.
Works with various data structures: for...of
can be used with a wide range of iterable objects, including arrays, strings, sets, maps, and custom iterables.
No need for index tracking: You don't need to keep track of array indices or iterators; the loop handles that for you.
Avoids common loop pitfalls: It eliminates off-by-one errors and simplifies code maintenance.
No access to indices: Unlike traditional for loops, for...of loops
don't provide direct access to the index of the current element. If you need the index, you might want to use a for...in loop or a combination of for...of
and Array.prototype.entries()
Cannot be used with plain objects: for...of
cannot be used directly to iterate over the properties of plain objects (non-iterable). For objects, you should use for...in to iterate over keys or use Object.values(obj) to iterate over values.
The for...of loop
is particularly useful when dealing with strings because it iterates over individual characters in the string:
javascriptconst text = 'Hello';
for (const char of text) {
console.log(char);
}
This code will output each character of the string: 'H', 'e', 'l', 'l', 'o'.
for...of
can also be used to iterate over the elements of maps and sets:
javascriptconst mySet = new Set([1, 2, 3]);
for (const element of mySet) {
console.log(element);
}
javascriptconst myMap = new Map([
['name', 'Alice'],
['age', 30]
]);
for (const [key, value] of myMap) {
console.log(key, value);
}
You can create your own iterable objects by defining an iterator function that provides the logic for iteration. This allows you to use for...of
with your custom data structures.
Example:
javascriptconst myIterable = {
[Symbol.iterator]: function* () {
yield 1;
yield 2;
yield 3;
}
};
for (const num of myIterable) {
console.log(num);
}
In summary, the for...of
loop in JavaScript is a powerful and versatile construct for iterating over the values of iterable objects, making it easier to work with arrays, strings, maps, sets, and custom iterable data structures. Its simplicity and readability make it a preferred choice for many common iteration tasks in modern JavaScript code.