Difference between for...of and for...in loop in JavaScript.
Tags: javascript, webdev, beginners, programming
Published: 2021-11-11 07:19:59

Hello Everyone,

The difference between for-of and for-in loop really troubled me when I was learning JavaScript. And with this blog I will try to clear the confusion once and for all.

Let's understand them one by one.

## for...of Loop
[The MDN Definition](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of):

> The for...of statement creates a loop iterating over iterable objects, including: built-in String, Array, array-like objects (e.g., arguments or NodeList), TypedArray, Map, Set, and user-defined iterables.

I know that's not the explanation you came here for, So let me explain.

**for...of** loop works only with iterable objects. In JavaScript, iterables are objects which can be looped over.

String, Array, TypedArray, Map, and Set are all built-in iterables, because each of their prototype objects implements an @@iterator method. So, for...of loop works on the mentioned object types.

Object in JavaScript is not iterable by default. So, for...of loop does not work on objects.

- In simple words, for...of works with strings and arrays but not with objects.

For instance:
```js
cosnt str = "Hello World";

for(element of str) {
  console.log(element);
}
// H e l l o " " W o r l d
```

## for...in Loop
[The MDN Definition](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in)

> The for...in statement iterates over all enumerable properties of an object that are keyed by strings (ignoring ones keyed by Symbols), including inherited enumerable properties.

Explanation:

So, for...of does not work with objects (non iterables), Then how do we loop over keys and values of an object? And the answer is **for...in** loop.

**for...in** works with those properties whose enumerable flag is set to true.

- Enumerable flag for properties created via simple assignment or property initializer are by default true.
- Enumerable flag for properties created via Object.defineProperty are by default false.

For instance:
```js
const student = {
    registration: "123456",
    name: "Sandeep",
    age: 33,
}

for(key in student) {
  console.log(key, student[key]);
}
/*
registration "123465"

name "Sandeep"

age 33
*/
```

Now let's add a new property (marks) to student object and set it's enumerable flag to false. With enumerable flag set to false, marks key won't appear in result of for...in loop.

```js
const student = {
    registration: "123456",
    name: "Sandeep",
    age: 33,
}

Objec.defineProperty(student, "marks", {
  value: 98,
  enumerable: false,
})

console.log(student.marks);
// 98

for(key in student) {
  console.log(key, student[key]);
}
/*
registration "123465"

name "Sandeep"

age 33
*/

// marks key does not show up in the for...in loop result.
```

for...in also works with strings and arrays, because enumerable flag for string and array properties are also by default true.

- In simple words use for...in to loop over objects. Although for...in works with strings and arrays, but it is not suggested to use that way.

-------------------------------------------------

## Conclusion
- for...of - Use to loop over strings and arrays.
- for...in - Use to loop over objects.

-------------------------------------------------

That's it for this post.

Thank You!