ES6++: 3- For Of

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

• useFetcher: easiest way to fetch data in React Js

Courses (Articles)

• Node Js 2023 Course: Node With Typescript, The Ultimate Guide
• React Js: Let"s Create File Manager With React Js and Node Js

Comments

[Valentin PARSY]

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

[Hasan Zohdy]

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.