ES6++: 3- For Of
Tags: javascript, es6, esnext
Published: 2022-11-17 04:17:56

---
title: ES6++: 3- For Of
published: true
description: 
series: es6++
tags: javascript, es6, esnext
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8w673d8qn9aksic17npo.png
# Use a ratio of 100:42 for best results.
# published_at: 2022-10-25 09:51 +0000
---

## 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

```js
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

```js
// 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

```js
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

```js

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

```js
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](https://discord.gg/pb2vmdfhGf) 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](https://dev.to/hassanzohdy/event-driven-architecture-the-best-paradigm-that-i-love-to-work-with-in-javascript-and-node-js-1gnk)
* [Best Practices For Case Styles: Camel, Pascal, Snake, and Kebab Case In Node And Javascript](https://dev.to/hassanzohdy/best-practices-for-case-styles-camel-pascal-snake-and-kebab-case-in-node-and-javascript-55oi)
* [After 6 years of practicing MongoDB, Here are my thoughts on MongoDB vs MySQL
](https://dev.to/hassanzohdy/after-6-years-of-practicing-mongodb-here-are-my-thoughts-on-mongodb-vs-mysql-574b)

Packages & Libraries

* [Collections: Your ultimate Javascript Arrays Manager](https://dev.to/hassanzohdy/collections-your-ultimate-javascript-array-handler-3o15)
* [Supportive Is: an elegant utility to check types of values in JavaScript](https://dev.to/hassanzohdy/supportive-is-an-elegant-utility-to-check-types-of-values-in-javascript-1b3e)
* [Localization: An agnostic i18n package to manage localization in your project](https://dev.to/hassanzohdy/mongez-localization-the-simplest-way-to-translate-your-website-regardless-your-favorite-framework-4gi3)

 React Js Packages

* [useFetcher: easiest way to fetch data in React Js](https://dev.to/hassanzohdy/usefetcher-the-easiest-way-to-fetch-data-in-react-45o9)

Courses (Articles)

* [Node Js 2023 Course: Node With Typescript, The Ultimate Guide](https://dev.to/hassanzohdy/nodejs-course-2023-introduction-to-nodejs-3n4e)
* [React Js: Let"s Create File Manager With React Js and Node Js](https://dev.to/hassanzohdy/lets-create-a-file-manager-from-scratch-with-react-and-typescript-chapter-i-a-good-way-to-expand-your-experience-5g4k)