How To Use Map Function For Objects In JavaScript – Detailed Guide

In JavaScript, when you work with Objects, it is obvious to perform a map function for objects by iterating through objects to manipulate data.

JavaScript objects does not have a native map() function but you can use ES feature Object.fromEntries() & Object.entries()to perform map operation of iterating over the objects.

If you are in a hurry
You can use the below Object.fromEntries() and Object.entries() approach to use map function for objects.
Code

    const cinemas = {
        "exitDoors": 3,
        "seats": 200,
        "speakers": 10,
        "ticketCounters": 2
    }
    const objectEntryFn = (obj) => Object.fromEntries(Object.entries(obj).map(([key, val]) => [key, val * 2]));
    console.log(objectEntryFn(cinemas));

Output

    { 
        exitDoors: 6, 
        seats: 400, 
        speakers: 20, 
        ticketCounters: 4 
    }

You can see the above code helps to iterate through the JavaScript object and manipulate its value(doubled the value).

There are several other ways to use the map function for objects; let us see those in detail.

Using ES10 Object.fromEntries() and Object.entries() approach

In ES10, Object.fromEntries method was introduced, and it helps to transform a list of key-value pair to Object.
The Object.entries() method returns array of given objects based on its [key, value] pairs.
To achieve map function for objects using Object.fromEntries() and Object.entries() follow the below process,

  • Use Object.entries() to convert the JavaScript object to an array of objects, and then you can iterate the array using the arraymap() function to map function for objects.
  • Later use Object.fromEntries() to transform the list of [key, value] pairs to Object.

Code

    const cinemas = {
        "exitDoors": 3,
        "seats": 200,
        "speakers": 10,
        "ticketCounters": 2
    }
    const objectEntryFn = (obj) => Object.fromEntries(Object.entries(obj).map(([key, val]) => [key, val * 2]));
    console.log(objectEntryFn(cinemas));

Output

    { 
        exitDoors: 6, 
        seats: 400, 
        speakers: 20, 
        ticketCounters: 4 
    }

In the above example, the JavaScript Object(cinemas) is iterated and manipulated to produce a new result double its current value.

  • To achieve the double of its current value, the above JavaScript object is passed to the functionobjectEntryFn(), it uses Object.entries(obj) to convert the object to [key, value] pairs.
  • Map function(.map()) is used to iterate through the [key,value] pairs to manipulate(double) the value using [key, val * 2].
  • At last Object.fromEntries() is used to transform the [key, value] pairs back to JavaScript Object.

Using ES7 Object.assign() and Object.entries() approach

Another similar approach to above approach is to use Object.assign() method instead of Object.fromEntries() method.
Object.assign() copies all its enumerable properties from source to target object and returns the modified target object.
The Object.entries() method returns an array of given objects based on its [key, value] pairs.
Code

    const cinemas = {
        "exitDoors": 3,
        "speakers": 10,
        "seats": 200,
        "ticketCounters": 2
    }
    let objectAssignFn = (obj) => Object.assign({}, ...Object.entries(obj).map(([key, val]) => ({
        [key]: val * 2
    })));
    console.log(objectAssignFn(cinemas));

Output

    { 
        exitDoors: 6, 
        seats: 400, 
        speakers: 20, 
        ticketCounters: 4 
    }

In the above example, the JavaScript object is converted to [key, value] pairs using Object.entries() and iterated using the .map() to manipulates its value(doubled the value)
Object.assign() is used to copy all the updated [key, value] pairs to another object and return it.

Using ES6 Object.assign() and Object.keys() approach

The Object.keys() method returns the array of keys of the given object.
You can use Object.keys() to iterate over the JavaScript Object and use the map function to manipulate the value.
Use Object.assign() to copy the properties from source to target object and perform map function for objects.

Code

    const cinemas = {
        "seats": 200,
        "speakers": 10,
        "exitDoors": 3,
        "ticketCounters": 2
    }
    let objectAssignKeyFn = (obj) => Object.assign({}, ...Object.keys(obj).map(key => ({
        [key]: obj[key] * 2
    })));
    console.log(objectAssignKeyFn(cinemas));

