Mapping key value pairs between two JavaScript objects

Question

I have two JavaScript objects:

const widgetsObj = { inputWidget: "MyInputWidget", checkboxWidget: "MyCheckboxWidget", geoWidget: "MyGeoWidget" }; this.components = { "MyInputWidget": MyInputWidget, "MyCheckboxWidget": MyCheckboxWidget, "MyGeoWidget": MyGeoWidget }; 

The end goal is to map all keys from widgetsObj to all values from this.components. The end object should look like this.

let endObj = { inputWidget: MyInputWidget, checkboxWidget: MyCheckboxWidget, geoWidget: MyGeoWidget } 

Right now, I am doing this like so

let returnObj = {}; for(const key of Object.keys(widgets)) { if(this.components.hasOwnProperty(widgets[key])) { returnObj[key] = this.components[widgets[key]]; } } return returnObj; 

where widgets represents widgetsObj.

Is there a better way to do this rather than look for each value by mapping through the whole object repeatedly?

Answer 1

It might be a little cleaner to use .reduce instead of for...of... loop:

Object.keys(widgetsObj).reduce( (obj, key) => { obj[key] = this.components[widgetsObj[key]]; return obj; }, {});