JavaScript Objects
Object.keys,Object.valuesandObject.entriesturn 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
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.
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
javascript
Object.keys(object);
Object.values(object);
Object.entries(object);All three take the object as an argument rather than being called on it.
Objects have no length, so this is how you count them.
Example
javascript
const car = { brand: "Toyota", year: 2021, colour: "red" };
console.log(Object.keys(car).length);The output is 3.
Each entry is a pair you can unpack with destructuring.
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.
Once you have an array, every array method is available.
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.
Convert to entries, filter, then convert back with Object.fromEntries.
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.
These methods only list the object's own properties.
Inherited ones are ignored, which is usually what you want.
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
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>Run the above example in the Try It Editor.
Try adding a total:
Use Object.values(scores) with reduce to show the total.
Object.keys gives an array of property names.Object.values gives an array of values.Object.entries gives [key, value] pairs.Object.keys(obj).length to count properties.Object.fromEntries turns pairs back into an object.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.