How to map over an array and generate an object istead of an array?

Question

I would like that this code:

var arr = [
    { key: 'foo', val: 'bar' },
    { key: 'hello', val: 'world' }
];

var result = arr.map((i) => ([i.key]: i.val)); //something like this

console.log(result);

Returns:

{foo: 'bar', hello: 'world'}

Is this possible in ECMA6?

Answer 1

The Array#map method is using to generate a new array. To reduce into a single object use Array#reduce method.

var arr = [{
    key: 'foo',
    val: 'bar'
  },
  {
    key: 'hello',
    val: 'world'
  }
];

// define the property and return the object reference
// where define the initial value as an empty object for result
var result = arr.reduce((obj, o) => (obj[o.key] = o.val, obj), {}); 

console.log(result);

Answer 2

You could use the forEach method:

var arr = [
    { key: 'foo', val: 'bar' },
    { key: 'hello', val: 'world' }
];

var obj = {};
arr.forEach(function(item){
  obj[item.key] = item.val;
});

console.log(obj);

Answer 3

You can do this with Array.prototype.reduce:

arr.reduce(function(map, obj) {
    map[obj.key] = obj.val;
    return map;
}, {});