Object.keys(), Object.values(), and Object.entries() Explained

Objects are one of the most common data structures in JavaScript, but they are not iterable in the same simple way arrays are. That is why developers so often reach for helper methods when they need to loop, transform, or inspect object data.

Object.keys(), Object.values(), and Object.entries() are three of the most useful helpers for that job, and also three that beginners tend to blur together at first.

The difference becomes simple once you state it clearly:

• Object.keys() returns property names
• Object.values() returns property values
• Object.entries() returns key‑value pairs

That is the whole family in one line.

Object.keys() returns the object's own keys

Given an object like this:

const user = {  name: 'Sophie',  role: 'Editor',  active: true,};

Object.keys(user) returns:

['name', 'role', 'active']

This is useful when you want to:

• loop over property names
• count how many own properties an object has
• build logic around which keys exist

It is especially handy because it gives you a real array, which means array methods such as map, filter, and forEach become available immediately.

Object.values() returns the values

Using the same object:

Object.values(user);

returns:

['Sophie', 'Editor', true]

This is useful when the keys themselves do not matter and you only care about the content.

For example:

• checking whether any value is empty
• rendering a list of values
• running aggregate logic over a simple object map

Object.values() is often the neatest way to treat an object's data as a simple collection without manually pulling values out one by one.

Object.entries() returns pairs

Object.entries() gives you the most structured output:

Object.entries(user);

returns:

[  ['name', 'Sophie'],  ['role', 'Editor'],  ['active', true],]

This is especially useful when you need both sides at once.

For example:

for (const [key, value] of Object.entries(user)) {  console.log(key, value);}

That is usually much cleaner than looping over keys and then indexing back into the object every time.

Why These Helpers are so Useful

Without them, developers often fall back to more awkward patterns.

For example, using for...in and then reaching back into the object manually:

for (const key in user) {  console.log(key, user[key as keyof typeof user]);}

That can work, but the Object.* helpers often communicate intent more clearly because they make the conversion to an array explicit.

Once you have an array of keys, values, or entries, you can use the rest of the array toolbox naturally.

A Practical Example with Validation

Imagine a small object of field values:

const formValues = {  email: 'hello@example.com',  postcode: '',  phone: '01234 567890',};

If you want to know whether any value is empty:

const hasEmptyField = Object.values(formValues).some((value) => {  return value.trim() === '';});

If you want to list the empty field names:

const emptyFields = Object.entries(formValues)  .filter(([, value]) => {    return value.trim() === '';  })  .map(([key]) => {    return key;  });

That is where these helpers really shine. They let you move from "object" to "data I can process clearly" with very little fuss.

Object.keys() is older than values() and entries()

This is worth noting historically because you will see it reflected in codebases.

Object.keys() has been around longer and appears everywhere. Object.values() and Object.entries() arrived later, which means older code often uses keys() plus extra mapping even in places where values() or entries() would now be clearer.

That does not make the old code wrong. It just explains why some JavaScript feels more manual than it needs to.

The Returned Arrays are Snapshots, Not Live Object Views

When you call one of these methods, you get an array representing the object's current own enumerable properties at that moment.

That array is not a magical live link back into the object.

So this:

const keys = Object.keys(user);

does not mean keys will update itself automatically if you later add or remove properties on user.

That is obvious once stated, but it helps to be explicit because these helpers are conversion tools, not ongoing object wrappers.

Objects are Still Objects After Using These Helpers

It is also worth remembering that these methods do not transform the original object. They produce arrays derived from it.

That means you can work with the results freely without mutating the original object structure unless you deliberately write changes back yourself.

Which One Should You Choose?

The easiest rule is to match the helper to what you actually need.

Use Object.keys() when you care about:

• property names
• existence checks
• labels

Use Object.values() when you care about:

• the values only
• aggregate checks over the content

Use Object.entries() when you care about:

• both names and values together
• mapping objects into arrays of paired data

That sounds simple because it is.

Wrapping up

Object.keys(), Object.values(), and Object.entries() exist to help you work with object data more comfortably by turning parts of the object into arrays. Keys gives you names, values gives you values, and entries gives you both together. Once you know which shape of array you need, choosing the right method becomes very straightforward.

Key Takeaways

• Object.keys() returns an array of property names.
• Object.values() returns an array of property values.
• Object.entries() returns an array of key‑value pairs.
• These helpers are especially useful because they let you use normal array methods on object data.
• The easiest way to choose between them is to ask whether you need names, values, or both.

These three methods make object processing much less awkward, especially once you stop trying to force plain objects to behave exactly like arrays.