Object.values() Method
This week I'm tackling Object.values()
, which is fairly straightforward. When you run Object.values()
against a data object, the method returns an array of the object's property values.
const person = {
name: "Joey",
age: 31,
occupation: "Web Developer",
location: "Austin, Texas",
hungry: true,
};
const attributes = Object.values(person);
console.log(attributes);
// expected output:
// ["Joey", 31, "Web Developer", "Austin, Texas", true]
The Object.values()
method gives us a way to unpack the contents of a box in an orderly fashion.
The above code produces the same result as this for...in loop
:
const attributesArray = [];
for (const attribute in person) {
attributesArray.push(person[attribute]);
};
console.log(attributesArray);
// expected output:
// ["Joey", 31, "Web Developer", "Austin, Texas", true]
One little gotcha to be aware of is that if the keys are numeric, Object.values()
will output the items in the numeric order of the keys.
const obj = {
5: "Giraffe",
70: "Octopus",
17: "Lion",
1: "Armadillo",
0: "Puffin",
};
const objValues = Object.values(obj);
console.log(objValues);
// expected output:
// ["Puffin", "Armadillo", "Giraffe", "Lion", "Octopus"]
Lastly, if you run Object.values()
against a simple array, all you get is a copy of the array:
const colors = ["red", "orange", "yellow", "green", "blue", "violet"];
const objValues = Object.values(colors);
console.log(objValues);
// expected output:
// ["red", "orange", "yellow", "green", "blue", "violet"]
From MDN: The Object.values()
method returns an array of a given object's own enumerable property values, in the same order as that provided by a for...in loop
(the difference being that a for...in loop
enumerates properties in the prototype chain as well).
See more examples and documentation here.