How to Iterate Over a JavaScript Object

Suppose you have a simple JavaScript object:

const obj = { name : 'Luke Skywalker' , title : 'Jedi Knight' , age : 23 };

How do you iterate over the key/value pairs and print out "name: Luke Skywalker", "title: Jedi Knight", and "age: 23"? There are a lot of ways to do this in modern JavaScript. Here's 3 different ways:

The Object.entries() function returns an arrau coontaining the object's key/value pairs. Here's how you would print out the key/value pairs using Object.entries() and a for/of loop.

const obj = { name : 'Luke Skywalker' , title : 'Jedi Knight' , age : 23 }; for ( const [key, value] of Object .entries(obj)) { console .log( ` ${key} : ${value} ` ); }

In JavaScript, an entry is an array with exactly 2 elements, where the first element is the key and the second element is the value . The entry pattern shows up in several other places in JavaScript, like the Map constructor and Object.fromEntries() .

If you convert the iterator that Object.entries() returns into an array using Array.from() , you'll get an array containing the object's key/value pairs.

const obj = { name : 'Luke Skywalker' , title : 'Jedi Knight' , age : 23 }; const keyValuePairs = Object .entries(obj); keyValuePairs[ 0 ]; keyValuePairs[ 1 ]; keyValuePairs[ 2 ];

The Object.keys() function returns an array of the object's keys, as opposed to both the keys and the values. You can then use square brackets [] to get the object's values.

const obj = { name : 'Luke Skywalker' , title : 'Jedi Knight' , age : 23 }; for ( const key of Object .keys(obj)) { console .log( ` ${key} : ${obj[key]} ` ); }

Why use Object.keys() versus Object.entries() ? Because you can't change the value in an entry to change the value in the object.

const obj = { name : 'Luke Skywalker' , title : 'Jedi Knight' , age : 23 }; for ( let [key, value] of Object .entries(obj)) { if (key === 'title' ) { value = 'Jedi Master' ; } } obj.title; for ( const key of Object .keys(obj)) { if (key === 'title' ) { obj[key] = 'Jedi Master' ; } }

The Object.keys() and Object.entries() functions only loop over an object's own properties. For a POJO, this distinction doesn't matter. But when you use inheritance, this distinction can be important.

Using a for/in loop lets you iterate over all an object's keys, including inherited keys.

function JediKnight ( name, age ) { this .name = name; this .age = age; } JediKnight.prototype.title = 'Jedi Knight' ; const obj = new JediKnight( 'Luke Skywalker' , 23 ); const entries = Object .entries(obj); entries; for ( const key in obj) { console .log( ` ${key} : ${obj[key]} ` ); }

Generally speaking, you should use Object.keys() or Object.entries() with POJOs to avoid accidentally picking up inheritted properties. But you can use for/in if you're sure you want to loop over inheritted properties.

More Fundamentals Tutorials