Object.keys, values & entries

Objects become easier when they can become lists

Objects are excellent when you know the property name you want: read user.name, update cart.total, call account.save(). But many data tasks ask a different question: what are all the properties? How many are there? What are all the prices? Can we rename every field and make a new object?

That is where Object.keys, Object.values, and Object.entries come in. They turn an object into arrays. Once your data is an array, you can loop with for…of, count with .length, and, with a tiny preview of next module, transform with .map and .filter.

The previous for…of & for…in lesson introduced looping and mentioned that for…in includes inherited keys. This lesson gives you the safer everyday object tools: they ignore inherited keys, which is usually exactly what you want when transforming data.

Start with a small object and ask three questions. What are its property names? What values are stored there? What pairs keep each name next to its value?

const user = { name: "Ada", role: "admin" };

Object.keys(user);    // ["name", "role"]
Object.values(user);  // ["Ada", "admin"]
Object.entries(user); // [["name", "Ada"], ["role", "admin"]]

The three methods do not mean “every possible property.” They mean: own, enumerable, string-keyed properties. Own means directly on this object, not inherited. Enumerable means intended to show up in ordinary listings. String keyed means symbol keys are skipped. The Symbols lesson comes next; this is your first tease.

1const secret = Symbol("secret");Run2const cabinet = Object.create({ inherited: "from prototype" });3cabinet.name = "Ada";4cabinet.role = "developer";5// no integer-like key yet6cabinet[secret] = "hidden";7Object.defineProperty(cabinet, "quiet", {8  value: "non-enumerable",9  enumerable: false,10});11console.log(Object.keys(cabinet));12console.log(Object.values(cabinet));13console.log(Object.entries(cabinet));

Turn on the numeric key in the player. You will see a professional edge case: integer-like property names, such as "2", list before other string keys. After those integer-like names, ordinary string keys keep insertion order.

If Object.entries is packing an object into labeled boxes, Object.fromEntries is unpacking the boxes into a new cabinet. The input must produce two-item pairs: key first, value second.

1const pairs = [Run2  ["admin", "Ada"],3  ["editor", "Lin"],4  ["admin", "Grace"],5];6const lookup = Object.fromEntries(pairs);7console.log(lookup);

Duplicate keys are not an error. Objects can hold only one value for a key, so the later pair wins. That rule matters when you build lookup objects and when you invert objects later in this lesson.

Object.fromEntries([["theme", "dark"], ["font", "large"]]);
Object.fromEntries(new Map([["id", 42], ["name", "Ada"]]));
Object.fromEntries(new URLSearchParams("page=1&sort=new"));

The second and third lines are teasers. Map & Set and URL & URLSearchParams have their own lessons later. The important idea now: Object.fromEntries is happy with anything that yields pairs.

Objects do not have an obj.map(...) method. Arrays do. So the pattern is a round trip: unpack → change → repack.

1const prices = { notebook: 12, pencil: 2, backpack: 45 };2const discounted = Object.fromEntries(3  Object.entries(prices)4    .map(([item, price]) => [item, price * 0.8])5    .filter(([item, price]) => price <= 20)6);7console.log(discounted);

This playground previews map and filter before their full array-methods lesson next module. Here is all you need: map makes one changed item for every old item, while filter keeps only items that pass a test. With entries, the “item” is a [key, value] pair.

Where you will use this

The round trip shows up anywhere object-shaped data needs a small rewrite before display, saving, or sending elsewhere.

Rename keys and change values together

const user = { first_name: "Ada", last_name: "Lovelace" };
const renamed = Object.fromEntries(
  Object.entries(user).map(([key, value]) => [
    key.replace("_", ""),
    value.toUpperCase(),
  ])
);
console.log(renamed);

Gentle destructuring appears in the callback: ([key, value]) names the two items in each entry pair. The Destructuring lesson later gives this syntax a full tour.

Pick, omit, and invert

function pick(obj, keys) {
  return Object.fromEntries(
    Object.entries(obj).filter(([key]) => keys.includes(key))
  );
}

function omit(obj, keys) {
  return Object.fromEntries(
    Object.entries(obj).filter(([key]) => !keys.includes(key))
  );
}

function invert(obj) {
  return Object.fromEntries(
    Object.entries(obj).map(([key, value]) => [value, key])
  );
}

pick keeps allowed fields, such as safe profile data. omit removes fields, such as a password before display. invert builds reverse lookups, but duplicate values overwrite because object keys must be unique.

Count, check empty, and sum values

const scores = { Ada: 9, Lin: 7, Grace: 10 };
console.log(Object.keys(scores).length);
console.log(Object.values(scores).reduce((sum, score) => sum + score, 0));
console.log(Object.keys({}).length === 0);

Object.keys(obj).length is the common empty-object check for ordinary data objects: Object.keys(obj).length === 0. For sums, Object.values(scores) gives you the numbers. The code above uses reduce lightly; a for…of loop over the values would be just as clear at this stage.

Use this quick test: do you need labels, contents, or labels and contents together?

Common misconceptions

Answer once from your prediction, then read every explanation.

Key takeaways

• Object.keys(obj) returns own enumerable string keys.
• Object.values(obj) returns the values at those same keys, in the same order.
• Object.entries(obj) returns [key, value] pairs, the best shape for transformation.
• Object.fromEntries(pairs) rebuilds a new object; duplicate keys keep the last value.
• For object transformations, use the round trip: entries → map/filter → fromEntries.

Up next: Symbols.