Output

    { 
        seats: 400, 
        speakers: 20, 
        exitDoors: 6, 
        ticketCounters: 4 
    }

In the above example, the JavaScript object is converted to an array of keys pairs using Object.keys() and iterated using the .map() to manipulate its value(doubled the value)
Object.assign() is used to copy all the updated [key, value] pairs to another object and return it.

Using reduce()

The reduce() method executes a callback function on each element of an array in order, passing the return value from the calculation on the preceding element.
You can use Object.keys() to iterate over the JavaScript Object and use the map function to manipulate the value using the reducemethod.
By the above process, the reduce() method helps map the objects’ function.

Code

    const cinemas = {
        "exitDoors": 3,
        "speakers": 10,
        "seats": 200,
        "ticketCounters": 2
    }
    const reduceFn = (obj, mapFn) => Object.keys(obj).reduce((result, key) => {
        result[key] = mapFn(obj)[key] * 2;
        return result;
    }, {});
    console.log(reduceFn(cinemas, (value) => value));

Output

    { 
        exitDoors: 6, 
        speakers: 20, 
        seats: 400,         
        ticketCounters: 4 
    }

The Object.keys() is used to create a list of keys to iterate through the reduce() method.
The reduce function accepts the callback function and executes the callback function on each array element.
It takes the specific key value from the mapFn() obj and double it using mapFn(obj)[key] * 2 and return the result.

Using For Each

The forEach() method executes provided function once on every element in array.
Here, Object.keys() method is used to extract the JavaScript object keys to iterate over the object and manipulate using the .forEach() function.
Code

    const cinemas = {
        "exitDoors": 3,
        "seats": 200,
        "speakers": 10,
        "ticketCounters": 2,
        "name":"TechMam"
    }
    Object.keys(cinemas).forEach(function(key, index) {
        if (cinemas.hasOwnProperty(key) && !isNaN(cinemas[key])) {
            cinemas[key] *= 2;
        }
    });
    console.log(cinemas);

Output

    { 
        exitDoors: 6,
        name: "TechMam",
        seats: 400,
        speakers: 20,
        ticketCounters: 4
    }

In the above example, .hasOwnProperty(key) is used to check for the key in the Object(cinemas) and !isNaN(cinemas[key]) is used to check for number value.
This will only update if the key is present and the value is a number.

Using For…of

The for...of is used to iterate over the iterable objects like string, array.
This is also similar to the forEach way of mapping function for objects.
Code

    const cinemas = {
        "seats": 200,
        "exitDoors": 3,
        "speakers": 10,
        "ticketCounters": 2
    }
    let newCinemasSpec = {}
    for (let [k, v] of Object.entries(cinemas)) {
        newCinemasSpec[k] = v * 2;
    }
    console.log(newCinemasSpec);

Output

    { 
        seats: 400, 
        exitDoors: 6,
        speakers: 20, 
        ticketCounters: 4 
    }

Using map()

The map() method iterates over each element and returns a new array populated with results of calling provided function.
Code

    var names = [{
        "firstName": "Sam",
        "lastName": "Brook"
        },
        {
        "firstName": "Brad",
        "lastName": "Matt"
        }, {
        "firstName": "Charle",
        "lastName": "Bezos"
        }
    ]
    var fullNames = names.map((key, v) => {
        return key.firstName + " " + key.lastName;
    });
    console.log(fullNames);

Output

    ["Sam Brook", "Brad Matt", "Charle Bezos"]

Note: It is always fair to use Object.map instead of Object.prototype.map.

Live Demo

Summary

You have learned how to map functions for objects.
You have also learnt about different ways to map function for objects using Object.fromEntries(), Object.entries(), reduce(), forEach() ,for...ofand also using map function in JavaScript.

You May Also Like

Leave a Comment