Breakdown function map and decrease -JS
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 the 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']
]
]
He transforms it into this.
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 looked into the map function and it iterates over the arrays and does something with it, and the reduce function condenses the array into one value. It is not clear to me right now how these two functions work together, returning a converted array object. Is there anyone out there who could help me understand these parts in lay terms? or if not, is there a slippery way to achieve the same?
SOrry newbie.
source to share
In this sense, mapping an array implies returning 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 shrink an array, you are, as you said, concatenating its elements into a single value.
const numbers = [1, 2, 3];
const sum = numbers.reduce((total, num) => total + num, 0);
console.log(sum);
In this case, you have 3 levels of nested arrays, and the process can be divided into 3 functional blocks. The easiest way to understand what's going on is to start at the innermost point and work your way out to display the top-level array.
Internally, an array of 2 elements in a form is [property, value]
added to the 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 the aforementioned 2 element array. This array of arrays is dumped into an object, converting each 2-element array to a property and an object value.
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 simply converts the array of the above array of 2-element arrays (3-level arrays) to an array of objects, which got their properties and values as mentioned earlier.
source to share