Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

map function for objects (instead of arrays)

I have an object:

myObject = { 'a': 1, 'b': 2, 'c': 3 } 

I am looking for a native method, similar to Array.prototype.map that would be used as follows:

newObject = myObject.map(function (value, label) {     return value * value; });  // newObject is now { 'a': 1, 'b': 4, 'c': 9 } 

Does JavaScript have such a map function for objects? (I want this for Node.JS, so I don't care about cross-browser issues.)

like image 755
Randomblue Avatar asked Feb 11 '13 10:02

Randomblue


People also ask

Can we use map function on object?

but it is safe to add this map function to Object, just don't add to Object. prototype.

Can I use map on an array of objects?

Step 4 — Reformatting Array Objectsmap() can be used to iterate through objects in an array and, in a similar fashion to traditional arrays, modify the content of each individual object and return a new array. This modification is done based on what is returned in the callback function.

Can we apply map function on object in JavaScript?

Use the General map() Method to Create a Map Function for Objects in JavaScript. Using the native map() function, this method can achieve the desired results. However, you should know that this method will modify the original object instead of creating a new one.

Why is it better to use objects instead of arrays?

Both objects and arrays are considered “special” in JavaScript. Objects represent a special data type that is mutable and can be used to store a collection of data (rather than just a single value). Arrays are a special type of variable that is also mutable and can also be used to store a list of values.


1 Answers

There is no native map to the Object object, but how about this:

var myObject = { 'a': 1, 'b': 2, 'c': 3 };    Object.keys(myObject).map(function(key, index) {    myObject[key] *= 2;  });    console.log(myObject);  // => { 'a': 2, 'b': 4, 'c': 6 }

But you could easily iterate over an object using for ... in:

var myObject = { 'a': 1, 'b': 2, 'c': 3 };    for (var key in myObject) {    if (myObject.hasOwnProperty(key)) {      myObject[key] *= 2;    }  }    console.log(myObject);  // { 'a': 2, 'b': 4, 'c': 6 }

Update

A lot of people are mentioning that the previous methods do not return a new object, but rather operate on the object itself. For that matter I wanted to add another solution that returns a new object and leaves the original object as it is:

var myObject = { 'a': 1, 'b': 2, 'c': 3 };    // returns a new object with the values at each key mapped using mapFn(value)  function objectMap(object, mapFn) {    return Object.keys(object).reduce(function(result, key) {      result[key] = mapFn(object[key])      return result    }, {})  }    var newObject = objectMap(myObject, function(value) {    return value * 2  })    console.log(newObject);  // => { 'a': 2, 'b': 4, 'c': 6 }    console.log(myObject);  // => { 'a': 1, 'b': 2, 'c': 3 }

Array.prototype.reduce reduces an array to a single value by somewhat merging the previous value with the current. The chain is initialized by an empty object {}. On every iteration a new key of myObject is added with twice the key as the value.

Update

With new ES6 features, there is a more elegant way to express objectMap.

const objectMap = (obj, fn) =>    Object.fromEntries(      Object.entries(obj).map(        ([k, v], i) => [k, fn(v, k, i)]      )    )      const myObject = { a: 1, b: 2, c: 3 }    console.log(objectMap(myObject, v => 2 * v)) 
like image 172
Amberlamps Avatar answered Sep 29 '22 10:09

Amberlamps