Skip to main content

JavaScript Objects

JavaScript Object keys and values

Written by Published

Object.keys, Object.values and Object.entries turn an object into arrays you can loop over.

Objects do not have array methods of their own.

These three functions bridge the gap, so you can use map, filter and the rest.

Example

Example

javascript

const person = { name: "Ada", age: 36 };

console.log(Object.keys(person).join(","));
console.log(Object.values(person).join(","));

The output is name,age then Ada,36.

The Three Methods

Object.keys returns an array of the property names.

Object.values returns an array of the values.

Object.entries returns an array of [key, value] pairs.

Syntax

Syntax

javascript

Object.keys(object);
Object.values(object);
Object.entries(object);

All three take the object as an argument rather than being called on it.

Counting Properties

Objects have no length, so this is how you count them.

Example

Example

javascript

const car = { brand: "Toyota", year: 2021, colour: "red" };

console.log(Object.keys(car).length);

The output is 3.

Looping with entries

Each entry is a pair you can unpack with destructuring.

Example

Example

javascript

const scores = { maths: 30, art: 35 };

for (const [subject, score] of Object.entries(scores)) {
  console.log(subject + ": " + score);
}

This is usually clearer than a for in loop.

Adding Up Values

Once you have an array, every array method is available.

Example

Example

javascript

const scores = { maths: 30, science: 25, art: 35 };

console.log(Object.values(scores).reduce((sum, n) => sum + n, 0));

The output is 90.

Filtering an Object

Convert to entries, filter, then convert back with Object.fromEntries.

Example

Example

javascript

const scores = { maths: 30, science: 25, art: 35 };

const high = Object.fromEntries(
  Object.entries(scores).filter(([key, value]) => value > 28)
);

console.log(Object.keys(high).join(","));

The output is maths,art.

Only Own Properties

These methods only list the object's own properties.

Inherited ones are ignored, which is usually what you want.

Example

Example

javascript

const base = { shared: true };
const child = Object.create(base);
child.own = 1;

console.log(Object.keys(child).join(","));

Only own is listed, not shared.

Complete Example

Complete Example

html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Object keys and values</title>
</head>
<body>

  <h1>JavaScript Object keys and values</h1>

  <p id="result"></p>

  <script>
    const scores = { maths: 30, science: 25, art: 35 };
    let output = "";

    for (const [subject, score] of Object.entries(scores)) {
      output += subject + ": " + score + "<br>";
    }

    document.getElementById("result").innerHTML = output;
  </script>

</body>
</html>

Try It Yourself

Run the above example in the Try It Editor.

Try adding a total:

Use Object.values(scores) with reduce to show the total.

Important Points

  • Object.keys gives an array of property names.
  • Object.values gives an array of values.
  • Object.entries gives [key, value] pairs.
  • Use Object.keys(obj).length to count properties.
  • Object.fromEntries turns pairs back into an object.

Conclusion

These three functions let you use array methods on objects.

entries with destructuring is the clearest way to loop over one.

Together with fromEntries they let you filter and reshape objects.