The Object.values() method in JavaScript is a modern feature introduced in ECMAScript 2017 (ES8). It provides a simple way to extract the values of an object's own enumerable properties into an array. This method is incredibly useful for iterating over the data within an object without needing to access its keys.
Example 1: Basic Usage with a Simple Object
const person = {
firstName: 'John',
lastName: 'Doe',
age: 30
};
// Get an array of the object's property values.
const values = Object.values(person);
console.log(values); // Output: ['John', 'Doe', 30]
Explanation
The code above defines an object person with three key-value pairs. Object.values(person) is then used to retrieve the values of these properties, returning them as a new array ['John', 'Doe', 30].
Example 2: Object with Different Data Types
const car = {
make: 'Tesla',
model: 'Model S',
isElectric: true,
year: 2023
};
// Retrieve the values from the car object.
const carData = Object.values(car);
console.log(carData); // Output: ['Tesla', 'Model S', true, 2023]
Explanation
This example demonstrates Object.values() with an object containing various data types, including strings, a boolean, and a number. The resulting array preserves the original data type of each value.
Example 3: Handling Non-Enumerable Properties
const user = {};
// Define a non-enumerable property 'id'.
Object.defineProperty(user, 'id', {
value: 123,
enumerable: false
});
user.username = 'testuser';
// Get the values of the enumerable properties.
const userValues = Object.values(user);
console.log(userValues); // Output: ['testuser']
Explanation
Object.values() only returns the values of an object's enumerable properties. In this case, since the id property is explicitly defined as non-enumerable, it is not included in the final userValues array.
Example 4: Using with an Array-Like Object
const arrayLike = {
0: 'a',
1: 'b',
2: 'c'
};
// Extract the values from the array-like object.
const extractedValues = Object.values(arrayLike);
console.log(extractedValues); // Output: ['a', 'b', 'c']
Explanation
This code shows how Object.values() can be used on array-like objects. The method treats the numeric keys as property names and returns their corresponding values in an array.
Example 5: An Object with Symbol Properties
const sym = Symbol('secret');
const secretData = {
[sym]: 'This is a secret',
regularKey: 'This is public'
};
// Get the values, noting that symbol properties are ignored.
const publicValues = Object.values(secretData);
console.log(publicValues); // Output: ['This is public']
Explanation
Object.values() ignores properties whose keys are Symbols. As shown in the example, only the value associated with the regular key regularKey is returned in the publicValues array.
Example 6: Using Object.values() on a String
const greeting = "Hello";
// Treat the string as an object to get its characters as values.
const chars = Object.values(greeting);
console.log(chars); // Output: ['H', 'e', 'l', 'l', 'o']
Explanation
When Object.values() is used with a string, the string is treated as an array-like object where each character is a value. The resulting array contains each character of the original string as a separate element.
Example 7: Empty Object
const emptyObject = {};
// Get the values from an empty object.
const emptyValues = Object.values(emptyObject);
console.log(emptyValues); // Output: []
Explanation
If Object.values() is called with an empty object as its argument, it will, as expected, return an empty array. This is because there are no properties to extract values from.