Understanding map functions with objects: Keys and Values

Question

Hello I came across an example on MDN with map and I understand it with regular arrays but this example threw me for a loop.

var kvArray = [{key:1, value:10}, {key:2, value:20}, {key:3, value: 30}];
var reformattedArray = kvArray.map(function(obj){ 
   var rObj = {};
   rObj[obj.key] = obj.value;
   return rObj;
});
// reformattedArray is now [{1:10}, {2:20}, {3:30}], 
// kvArray is still [{key:1, value:10}, {key:2, value:20}, {key:3, value: 30}]

Essentially I am not understanding how both the "key" and "value" properties "disappear". I thought that rObj[obj.key] = obj.value; line meant in the original array, find the key's value and replace the original key with the value for that key, and it just seems like I'm really confused at this point. Can someone please explain how they got these values?

rObj is a new, empty object created every time your callback is called. rObj[obj.key] = obj.value; then adds a single property to that object with a property name equal to obj.key... — nnnnnn
– nnnnnn, Commented Jun 6, 2016 at 3:14
I don't understand your questions. In the map a new object is created for each array item. Each of these objects has its key assigned the index of the current array index and the value is the value of the current array index. reformattedArray is a returned array containing all of the objects. — William
– William, Commented Jun 6, 2016 at 3:16
This doesn't really have anything to do with map. The following example is equivalent: object1 = {key: 'a', value: 'b'}; object2 = {}; object2[object1.key] = object2.value. Making object2 has no effect on object1. — user229044
– user229044 ♦, Commented Jun 6, 2016 at 3:20
Oh, thank you guys. I found where I was confused on. I was just confused on the subscript notation. — Shinji-san
– Shinji-san, Commented Jun 6, 2016 at 3:30

Soubhik Mondal · Accepted Answer · 2016-06-06 03:22:29Z

1

You said:

I thought that rObj[obj.key] = obj.value; line meant in the original array, find the key's value and replace the original key with the value for that key.

Array.prototype.map doesn't replace. It applies the callback function provided by you on each element from the original array, and pushes the resulting output into a new array. From the docs:

The map() method creates a new array with the results of calling a provided function on every element in this array.

It is important to note that the original array is not meant to be altered by map.

edited Jun 6, 2016 at 3:22

answered Jun 6, 2016 at 3:17

Soubhik Mondal

2,6661 gold badge15 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dhananjaya Kuppu · Accepted Answer · 2016-06-06 03:51:34Z

// kvArray is source array
var kvArray = [{key:1, value:10}, 
               {key:2, value:20}, 
               {key:3, value: 30}];

var reformattedArray = kvArray.map(function(obj){ 
    var rObj = {}; //  --------- line (1)
    rObj[obj.key] = obj.value; //  --------- line (2)
    return rObj;   //  --------- line (3)
});

From line (1) to line (3) there is no reference of kvArray, hence kvArray will remain same and will not be modified after the map operation
at line (1), var rObj = {} is creating a brand new object for every item in kvArray

at line (2), for each element in kvArray, the key of the element is assigned as a property to rObj and the value of element is assigned as value.

   -- during interation 1, 1st element {key:1, value:10} becomes
      rObj[1] = 10
   -- during interation 2, 2nd element {key:2, value:20} becomes
      rObj[2] = 20
   -- during interation 3, 3rd element {key:3, value:30} becomes
      rObj[3] = 30

at line (3) rObj is returned -- during interation 1, it returns {'1':10} -- during interation 2, it returns {'2':20} -- during interation 3, it returns {'3':30}
map operation places all the items that is returned for each operation into a new array hence it returns : [{'1':10}, {'2':20}, {'3':30}]

Collectives™ on Stack Overflow

Understanding map functions with objects: Keys and Values

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related