JavaScript Object Iteration Methods: Keys, Values, and Entries

Introduction

Ever felt like you’re writing too much code just to loop through JavaScript objects? I know I have! When I first started with JavaScript, I’d always reach for the trusty for...in loop, carefully adding those hasOwnProperty checks every single time. It worked, but it wasn’t exactly elegant.

Then came ES2017 (ES8), and JavaScript gifted us with three fantastic methods that changed how we work with objects: Object.keys(), Object.values(), and Object.entries(). These methods are like the Swiss Army knives for object manipulation, simple, powerful, and incredibly useful in day-to-day coding.

In this article, I’ll walk you through each of these methods. We’ll see how they work, when to use them, and how they can make your code cleaner and more intuitive. By the end, you’ll have a solid understanding of which method to reach for depending on what you’re trying to accomplish with your objects.

Object.keys() - Getting Property Names

Object.keys() returns an array containing all the enumerable property names of a given object.

Syntax

Object.keys(object);

Example Usage

const user = {
  name: 'John',
  age: 30,
  occupation: 'Developer',
};

const propertyNames = Object.keys(user);
console.log(propertyNames);
// Output: ['name', 'age', 'occupation']

// Iterating over keys
Object.keys(user).forEach((key) => {
  console.log(`Property name: ${key}`);
});
// Output:
// Property name: name
// Property name: age
// Property name: occupation

Object.values() - Getting Property Values

Object.values() returns an array containing all the enumerable property values of a given object.

Syntax

Object.values(object);

Example Usage

const user = {
  name: 'John',
  age: 30,
  occupation: 'Developer',
};

const propertyValues = Object.values(user);
console.log(propertyValues);
// Output: ['John', 30, 'Developer']

// Iterating over values
Object.values(user).forEach((value) => {
  console.log(`Property value: ${value}`);
});
// Output:
// Property value: John
// Property value: 30
// Property value: Developer

Object.entries() - Getting Key-Value Pairs

Object.entries() returns an array containing arrays of key-value pairs from the object’s enumerable properties.

Syntax

Object.entries(object);

Example Usage

const user = {
  name: 'John',
  age: 30,
  occupation: 'Developer',
};

const entries = Object.entries(user);
console.log(entries);
// Output: [['name', 'John'], ['age', 30], ['occupation', 'Developer']]

// Using destructuring to access key-value pairs
for (const [key, value] of Object.entries(user)) {
  console.log(`${key}: ${value}`);
}
// Output:
// name: John
// age: 30
// occupation: Developer

Comparison with for…in Loop

All three methods provide alternatives to the traditional for...in loop, but with some important differences:

const user = {
  name: 'John',
  age: 30,
  occupation: 'Developer',
};

// Traditional for...in loop
for (const key in user) {
  if (Object.hasOwnProperty.call(user, key)) {
    console.log(`${key}: ${user[key]}`);
  }
}

The advantages of using the Object methods include:

1. They only return own enumerable properties (not inherited ones)
2. They return properties in a consistent, array-based format
3. They allow for direct use of array methods like map, filter, and reduce
4. No need for hasOwnProperty checks

Practical Use Cases

Transforming Objects

const prices = {
  banana: 1,
  apple: 2,
  orange: 3,
};

// Double all prices
const doublePrices = Object.entries(prices).reduce((result, [fruit, price]) => {
  result[fruit] = price * 2;
  return result;
}, {});

console.log(doublePrices);
// Output: { banana: 2, apple: 4, orange: 6 }

Object Filtering

const person = {
  name: 'Alice',
  age: 25,
  country: 'USA',
  occupation: 'Engineer',
};

// Filter object to only include string values
const stringProps = Object.entries(person)
  .filter(([_, value]) => typeof value === 'string')
  .reduce((obj, [key, value]) => {
    obj[key] = value;
    return obj;
  }, {});

console.log(stringProps);
// Output: { name: 'Alice', country: 'USA', occupation: 'Engineer' }

Converting to Map

const userDetails = {
  id: 1,
  username: 'johndoe',
  email: 'john@example.com',
};

// Convert object to Map
const userMap = new Map(Object.entries(userDetails));

console.log(userMap.get('username')); // 'johndoe'

Browser Compatibility

These methods are well-supported in modern browsers and Node.js:

• Object.keys(): ES5 (2009) - Supported in all modern browsers, IE9+
• Object.values(): ES2017 (ES8) - Supported in modern browsers, not in IE
• Object.entries(): ES2017 (ES8) - Supported in modern browsers, not in IE

For older browsers, you may need polyfills or transpilation.

Summary

So there you have it! JavaScript’s object iteration methods have completely changed how I approach object manipulation in my code. Here’s a quick cheat sheet I keep in mind when working with objects:

What I love most about these methods is how they let me leverage all the powerful array methods that JavaScript offers. No more clunky loops with extra checks, just clean, functional code that’s easier to read and maintain.

The next time you find yourself writing a for...in loop with hasOwnProperty checks, remember these alternatives! Your future self (and your team members) will thank you for writing more concise, readable, and modern JavaScript code.

Have you found creative ways to use these object methods in your projects? I’m always curious to hear how other developers are leveraging these powerful tools!