Object.keys, values & entries

Turn an object into lists

An object is good when you know the name you want. You write user.name to read a name. You write cart.total = 10 to change a total.

Some jobs ask a different question. They need all of an object's properties at once. A property is one named value inside an object. Its name is called the key. Here are some jobs like that:

• How many properties does this object have?
• What are all the prices in it?
• Can I rename every key and make a new object?

Three built-in tools help: Object.keys, Object.values, and Object.entries. Each one turns an object into an array, an ordered list. With an array, you can loop with for…of and count with .length. You can also use .map and .filter, two array tools you'll meet briefly in this lesson.

In the for…of & for…in lesson, you saw that for…in also visits keys that an object borrows from a parent object. The tools in this lesson skip those borrowed keys. Most of the time, that is what you want when you change data.

Start with a small object. Ask it three questions:

• What are its property names?
• What values does it hold?
• Which value goes with which name?

const user = { name: "Ada", role: "admin" };
console.log(Object.keys(user));
console.log(Object.values(user));
console.log(Object.entries(user));

1. Line 1 makes a user object with two properties: name and role.
2. Line 2 prints the names: ["name", "role"].
3. Line 3 prints the values: ["Ada", "admin"].
4. Line 4 prints the pairs: [["name", "Ada"], ["role", "admin"]]. Each pair is a small array. The name comes first and the value second.

Each call makes a new array. If you change the object later, the array does not change with it.

These methods don't list every property. They list a property only when all three of these are true:

• It is own: it is stored on this object itself. A property the object borrows from a parent object is not own. (In JavaScript, that parent object is called the prototype.)
• It is enumerable: a hidden yes-or-no setting on the property says "show me in lists".
• It has a string key: its name is text. A key can also be a symbol, a special kind of key that is not text. The Symbols lesson comes next.

The step-through below builds an object with all four kinds of property. Then it lists them. The code uses three tools you may not know yet:

• Symbol("secret") makes a new symbol to use as a key.
• Object.create(parent) makes a new, empty object that borrows from parent.
• Object.defineProperty adds a property with its settings. Here it sets enumerable: false.

1const secret = Symbol("secret");Run2const cabinet = Object.create({ inherited: "from prototype" });3cabinet.name = "Ada";4cabinet.role = "developer";5// no whole-number 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));

Now pick "Add key 2" in the step-through. Line 5 then adds a property whose key is "2". Keys like this, that look like whole numbers, have a special order rule:

• Keys that look like whole numbers come first, from smallest to largest.
• All other string keys come next, in the order you added them.

These methods only look at the first level. Sometimes a value is another object. Then Object.values gives you that whole inner object. It does not look inside it.

const user = { profile: { city: "Pune" }, active: true };
console.log(Object.values(user));

Line 1 makes a user with two properties. The profile property holds another object, { city: "Pune" }. Line 2 prints [{ city: "Pune" }, true]. The inner object comes back whole. You don't get "Pune" on its own. To work with the city, first pick the level you want, for example Object.values(user.profile).

Object.entries turns an object into pairs. Object.fromEntries does the opposite. It takes a list of pairs and builds a new object. Each pair must have two parts: the key first, then the value.

const settings = Object.fromEntries([
  ["theme", "dark"],
  ["fontSize", 16],
]);
console.log(settings);

Lines 1 to 4 pass an array of two pairs to Object.fromEntries. The first pair makes the key theme with the value "dark". The second makes fontSize with the value 16. Line 5 prints { theme: "dark", fontSize: 16 }.

What if the same key appears twice? Step through the next example and see.

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

A repeated key does not cause an error. But an object can hold only one value for each key. So the later pair replaces the earlier one. You'll use this rule again when you swap keys and values later in this lesson.

Pairs don't have to come from an array. The next example uses two tools that have their own lessons later:

• A Map is a collection of key-value pairs.
• URLSearchParams reads the part of a web address after the ?, like page=1&sort=new.

const fromArray = Object.fromEntries([["id", 42]]);
const fromMap = Object.fromEntries(new Map([["name", "Ada"]]));
const fromUrl = Object.fromEntries(new URLSearchParams("page=1&sort=new"));
console.log(fromArray);
console.log(fromMap);
console.log(fromUrl);

1. Line 1 builds an object from an array with one pair. Line 4 prints { id: 42 }.
2. Line 2 builds an object from a Map. Line 5 prints { name: "Ada" }.
3. Line 3 builds an object from the text page=1&sort=new. Line 6 prints { page: "1", sort: "new" }.

Object.fromEntries works with anything that gives it pairs, one after another.

Arrays have a .map method. Objects don't: there is no obj.map(...). So to change every property of an object, you make a round trip in three steps:

1. Turn the object into pairs with Object.entries.
2. Change the pairs with array tools.
3. Build a new object from the changed pairs with Object.fromEntries.

Two array tools do the changing. They have a full lesson in the next module. For now, this is all you need:

• .map(fn) makes a new array. It calls fn on each item and keeps what fn gives back.
• .filter(fn) makes a new array with only the items where fn gives back true.

