Understanding for...in vs for...of statements in Javascript
Tags: javascript, interview
Published: 2021-06-22 04:54:08

---
title: Understanding for...in vs for...of statements in Javascript
published: true
description: 
tags: #javascript #interview 
cover_image: https://images.unsplash.com/photo-1512187849-463fdb898f21?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1189&q=80
---

## Overview
- Differences
  1. Definition
  2. Syntax
  3. When to use for...in or for...of?
  4. Examples
- Further Reading


## Differences
### 1. Definition
#### for...in:
The `for...in` loop statement iterates over the enumerable properties of an object including the inherited enumerable properties in an arbitrary order except the keys that are of type `Symbol`.
*`Enumerable properties` are those properties whose internal `enumerable` flag is set to true.*
*The following properties a,b,c are enumerable by default:*
```javascript
const obj1 = {a:1, b:2};
obj1.c = 3;
```
*The property defined using Object.defineProperty by default are not enumerable:*
```javascript
const obj2 = {};
Object.defineProperty(obj2, 'a', {
  value: 42
});
```
#### for...of:
The `for...of` loop statement iterates over the values that the iterable object defines to be iterated over like `Array`, `String`. etc.
*Some built in types such as `Array` and `Map` have a default iteration behaviour while `Object` does not.*


### 2. Syntax
#### for...in:
```javascript
for (variable in object) {
  statement
}
```
#### for...of:
```javascript
for (variable in iterable) {
  statement
}
```


### 3. When to use for...in or for...of?
#### for...in:
* `for...in` can used in scenarios where you want to iterate over properties of an Object to check the keys and their corresponding values.
* Since `for...in` loop statement iterates over enumerable properties of an object in an **arbitrary** order it is not recommended to use `for..in` with an Array where index order is important. It is because there is no guarantee that `for...in` will return indexes in any particular order.
* If you want to loop over values of an array consider using `for` with numeric index, `Array.prototype.forEach`, `for...of`.
 
#### for...of:
* To be used to iterate over iterable objects.
* `for...of` can be iterated over `String`, `Array`, `TypedArray`, `Map`, `Set`, arguments object of a function, `DOM Collection`, `generators`, other iterable objects.

### 2. Example
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5kxzsh6yk1ffpgjki9td.png)
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bdu4pijs1lmyzzq1vxtt.png)
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mn0adglb15mu3cacdfm9.png) 


## Further Reading:
Following are the list of resources for further deep exploration: 
 
S.No | Link
--- | ---
1 | [for...in [MDN Docs]](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in)
2 | [for...of [MDN Docs]](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of)
3 | [What is the difference between ( for… in ) and ( for… of ) statements? [Stackoverflow]](https://stackoverflow.com/questions/29285897/what-is-the-difference-between-for-in-and-for-of-statements)