Reduce with deconstruction or forEach - Iteration and Airbnb JavaScript Style Guide

Question

I have an object:

things = {
  table: 'red',
  chair: 'green'
}

Adhering to Airbnb's JavaScript Style Guide, I want to create a function that duplicates this object, setting all keys of the object to blue.

My 2 options seem to be:

1 Use reduce

function alwaysBlue(things) {
  return Object.keys(things)
    .reduce((acc, thing) => ({ ...acc, [thing]: 'blue' }), {})
}

2 Use forEach

function alwaysBlue(things) {
  const blueThings = {}
  Object.keys(things)
    .forEach(thing => (blueThings[thing] = 'blue'))
  return blueThings
}

(1) deconstruction on every iteration seems expensive, but if I'm to take no-param-reassign in to account I can't just append to the accumulator on each iteration

However, forEach (2) should be avoided in favour of map() / every() / filter() / find() / findIndex() / reduce() / some(), according to https://github.com/airbnb/javascript#iterators--nope

So which is the preferred approach if I'm to adhere to Airbnb's JavaScript Style Guide - or is there another approach I'm missing?

Answer 1

I'd say the general guideline would be that you can adhere to your coding conventions of choice unless they force you into writing implementations that have a negative impact on performance that is big enough to consider . If that's the case then you will have to make the necessary sacrifice of coding standards in order to write an implementation that performs well enough.

I do not know what is your real-world data, but I bet #1 would do just fine and if not then #2 would most likely be a good compromise. The guide doesn't say forEach is bad , it's just not best .

Answer 2

Answered on the github issue (which should be the first and only place you go for questions on this guide):

---

Since that's invalid syntax, I assume your object is:

   things = {
      table: 'red',
      chair: 'green'
    }

---

Your first example, with the reduce , is correct. "Seems expensive" is something that you shouldn't worry about - performance is the least important thing, only to be concerned about after code is correct, clean, tested, and profiled.

Only if it ends up being necessary (as determined by fully benchmarking your app, not by microbenchmarks like jsperf), then you'd use your forEach approach next, and then if it still was necessary, you'd devolve it to a for loop.

Answer 3

如果您打算使用mapValues等第三方工具， 则可以使用mapValues ：

_.mapValues(things, () => 'blue');

Answer 4

You can use Object.assign , which doesn't create a new object, but rather just appends the item to the accumulator. Would be better for performance and adheres to the style guide.

Object.keys(things)
    .reduce((acc, thing) => Object.assign(acc, {[thing]: 'blue' }), {})

Answer 5

Just use a dead simple loop:

function alwaysBlue(things) {
  const blueThings = {}
  for (const key in things) // or `for (const key of Object.keys(things))`
    blueThings[key] = 'blue'
  return blueThings
}

Those iteration methods are only good for arrays, which we aren't dealing with here.