Javascript nested array single element modification transforms into whole array modification

Question

I am having issues with this code:

var openingSegments = Array(7).fill([]);
openingSegments[0].push({'start': '1100', 'end': '1900'});

Because when I do:

console.log(openingSegments);

It gives me :

[ [ { start: '1100', end: '1900' } ],
  [ { start: '1100', end: '1900' } ],
  [ { start: '1100', end: '1900' } ],
  [ { start: '1100', end: '1900' } ],
  [ { start: '1100', end: '1900' } ],
  [ { start: '1100', end: '1900' } ],
  [ { start: '1100', end: '1900' } ] ]

As if I had pushed all the elements of 'hoursOfDay' which is not the case since i only applied push on the very first element (index 0).

What is happening here ?

Suren Srapyan · Accepted Answer · 2018-04-19 11:08:54Z

3

fill just copies the passed argument across all items. Actually you have only one array object and 7 reference copies of that object pushed into the array. Changing array via one reference affects all items.

Instead of fill you can use Array#from function with the mapFn parameter of it.

var openingSegments = Array.from({ length: 7 }, x => []);
openingSegments[0].push({'start': '1100', 'end': '1900'});

console.log(openingSegments[0]);
console.log(openingSegments[1]);

answered Apr 19, 2018 at 11:08

Suren Srapyan

68.9k14 gold badges128 silver badges119 bronze badges

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

1 Comment

Stormsyders Over a year ago

ok this is really much appreciated ! So now should I take down this answer because it wasn't the right question or ?

Kristian Sakarisson · Accepted Answer · 2018-04-19 11:23:47Z

0

Array.fill just fills your array with the exact same objects.

This is basically how fill works:

function fillFunc(size, element) {
  const resultArray = [];
  for (let i = 0; i < size; ++i) {
    resultArray.push(element);
  }
  return resultArray;
}
const filledArray = fillFunc(7, []);

As you can see, the resulting array just gets filled with references to the initial object. I'd go with something other than Array.fill() for your particular needs.

answered Apr 19, 2018 at 11:23

Kristian Sakarisson

314 bronze badges

Collectives™ on Stack Overflow

Javascript nested array single element modification transforms into whole array modification

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related