Table of Contents
JavaScript is a versatile programming language that offers various looping mechanisms to iterate over collections of data. One such loop is the for…of loop. In this article, we will explore the for…of loop in detail and understand how it can be used to iterate over different types of data structures in JavaScript.
Introduction to JavaScript for…of Loop
The for…of loop was introduced in ECMAScript 2015 (ES6) and provides a convenient way to iterate over iterable objects in JavaScript. It is specifically designed for looping over collections such as arrays, strings, sets, maps, and other iterable objects. Unlike the traditional for loop or for…in loop, the for…of loop simplifies the iteration process by eliminating the need for manual indexing or property access.
What is the for…of Loop?
The for…of loop allows us to iterate over each element of an iterable object sequentially. It automatically retrieves the values of the iterable without requiring explicit indexing or key access. This loop is particularly useful when we want to perform an action on each item of a collection without worrying about the underlying data structure.
Syntax of the for…of Loop
The syntax of the for…of loop is as follows:
for (variable of iterable) {
// code to be executed for each iteration
}In the syntax above, variable represents a variable that will hold the value of the current element in each iteration. The iterable is an object that provides an iterator, such as an array, string, set, or map.
Iterating Arrays with the for…of Loop
Arrays are commonly used in JavaScript to store and manipulate collections of data. With the for…of loop, we can easily iterate over each element in an array.
Example: Iterating through an array using the for…of loop
const numbers = [1, 2, 3, 4, 5];
for (const number of numbers) {
console.log(number);
}
In the example above, the for…of loop iterates over each element in the numbers array and logs the value to the console. The loop automatically assigns the value of each element to the number variable.
Iterating Strings with the for…of Loop
Strings are sequences of characters, and the for…of loop can be used to iterate over each character in a string.
Example: Iterating through a string using the for…of loop
const message = "Hello, World!";
for (const char of message) {
console.log(char);
}
In the above example, the for…of loop iterates over each character in the message string and logs the character to the console. The loop automatically assigns the value of each character to the char variable.
Iterating Sets with the for…of Loop
Sets are JavaScript objects that store unique values. The for…of loop allows us to iterate over the elements of a set.
Example: Iterating through a Set using the for…of loop
const mySet = new Set([1, 2, 3]);
for (const item of mySet) {
console.log(item);
}
In the above example, the for…of loop iterates over each element in the mySet set and logs the value to the console. The loop automatically assigns the value of each element to the item variable.
Iterating Maps with the for…of Loop
Maps are key-value pairs in JavaScript, and the for…of loop can be used to iterate over the entries of a map.
Example: Iterating through a Map using the for…of loop
const myMap = new Map([
["name", "John"],
["age", 30],
["city", "New York"]
]);
for (const [key, value] of myMap) {
console.log(key, value);
}
In the above example, the for…of loop iterates over each entry in the myMap map and logs the key-value pair to the console. The loop automatically assigns the key to the key variable and the value to the value variable.
Iterating Objects with the for…of Loop
Objects in JavaScript are not iterable by default, but we can still use the for...of loop with objects by converting them into iterable forms.
Note: Objects are not iterable by default
const person = {
name: "John",
age: 30,
city: "New York"
};
for (const property of person) {
console.log(property);
}
In the above code snippet, if we try to iterate over the person object directly, we will encounter an error since objects are not iterable by default.
Example: Iterating through an object using the for…of loop with Object.entries()
However, we can convert the object into an iterable form using Object.entries() method and then use the for…of loop to iterate over it.
const person = {
name: "John",
age: 30,
city: "New York"
};
for (const [key, value] of Object.entries(person)) {
console.log(key, value);
}
In the above example, the for…of loop iterates over each entry of the object converted into an iterable using Object.entries(). The loop assigns the key to the key variable and the value to the value variable.
Breaking the Loop with the break statement
Sometimes, we might need to exit the loop prematurely based on certain conditions. The for…of loop allows us to break out of the loop using the break statement.
Example: Using the break statement with the for…of loop
const numbers = [1, 2, 3, 4, 5];
for (const number of numbers) {
if (number === 3) {
break;
}
console.log(number);
}
In the above example, the for…of loop iterates over each element in the numbers array. When the value of number becomes 3, the break statement is executed, and the loop is terminated prematurely.
Skipping an Iteration with the continue statement
There might be situations where we want to skip the current iteration and move on to the next one. The for…of loop allows us to skip an iteration using the continue statement.
Example: Using the continue statement with the for…of loop
const numbers = [1, 2, 3, 4, 5];
for (const number of numbers) {
if (number % 2 === 0) {
continue;
}
console.log(number);
}
In the above example, the for…of loop iterates over each element in the numbers array. When number is an even number (divisible by 2), the continue statement is executed, and the current iteration is skipped. As a result, only odd numbers are logged to the console.
The for…of Loop vs. the for…in Loop
It’s important to note that the for…of loop and the for…in loop are different in terms of functionality and the types of objects they can iterate over.
The for…of loop is specifically designed for iterating over iterable objects, such as arrays, strings, sets, maps, etc. It provides a simpler and more intuitive syntax for accessing the elements of an iterable.
On the other hand, the for…in loop is used to iterate over the properties of an object. It is not designed for iterating over iterable objects but rather for enumerating the keys of an object.
Conclusion
In conclusion, the for…of loop in JavaScript provides a convenient and concise way to iterate over iterable objects. Whether it’s arrays, strings, sets, maps, or objects (with proper conversion), the for…of loop simplifies the iteration process and enhances the readability of code. By understanding the syntax and examples provided in this article, you can effectively utilize the for…of loop in your JavaScript programs.
