Introduction
In this article we will talk about the for of
loop, we will talk about how to use it and what are the differences between it and the for in
loop.
for of
loop
The for of
loop is used to loop over arrays, this can be used instead of the standard for
loop, let's see an example
const names = ["Hasan", "Ahmed", "Ali"];
// standard for loop
for (let i = 0; i < names.length; i++) {
const name = names[i];
console.log(name);
}
// for of loop
for (const name of names) {
console.log(name);
}
See? much better and easier to read.
Loop over iterables
The for of
loop can be used to loop over any iterable, let's see an example
// loop over string
const name = "Hasan";
for (const char of name) {
console.log(char); // H a s a n
}
Also it can loop over a custom iterable, let's see an example
const iterable = {
[Symbol.iterator]() {
let i = 0;
return {
next() {
if (i < 3) {
return { value: i++, done: false };
}
return { value: undefined, done: true };
},
};
},
};
for (const num of iterable) {
console.log(num); // 0 1 2
}
We're not going to talk about iterables in this section, but the important thing here when you read in a package documentation that they have an iterable, you can use the for of
loop to loop over it.
for in
loop
You might think why i'm mentioning the for in
loop here, well because not too many people knows about it or they forget about it, so i'm going to mention it here.
The for in
loop is used to loop over objects, so we have for-of
for arrays and for-in
for objects, let's see an example
const person = {
name: "Hasan",
age: 20,
country: "Egypt"
}
for (const key in person) {
console.log(key); // name age country
}
As you can see we can loop over the keys of the object, but we can't loop over the values, so we have to do something like this
for (const key in person) {
console.log(person[key]); // Hasan 20 Egypt
}
π¨ Conclusion
In this article we talked about the for of
loop, we talked about how to use it and what are the differences between it and the for in
loop.
I hope you enjoyed this article, if you have any questions or suggestions please leave a comment below.
π Join our community
Join our community on Discord to get help and support (Node Js 2023 Channel).
π Bonus Content π
You may have a look at these articles, it will definitely boost your knowledge and productivity.
General Topics
- Event Driven Architecture: A Practical Guide in Javascript
- Best Practices For Case Styles: Camel, Pascal, Snake, and Kebab Case In Node And Javascript
- After 6 years of practicing MongoDB, Here are my thoughts on MongoDB vs MySQL
Packages & Libraries
- Collections: Your ultimate Javascript Arrays Manager
- Supportive Is: an elegant utility to check types of values in JavaScript
- Localization: An agnostic i18n package to manage localization in your project
React Js Packages
Courses (Articles)
Top comments (2)
For in iterates on the keys in an object and is present in JS since day one
For of iterates by default on the values of an object and have been introduced with the Symbol type since it uses the Symbol.iterator mechanism
Yes i didn't say its a new feature, I mentioned it so to be compared with for..of not to be mentioned as an ES6 feature.