Javascript array reduce starts at index 1

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.

>Solution :

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);