Run results for: reduce with object spread vs foreach with adding vs reduce without spread

Test name	Executions per second
✓ Using reduce without spread operator	6,312,028 Ops/sec
Using map and adding to an object	6,041,884 Ops/sec
Using reduce and the spread operator	608,652 Ops/sec

Using reduce and the spread operator

const styles = {
  foo: {
    color: 'red',
  },
  bar: {
    color: 'green',
    '&:focus': {
      color: 'blue',
    },
  },
  foo2: {
    color: 'red',
  },
  bar2: {
    color: 'green',
    '&:focus': {
      color: 'blue',
    },
  },
  foo3: {
    color: 'red',
  },
  bar3: {
    color: 'green',
    '&:focus': {
      color: 'blue',
    },
  },
  foo4: {
    color: 'red',
  },
  bar4: {
    color: 'green',
    '&:focus': {
      color: 'blue',
    },
  },
};

Object
  .keys(styles)
  .reduce((classes, selector) => ({
  ...classes,
  [selector]: selector,
}), {});

Using map and adding to an object

const styles = {
  foo: {
    color: 'red',
  },
  bar: {
    color: 'green',
    '&:focus': {
      color: 'blue',
    },
  },
  foo2: {
    color: 'red',
  },
  bar2: {
    color: 'green',
    '&:focus': {
      color: 'blue',
    },
  },
  foo3: {
    color: 'red',
  },
  bar3: {
    color: 'green',
    '&:focus': {
      color: 'blue',
    },
  },
  foo4: {
    color: 'red',
  },
  bar4: {
    color: 'green',
    '&:focus': {
      color: 'blue',
    },
  },
};

const obj = {};

Object
  .keys(styles)
  .forEach(style => {
	obj[style] = style;
	})

Using reduce without spread operator

const styles = {
  foo: {
    color: 'red',
  },
  bar: {
    color: 'green',
    '&:focus': {
      color: 'blue',
    },
  },
  foo2: {
    color: 'red',
  },
  bar2: {
    color: 'green',
    '&:focus': {
      color: 'blue',
    },
  },
  foo3: {
    color: 'red',
  },
  bar3: {
    color: 'green',
    '&:focus': {
      color: 'blue',
    },
  },
  foo4: {
    color: 'red',
  },
  bar4: {
    color: 'green',
    '&:focus': {
      color: 'blue',
    },
  },
};

Object
  .keys(styles)
  .reduce((classes, selector) => {
  		classes[selector] = selector;
  		return classes;
	}, {});