Javascript Array.reduce weird behaviour

Question

I have this small code snippet:

let data = [1, 2];
let newBody = {};

let newArray = data.reduce((acc, current) => {
  newBody.doc = current;
  acc.push(newBody);
  return acc;
}, []);

The result is:

newArray = [ { doc: 2 }, { doc: 2 } ]

If I'm redeclaring the empty newBody inside the iteration, its working fine. But if I declare it outside its getting the value of the last array element and applying it to all the other elements and I'm not sure why.

You're using the same object reference over and over, modifying the one object, and pushing multiple references to the same object into an array. If I'm redeclaring the empty newBody inside the iteration, its working fine. <-- that's the answer. — Mark
– Mark, Commented May 13, 2020 at 0:36
Also, this is rather a job for .map() as opposed to .reduce(). What your code does is equivalent to this: jsfiddle.net/khrismuc/82ezLu3o — user5734311
– user5734311, Commented May 13, 2020 at 0:38
@MarkMeyer Yeah, As one of the comment said its because of closures, so I guess I have to look into closures more indepth. ChrisG - This is a simplified version of what I'm doing inside the reduce so that's why it looks like I should've used .map — Arlind
– Arlind, Commented May 13, 2020 at 1:03

Paul Nikonowicz · Accepted Answer · 2020-05-13 00:49:31Z

1

You are using a closure on accident. Put the newBody in it's proper scope:

let data = [1, 2];

let newArray = data.reduce((acc, current) => {
  let newBody = {};
  newBody.doc = current;
  acc.push(newBody);
  return acc;
}, []);

answered May 13, 2020 at 0:49

Paul Nikonowicz

3,91323 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Javascript Array.reduce weird behaviour

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related