- Home
- /
- Tutorials
- /
- JavaScript Tutorial
- /
- JavaScript Object keys and values
JavaScript Objects
JavaScript Object keys and values
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
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.keysgives an array of property names.Object.valuesgives an array of values.Object.entriesgives [key, value] pairs.- Use
Object.keys(obj).lengthto count properties. Object.fromEntriesturns 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.
