# How to iterate over object keys and values in JavaScript

By Atta Ur Rehman Shah (https://attacomsian.com/about). Published Feb 20, 2020, updated Nov 12, 2022. Topics: JavaScript.
Canonical URL: https://attacomsian.com/blog/javascript-iterate-objects

> Learn how to use the for...in statement, Object.keys(), Object.values(), and Object.entries() methods to iterate over object properties in JavaScript.

There are 4 ways to iterate over an [object](https://attacomsian.com/blog/objects-prototypes-classes-javascript#objects) keys and values in JavaScript:

1. The `for...in` loop is used for iterating over keys of objects, arrays, and strings.
2. The `Object.keys()` method returns an array of object keys.
3. The `Object.values()` method returns the values of all properties in the object as an array.
4. The `Object.entries()` method returns an array of the object's key-value pairs.

The `Object.keys()` method was added in ES6, whereas, `Object.entries()` and `Object.values()` methods were added in ES8. These methods convert the object into an array and then use [array looping methods](https://attacomsian.com/blog/javascript-loops) to iterate over that array.

## Iterate over object using `for...in`  loop

The simplest and most popular way to iterate over an object's keys and values is using the [`for...in`](https://attacomsian.com/blog/for-in-loop-in-javascript) loop:

```javascript
const birds = {
  owl: '?',
  eagle: '?',
  duck: '?',
  chicken: '?'
}

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

// owl -> ?
// eagle -> ?
// duck -> ?
// chicken -> ?
```

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

The only issue with the `for...in` loop is it iterates through the properties in the prototype chain. 

Since the JavaScript object inherits properties from its [prototype](https://attacomsian.com/blog/objects-prototypes-classes-javascript#prototypes), the `for...in` loop will iterate over those properties as well.

However, you can use the `hasOwnProperty()` method to exclude [inherited properties](https://attacomsian.com/blog/javascript-own-inherited-properties#inherited-properties):

```javascript
for (const key in birds) {
  if (birds.hasOwnProperty(key)) {
    console.log(`${key} -> ${birds[key]}`)
  }
}
```

## Iterate over object using `Object.keys()` method

The `Object.keys()` method takes an object as input and returns an array of the object's own enumerable properties names:

```javascript
const birds = {
  owl: '?',
  eagle: '?',
  duck: '?',
  chicken: '?'
}

const keys = Object.keys(birds)

console.log(keys)
// [ 'owl', 'eagle', 'duck', 'chicken' ]
```

Now we can use the [`forEach()`](https://attacomsian.com/blog/javascript-foreach) loop to iterate over the array and retrieve the value of each property:

```javascript
keys.forEach(key => {
  console.log(`${key} -> ${birds[key]}`)
})

// owl -> ?
// eagle -> ?
// duck -> ?
// chicken -> ?
```

## Iterate over object using `Object.values()` method

The [`Object.values()`](https://attacomsian.com/blog/object-entries-values-javascript#objectvalues-method) method, unlike `Object.keys()`, returns an array of the given object's own enumerable properties values:

```javascript
const birds = {
  owl: '?',
  eagle: '?',
  duck: '?',
  chicken: '?'
}

Object.values(birds).forEach(item => console.log(item))

// ?
// ?
// ?
// ?
```

## Iterate over object using `Object.entries()` method

The [`Object.entries()`](https://attacomsian.com/blog/object-entries-values-javascript#objectentries-method) method returns an array of arrays, whereby each nested array has two elements. The first element is the property and the second element is the value.

```javascript
const birds = {
  owl: '?',
  eagle: '?',
  duck: '?',
  chicken: '?'
}

const entries = Object.entries(birds)
console.log(entries)

// [
//     [ 'owl', '?' ],
//     [ 'eagle', '?' ],
//     [ 'duck', '?' ],
//     [ 'chicken', '?' ]
// ]
```

To iterate over the nested array returned by `Object.entries()`, use the [`for...of`](https://attacomsian.com/blog/javascript-for-of-loop) loop or the [`forEach()`](https://attacomsian.com/blog/javascript-foreach) method as shown below:

```javascript
// => `for...of` Loop
for (const [key, value] of Object.entries(birds)) {
  console.log(`${key} -> ${value}`)
}

// => `forEach()` Loop
Object.entries(birds).forEach(([key, value]) => {
  console.log(`${key} -> ${value}`)
})
```