Assign methods to object by iterating over an array

Question

In ES5, I know that it's possible to assign methods to an object using a forEach loop in the following way:

var myMethods = [
  {
    name: 'start',
    src: someFn
  },
  {
    name: 'stop',
    src: someOtherFn
  }
];

var myObject = {};

myMethods.forEach(function(method) {
  myObject[method.name] = method.src;
});

In ES2015 (or ES6), is it possible to define these methods in tandem with creating the object? Here is an example of how I might expect this to work:

// example
const myObject = {
  [...myMethods.map((method) => method.name)]: [...myMethods.map(method) => method.src)]
}

The end result would look like this:

const myObject = {
  start: someFn,
  stop: someOtherFn
}

If there is a way to iterate over these methods and assign them to myObject, I would happily restructure the myMethods array so that this is possible.

The end goal is to be able to assign each of these methods in an external module and not have to duplicate the definition.

score 5 · Accepted Answer · 2016-03-02 20:14:25Z

5

Yes, you can use Object.assign and the spread operator in conjunction with computed property names to do

var myObject = Object.assign({}, ...myMethods.map(({name, src}) => ({[name]: src})));

First we map myMethods to an array of little one-property objects, whose key is given by the value of the name property and value by the src property. Then we use the spread operator ... to pass these to Object.assign as parameters. Object.assign then glues them all together for us.

edited Mar 2, 2016 at 20:14

answered Mar 2, 2016 at 20:08

user663031

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

2 Comments

Mulan Over a year ago

A+ Nice one-liner and detailed explanation

just-boris Over a year ago

Never use this code in production. That's great that it can be done in few symbols, but it wastes a lot of computer time to create unnecessary objects: jsperf.com/assign-vs-reduce/4 Reduce is probably better for that case

jmcgriz · Accepted Answer · 2016-03-02 20:03:48Z

3

Reduce should do the trick for you. Note that the optional second parameter is used to start with an empty object at the beginning.

var myMethods = [{
  name: 'start',
  src: function() {
    console.log('started')
  }
}, {
  name: 'stop',
  src: function() {
    console.log('stopped')
  }
}];

var myObject = myMethods.reduce((obj, method) => {
  obj[method.name] = method.src;
  return obj;
}, {})


console.log(myObject)
myObject.start()
myObject.stop()

answered Mar 2, 2016 at 20:03

jmcgriz

3,3981 gold badge11 silver badges16 bronze badges

2 Comments

jmcgriz Over a year ago

Fair enough, but I'm going to go ahead and assume that using reduce is new to OP, otherwise he'd already have been using it over that forEach solution

loganfsmyth Over a year ago

You can also use Object.assign. e.g. myMethods.reduce((obj, method) => Object.assign(obj, {[method.name]: method.src}), {}); so you get some ES6 goodness.

guest271314 · Accepted Answer · 2016-03-02 20:37:40Z

0

Try assigning to myObject at same line of myMethods assignnemts

var myObject = {};

someFn = function(){console.log(this)};
someOtherFn = function(){console.log(this)};

var myObject = {};

someFn = function(){};
someOtherFn = function(){}

var myMethods = [
  {
    name: (myObject["start"] = "start"),
    src: (myObject["start"] = someFn)
  },
  {
    name: (myObject["stop"] = "stop"),
    src: (myObject["stop"] = someOtherFn)
  }
];

edited Mar 2, 2016 at 20:37

answered Mar 2, 2016 at 20:07

guest271314

1

Collectives™ on Stack Overflow

Assign methods to object by iterating over an array

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related