How to Use Object.entries() in JavaScript

In JavaScript, the Object.entries() method is a powerful tool for converting an object into an array of key-value pairs. This can be particularly useful for iterating over an object’s properties or transforming its structure.

const obj = { name: 'Alice', age: 25 };
const entries = Object.entries(obj);
console.log(entries); // [["name", "Alice"], ["age", 25]]

• Purpose: Convert an object into an array of key-value pairs.
• Common Usage: Use Object.entries(object) to create an array where each element is an array [key, value].

Object.entries() is a built-in JavaScript method that returns an array of a given object’s own enumerable string-keyed property [key, value] pairs. The order of the array elements matches the order of properties in the object.

Basic Usage of Object.entries()

The basic usage of Object.entries() involves passing an object to the method, which returns an array of key-value pairs.

Example 1: Converting an Object to an Array

const obj = { name: 'Alice', age: 25 };
const entries = Object.entries(obj);
console.log(entries); // [["name", "Alice"], ["age", 25]]

Explanation:

• Object.entries(obj): Converts the object obj into an array of key-value pairs.
• console.log(entries): Logs the resulting array, showing the pairs ["name", "Alice"] and ["age", 25].

Iterating Over Object Properties

You can use Object.entries() in conjunction with loops to iterate over the properties of an object.

Example 2: Using for...of with Object.entries()

const obj = { name: 'Alice', age: 25 };

for (const [key, value] of Object.entries(obj)) {
    console.log(`${key}: ${value}`);
}

Explanation:

• for (const [key, value] of Object.entries(obj)) {...}: Iterates over each key-value pair in the object.
• console.log(\\${key}: \${value}`)`: Logs each key-value pair to the console.

Output:

name: Alice
age: 25

Transforming Object Data

Object.entries() is useful for transforming or manipulating object data, such as modifying values or keys.

Example 3: Using Object.entries() to Modify Values

const obj = { name: 'Alice', age: 25 };
const modifiedEntries = Object.entries(obj).map(([key, value]) => {
    return [key, typeof value === 'number' ? value + 1 : value];
});

const modifiedObj = Object.fromEntries(modifiedEntries);
console.log(modifiedObj); // { name: "Alice", age: 26 }

Explanation:

• Object.entries(obj).map(([key, value]) => {...}): Maps over each key-value pair, modifying the value if it’s a number.
• Object.fromEntries(modifiedEntries): Converts the modified entries back into an object.
• console.log(modifiedObj): Logs the modified object with the updated values.

Handling Nested Objects

When working with nested objects, Object.entries() can be combined with recursion or additional logic to handle deeper structures.

Example 4: Working with Nested Objects

const nestedObj = {
    user: { name: 'Alice', age: 25 },
    location: 'Wonderland'
};

const entries = Object.entries(nestedObj);
entries.forEach(([key, value]) => {
    if (typeof value === 'object') {
        console.log(`${key}:`, Object.entries(value));
    } else {
        console.log(`${key}: ${value}`);
    }
});

Explanation:

• Object.entries(nestedObj): Converts the outer object into key-value pairs.
• if (typeof value === 'object') {...}: Checks if the value is an object and handles it accordingly.
• console.log(\\${key}: \${value}`)`: Logs the key-value pairs, handling nested objects as needed.

Conclusion

Object.entries() is a versatile method in JavaScript, enabling developers to work with objects in more dynamic and flexible ways. Whether you need to convert an object to an array, iterate over its properties, or transform its data, Object.entries() provides a clean and effective solution.

By understanding and applying these techniques, you can handle complex object operations with ease, making your code more readable and maintainable.