DEV Community

Cover image for ES6++: 3- For Of
Hasan Zohdy
Hasan Zohdy

Posted on

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);
}
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

🎨 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

Packages & Libraries

React Js Packages

Courses (Articles)

Top comments (2)

Collapse
 
parsyvalentin profile image
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

Collapse
 
hassanzohdy profile image
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.