Skip to content

JavaScript object entries map

  • by

JavaScript object entries map is a technique that combines the Object.entries() and map() methods to transform key-value pairs in JavaScript objects.

Object.entries(obj).map(([key, value]) => {
  // Transformation logic goes here
  return [newKey, newValue];
});

By using Object.entries(), you can extract an array of entries representing the properties and values of an object. Then, applying map() allows you to iterate over each entry, apply custom transformations, and return a new array with the modified entries.

This approach provides a powerful way to manipulate and manipulate object data, enabling tasks such as key/value transformations, data filtering, or generating new object structures. With “JavaScript object entries map,” you can efficiently process and manipulate object data in a flexible and concise manner.

JavaScript object entries map example

Simple example code of how you can use Object.entries() and map() together:

const obj = {
  name: 'John',
  age: 30,
  city: 'New York'
};

const transformedArray = Object.entries(obj).map(([key, value]) => {
  // Modify the key or value as needed
  return [key.toUpperCase(), value * 2];
});

console.log(transformedArray);

Output:

JavaScript object entries map

You can modify the callback function inside map() according to your specific needs to transform the key-value pairs in any way you want.

Another example

const student = {
  name: 'John',
  age: 20,
  grade: 'A',
  subjects: ['Math', 'Science', 'History']
};

const transformedObject = Object.fromEntries(
  Object.entries(student).map(([key, value]) => {
    if (key === 'grade') {
      return [key, value.toUpperCase()];
    } else if (key === 'subjects') {
      return [key, value.map(subject => subject.toUpperCase())];
    }
    return [key, value];
  })
);

console.log(transformedObject);

Comment if you have any doubts or suggestions on this JS Object topic.

Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.

OS: Windows 10

Code: HTML 5 Version

Leave a Reply

Discover more from Tutorial

Subscribe now to keep reading and get access to the full archive.

Continue reading