ES6 equivalent to lodash _.mapValues

Question

What are the different ways to convert the lodash _.mapValues to ES6.

Code:

var fruits= {
  'apple':    { 'name': 'apple',    'number': 5},
  'orange': { 'name': 'orange', 'number': 10 }
};

_.mapValues(fruits, 'number');

Output:

{ 'apple': 5, 'orange': 10 }

Answer 1

reduce the entries of the object into another object, extracting only the number from the value:

var fruits= {
  'apple':    { 'name': 'apple',    'number': 5},
  'orange': { 'name': 'orange', 'number': 10 }
};

console.log(Object.entries(fruits)
  .reduce((a, [key, { number }]) => {
    a[key] = number;
    return a;
  }, {}
));

In newer environments, you can make it even more elegant by using Object.fromEntries instead, to map to an array of key-value pair arrays:

var fruits= {
  'apple':    { 'name': 'apple',    'number': 5},
  'orange': { 'name': 'orange', 'number': 10 }
};

console.log(Object.fromEntries(
  Object.entries(fruits).map(([key, { number }]) => [key, number])
));

Answer 2

You can use for..in loop and add the key and value from old object to new object

var fruits = {
  'apple': {
    'name': 'apple',
    'number': 5
  },
  'orange': {
    'name': 'orange',
    'number': 10
  }
};

let newObj = {};

for (let keys in fruits) {
  newObj[keys] = fruits[keys].number;
}

console.log(newObj)

Answer 3

Use Array.reduce, Object.entries and Object.assign

var fruits= {'apple':    { 'name': 'apple',    'number': 5},'orange': { 'name': 'orange', 'number': 10 }};
let result = Object.entries(fruits).reduce((a,[k,{number}]) => Object.assign(a, {[k]:number}), {});
console.log(result);

Answer 4

ES6

You could also use Object.keys() and reduce() to get the required result.

DEMO

var fruits= {
  'apple':    { 'name': 'apple',    'number': 5},
  'orange': { 'name': 'orange', 'number': 10 }
};


let result = Object.keys(fruits).reduce((r,v)=>Object.assign(r,{[v]:fruits[v].number}),{});

console.log(result);

.as-console-wrapper {max-height: 100% !important;top: 0;}

Answer 5

Here is a small follow up to the other answers so that the reducer does not mutate the accumulator object.

const newObject = Object.entries(fruits)
  .reduce((acc, [fruitKey, { number }]) => ({
    ...acc,
    [fruitKey]: number,
  }), {}
));

Using the spread ...acc syntax is a more functional programming style approach for reduce methods.