Javascript array reduce starts at index 1

Question

I have an array of objects that I'm trying to convert to an object. Each object has a whole bunch of k/v pairs, but the one I'm trying to pivot off of is called key. I want to do this with reduce, as I'm trying to get more familiar with it, but I'm not quite there with this implementation.

I've heavily simplified my input for the purpose of this snippet, but here's what it looks like.

const input = [
{key: "a", value: 1}, 
{key: "b", value: 2}, 
{key: "c", value: 3}, 
{key: "d", value: 4}];

let output = input.reduce((prev, curr) => {
  let obj = {...prev};
  obj[curr.key] = curr;
  return obj;
});

console.log(output);

The expected output is

{
  "a": {
    "key": "a",
    "value": 1
  },
  "b": {
    "key": "b",
    "value": 2
  },
  "c": {
    "key": "c",
    "value": 3
  },
  "d": {
    "key": "d",
    "value": 4
  }
}

It works great for any element starting with index 1, but the first index is just spread into the output object.

According to Mozilla's docs:

The reducer walks through the array element-by-element, at each step adding the current array value to the result from the previous step (this result is the running sum of all the previous steps) — until there are no more elements to add.

In my head I interpreted that and was expecting prev to start as undefined and curr to start at index 0 and then iterate through each index, but prev is actually getting index 0 at the start and curr is starting at index 1.

Am I missing something? Do I have to run this separately for just the first index? That seems odd.

Important note: spreading repeatedly makes this quadratic time, i.e. a performance disaster waiting to happen. `Object.fromEntries` as suggested by CertainPerformance doesn’t have that problem. `const output = {}; input.forEach(item => { output[item.key] = item; });` doesn’t either. — Ry-, Nov 09 '21 at 22:39
@Ry- which is another good thing about the initial value - if you supply it, you know for a fact you don't need a pure reducer. So you can just mutate the accumulator freely. — VLAZ, Nov 09 '21 at 22:42

score 2 · Accepted Answer · answered Nov 09 '21 at 22:31

You did not pass an initial value to .reduce (which should be the second argument passed), so the initial value is the first item in the array - the {key: "a", value: 1}.

While you could pass the empty object as the initial value of the accumulator:

const input = [
{key: "a", value: 1}, 
{key: "b", value: 2}, 
{key: "c", value: 3}, 
{key: "d", value: 4}];

let output = input.reduce((prev, curr) => {
  let obj = {...prev};
  obj[curr.key] = curr;
  return obj;
}, {});
// ^^

console.log(output);

This would be more elegant with Object.fromEntries:

const input = [
{key: "a", value: 1}, 
{key: "b", value: 2}, 
{key: "c", value: 3}, 
{key: "d", value: 4}];

const output = Object.fromEntries(
  input.map(obj => [obj.key, obj])
);
console.log(output);

Oh gotcha. I missed that last parameter in the docs (I thought it was an optional parameter for the arrow function). — Liftoff, Nov 09 '21 at 22:33

Javascript array reduce starts at index 1

1 Answers1