Breakdown function map and reduce -JS

Question

I am dealing with a function here:

function transformEmployeeData(array) {
  return array.map(function(data) {
    return data.reduce(function(a, b) {
      a[b[0]] = b[1];
      return a;
    }, {})
  });
}
transformEmployeeData(array);

This function converts array to objects like this:

[
    {firstName: 'Joe', lastName: 'Blow', age: 42, role: 'clerk'},
    {firstName: 'Mary', lastName: 'Jenkins', age: 36, role: 'manager'}
]

So if you have an array:

[
    [
        ['firstName', 'Joe'], ['lastName', 'Blow'], ['age', 42], ['role', 'clerk']
    ],
    [
        ['firstName', 'Mary'], ['lastName', 'Jenkins'], ['age', 36], ['role', 'manager']
    ]
]

It will convert it to that.

I want to focus on this part:

return array.map(function(data) {
    return data.reduce(function(a, b) {
      a[b[0]] = b[1];
      return a;
    }, {})
  });

I studied the map function and it iterates over arrays and do something with it, while the reduce function condense array into a single value. Right now it's not clear to me how these two functions work together returning converted array-object. Is there anyone out there who could help me understand this parts in laymans term? or if not is there any slickest way to achieve the same?

SOrry newbie.

Answer 1

In this sense, to map an array means to return a new array with each value converted based on some mapping function.

const numbers = [1, 2, 3];
const squares = numbers.map(num => num ** 2);
console.log(squares);

To reduce an array means, as you've said, to combine its elements into a single value.

const numbers = [1, 2, 3];
const sum = numbers.reduce((total, num) => total + num, 0);
console.log(sum);

In your case here, you have 3 levels of nested arrays and the process can be divided into 3 functional units. The easiest way to understand what is happening is to start from the most inner point and go outward to the mapping of the top-level array.

At the most inner level, an array of 2 elements in the form [property, value], gets added into an object such that the first element is the property name and the second is the value.

const arr = ['name', 'bob'];

// property is item[0], value is item[1]
const propertyName = arr[0];
const propertyValue = arr[1];

const obj = {};
obj[propertyName] = propertyValue;

console.log(obj); // { name: 'bob' }

At the middle level, we have an array where each element is an above-mentioned 2-element array. This array of arrays gets reduced into an object by converting each 2-element array into a property and value of the object.

const arr = [
  ['firstName', 'Joe'], ['lastName', 'Blow'], ['age', 42], ['role', 'clerk']
];

const reduced = arr.reduce((obj, item) => {
  obj[item[0]] = item[1]; // add property and value to new object
  return obj;             // return the object so next array item can be converted
}, {});

console.log(reduced);

Finally, the top level mapping just converts an array of above mentioned array of 2-element arrays (3 levels of arrays) into an array of objects that got their properties and values as mentioned previously.