JavaScript, being a versatile and dynamic programming language, undergoes constant evolution to meet the demands of modern web development. ES8, also known as ECMAScript 2017, introduced several enhancements to JavaScript, including improvements in handling objects and their properties. In this blog post, we’ll delve into three key features of ES8 related to objects: Object values, Object entries, and Object property descriptors.
JavaScript’s object manipulation capabilities are constantly evolving. ES8 (ECMAScript 2017) brought three powerful additions: Object.values, Object.entries, and Object.getOwnPropertyDescriptors. Let’s explore each in detail, along with examples, to understand how they elevate your object handling skills.
Object Values :
The Object.values() method is a handy addition to JavaScript that allows developers to extract the values of an object and return them as an array. This method disregards keys and focuses solely on the object’s values.
Purpose:
- Extracts an array containing the enumerable own property values of an object.
- Offers a concise alternative to traditional for-in loops that might include prototype chain properties.
Syntax:
Object.values(obj)Example:
const person = {
name: 'John Doe',
age: 30,
occupation: 'Developer'
};
const valuesArray = Object.values(person);
console.log(valuesArray); // Output: ['John Doe', 30, 'Developer']
In this example, Object.values(person) returns an array containing the values of the person object.
Object Entries:
Similar to Object.values(), the Object.entries() method introduced in ES8 provides a convenient way to extract both keys and values from an object, returning them as key-value pairs within an array.
Purpose:
- Generates an array of key-value pairs as sub-arrays for the object’s enumerable own properties.
- Useful for scenarios where you need both keys and values together.
Syntax:
Object.entries(obj)Example:
const person = {
name: 'John Doe',
age: 30,
occupation: 'Developer'
};
const entriesArray = Object.entries(person);
console.log(entriesArray);
/* Output:
[
['name', 'John Doe'],
['age', 30],
['occupation', 'Developer']
]
*/
Here, Object.entries(person) returns an array where each element is a two-element array containing a key-value pair from the person object.
Object Property Descriptors:
Object property descriptors provide detailed information about a property of an object, such as its configurability, writability, and enumerability. ES8 introduced methods to get and set these property descriptors: Object.getOwnPropertyDescriptor() and Object.defineProperty().
Purpose:
- Provides detailed information about an object’s own properties, including their characteristics (writable, configurable, enumerable).
- Offers a way to inspect and understand the structure and behavior of an object’s properties.
Syntax:
Object.getOwnPropertyDescriptor(obj, 'property')Object.defineProperty(obj, prop, descriptor)
Object.defineProperty(obj, 'property', {
configurable: true,
enumerable: true,
value: 'example',
writable: true
});
Example:
const obj = {
name: 'John'
};
const descriptor = Object.getOwnPropertyDescriptor(obj, 'name');
console.log(descriptor);
/* Output:
{
value: 'John',
writable: true,
enumerable: true,
configurable: true
}
*/
Object.defineProperty(obj, 'name', {
writable: false
});
obj.name = 'Jane'; // Throws an error in strict mode or silently fails in non-strict mode
console.log(obj.name); // Output: 'John'
In this example, Object.getOwnPropertyDescriptor() retrieves the property descriptor for the name property of the obj object. Subsequently, Object.defineProperty() is used to modify the property descriptor, making the name property read-only.
Conclusion:
JavaScript ES8 introduced significant enhancements to object handling with the introduction of Object.values(), Object.entries(), and Object.getOwnPropertyDescriptors(). These features provide developers with more concise and efficient ways to work with objects and their properties. By leveraging these methods, developers can write cleaner and more readable code while taking advantage of the latest features in JavaScript. Whether you’re extracting values, iterating over key-value pairs, or inspecting property descriptors, ES8’s enhancements to object handling make JavaScript development more powerful and expressive than ever before.
