How to create and populate an array programmatically

Question

I am trying to create a multi dimensional array programmatically. But when i push an object into the array it gets pushed into all indexes in the array. Why is this happening

Here's a simple demo

let postTest = new Array(4).fill([]);
postTest[0].push({key: 'value', anotherKey: 'value'});
console.log(postTest);

That's because you fill the array with the same reference. — Moritz Roessler
– Moritz Roessler, Commented Apr 7, 2020 at 14:09
@MoritzRoessler could you provide a link or explain in more detail please? — Reece
– Reece, Commented Apr 7, 2020 at 14:10
@Reece developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — Code Maniac
– Code Maniac, Commented Apr 7, 2020 at 14:11

Code Maniac · Accepted Answer · 2020-04-07 14:08:40Z

6

Use Array.from instead, Array.prototype.fill copies the reference of object on all places so any change at one place will reflect at all places

let postTest = Array.from({length: 4}, ()=> []);

postTest[0].push({ key: 'value',  anotherKey: 'value' });

console.log(postTest);

answered Apr 7, 2020 at 14:08

Code Maniac

37.9k5 gold badges44 silver badges65 bronze badges

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

Comments

palaѕн · Accepted Answer · 2020-04-07 14:25:28Z

2

As mentioned in the fill() method docs:

value
Value to fill the array with. (Note all elements in the array will be this exact value.)

You can fix this issue, by assigning the empty array to individual index using .map() so that there no reference issue like:

let postTest = new Array(4).fill().map(x=>[]);
postTest[0].push({key: 'value', anotherKey: 'value'});
console.log(postTest);

You can also, try:

let postTest = [...Array(4)].map(x=>[]);
postTest[0].push({key: 'value', anotherKey: 'value'});
console.log(postTest);

edited Apr 7, 2020 at 14:25

answered Apr 7, 2020 at 14:13

palaѕн

74.2k17 gold badges123 silver badges140 bronze badges

Collectives™ on Stack Overflow

How to create and populate an array programmatically

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related