Here each item is a [key, value] pair. Writing ([item, price]) => gives the two parts of the pair their own names, item and price. This is called destructuring, and it has its own lesson later.

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);

The code takes 20% off every price, then keeps only prices of 20 or less:

1. Line 1 makes a prices object with three items.
2. Line 3 turns it into pairs, like ["notebook", 12].
3. Line 4 makes a new pair for each old pair: the same item name, and the price times 0.8.
4. Line 5 keeps only the pairs whose new price is 20 or less.
5. Line 2 builds the new object from the pairs that are left, and line 7 prints it.

Move the sliders and watch each step change. The prices object itself never changes.

Where you will use this

You'll make this round trip whenever an object needs a small change before you show it, save it, or send it somewhere.

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);

1. Line 1 makes a user with the keys first_name and last_name.
2. Line 3 turns it into pairs. ([key, value]) names the two parts of each pair.
3. Line 4 makes the new key. key.replace("_", "") removes the first underscore.
4. Line 5 makes the new value. value.toUpperCase() turns the text into capital letters.
5. Line 8 prints { firstname: "ADA", lastname: "LOVELACE" }.

Pick, omit, and swap

The next three functions all follow the same round trip. Each one uses keys.includes(key), which gives true when the array keys contains key.

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 (lines 1–5) keeps only the keys you list. Use it to keep safe fields, like a name and an email.
• omit (lines 7–11) removes the keys you list. The ! on line 9 means "not", so it keeps every key that is not in the list.
• invert (lines 13–17) swaps each key and value, so values become keys. This is useful for looking things up the other way. But if two keys share a value, the later one replaces the earlier one.

Prepare form data for display

const form = { name: "Asha", email: "asha@example.com", subscribed: true };
const labels = Object.fromEntries(
  Object.entries(form).map(([key, value]) => [key, String(value)])
);
console.log(Object.keys(form));
console.log(labels);

A form often stores text, numbers, and true or false. A simple list on a page needs only text.

1. Line 1 makes a form object. Its subscribed value is true, not text.
2. Line 3 keeps each key and turns each value into text with String(value).
3. Line 5 prints the field names: ["name", "email", "subscribed"].
4. Line 6 prints the new object. Every value is now text, so subscribed is "true".

Changing the shape of data does not keep it safe. In a real app, choose which fields are allowed before you show them on a page or send them to a server. The next example does that.

const profile = { name: "Asha", email: "asha@example.com", password: "secret" };
const publicProfile = Object.fromEntries(
  Object.entries(profile).filter(([key]) => ["name", "email"].includes(key))
);
console.log(publicProfile);

Line 3 keeps a pair only if its key is "name" or "email". So the password never gets into publicProfile. Line 5 prints { name: "Asha", email: "asha@example.com" }.

A list of allowed fields is safer than removing one field you know about. If someone adds a new secret field later, it stays out.

Count, check for empty, and add up 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);

1. Line 1 makes a scores object with three scores.
2. Line 2 counts the keys and prints 3.
3. Line 3 adds up the values and prints 26. .reduce walks through the array and keeps a running total, starting from 0. A for…of loop over the values would work just as well.
4. Line 4 checks whether an empty object {} has no keys, and prints true.

So Object.keys(obj).length === 0 is the usual way to check that a plain object is empty.

Each row is one tool. Read across to see which keys it looks at, what it gives back, and when to use it.

To choose, ask one question: do you need the names, the values, or both together?

Common misconceptions

The first exercises ask what a short program prints. The later ones ask you to write a small function. Guess first, then use the hints if you get stuck.

const pet = { name: "Miso", kind: "cat", age: 4 };
console.log(Object.keys(pet).length);

const prices = { apple: 2, bread: 3 };
const doubled = Object.fromEntries(
  Object.entries(prices).map(([item, price]) => [item, price * 2])
);
console.log(doubled);

const prices = { apple: 2, bread: 3 };
const doubled = Object.fromEntries(
  Object.entries(prices).map(([item, price]) => [item, price * 2])
);
console.log(doubled);

function pick(obj, keys) {
  // return a new object with only the listed keys
}

const user = { id: 1, name: "Ada", admin: true };
console.log(pick(user, ["id", "name"]));

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

const cart = {};
console.log(Object.keys(cart).length === 0);

const codes = { draft: "D", published: "P", archived: "D" };
console.log(Object.fromEntries(
  Object.entries(codes).map(([key, value]) => [value, key])
));

For each question, first ask: does it want the names, the values, or the pairs? Pick an answer, then read the explanation for every choice.

Key takeaways

• Object.keys(obj) gives an array of the object's own, enumerable, string keys.
• Object.values(obj) gives the values of those same keys, in the same order.
• Object.entries(obj) gives [key, value] pairs. Pairs are the easiest shape to change.
• Object.fromEntries(pairs) builds a new object. If a key repeats, the last value wins.
• To change an object, make the round trip: Object.entries, then .map or .filter, then Object.fromEntries.

Up next: Symbols, the special keys that these three methods skip.