# How to use for...in loop in JavaScript

By Atta Ur Rehman Shah (https://attacomsian.com/about). Published Sep 14, 2019, updated Oct 9, 2022. Topics: JavaScript.
Canonical URL: https://attacomsian.com/blog/for-in-loop-in-javascript

> Learn how the for...in statement works JavaScript and how you can use it to iterate through objects, arrays, maps, sets, strings, and more.

The `for...in` loop iterates through the properties of an object in JavaScript. The loop iterates over all enumerable properties of the object itself and those inherited from its prototype chain.

## How `for...in` works?

```javascript
for (const key in object) {
    // do something
}
```

The `key` is the variable name assigned a different property name on each iteration. The `object` is the actual iterable (object literals, array, strings) you are looping over. The block of code inside the loop is executed once for each property.

You can use the `key` to obtain the property value from the object.

Here is an example:

```javascript
const user = {
  name: 'John Doe',
  email: 'john.doe@example.com',
  age: 25,
  admin: false
}

for (const key in user) {
  console.log(key) // property name
  console.log(user[key]) // property value
}
```

## `for...in` loop examples

Let us have some more examples. The following `for...in` loop iterates through the properties of an object literal and logs a string of the property names and their values:

```javascript
const animals = {
  tiger: '?',
  cat: '?',
  monkey: '?',
  horse: '?',
  elephant: '?'
}

for (const key in animals) {
  console.log(`${key} --> ${animals[key]}`)
}

// tiger --> ?
// cat --> ?
// monkey --> ?
// horse --> ?
// elephant --> ?
```

You can also use `for...in` to loop through an array or a string by using their index values:

```javascript
const str = 'JavaScript Loops'

for (const index in str) {
  console.log(`${str[index]} is at ${index} index.`)
}

// J is at 0 index.
// a is at 1 index.
// v is at 2 index.
// a is at 3 index.
// ...
```

> According to [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in#Array_iteration_and_for...in), the `for...in` loop should not be used to iterate over an array where the index order is important. This loop **does not guarantee** to return the indexes in the original order. Instead, you should use a simple **for loop** with a numeric index or **for...of loop** when iterating over arrays where the order of access is important.

## `for...in` loop and prototypes

Objects in JavaScript can have properties [inherited](https://attacomsian.com/blog/javascript-own-inherited-properties) from [object prototypes](https://attacomsian.com/blog/objects-prototypes-classes-javascript#prototypes). 

For example, objects created using `Array` and `Object` constructors inherit many properties from `Object.prototype` and `String.prototype`. The `for...in` statement iterates over [own properties](https://attacomsian.com/blog/javascript-object-get-all-own-properties) of the object itself and those the object inherits from its constructor's prototype.

Let us have an example to understand this inheritance:

```javascript
function Animal(name, icon) {
  this.name = name
  this.icon = icon
}

const cat = new Animal('Cat', '?')

Animal.prototype.color = 'White'

for (const prop in cat) {
  console.log(`Aminal ${prop} is ${cat[prop]}.`)
}

// Aminal name is Cat.
// Aminal icon is ?.
// Aminal color is White.
```

The `color` of the animal is part of the prototype and not the actual object `cat` but is returned anyways. If you are only interested in properties that are attached to the object itself and not its prototypes, use the `hasOwnProperty()` method to ensure that the key is a property of the actual object:

```javascript
for (const prop in cat) {
  if (cat.hasOwnProperty(prop)) {
    console.log(`Aminal ${prop} is ${cat[prop]}.`)
  }
}
```

> It is better to always perform the `hasOwnProperty()` check in a `for...in` loop unless you *explicitly* want to iterate through properties inherited from object prototypes.

## Browser compatibility

The `for...in` loop works perfectly in all modern browsers, including Internet Explorer 6 and higher.