Nested Arrays - updating subarrays while nesting with a for loop doesn't work?

Question

const nestedArr = [];
// ADD CODE HERE
let arr = [];
for(let i=0; i<5; i++){
  arr.push(`loop${i}`, i);
  nestedArr.push(arr);
  // nestedArr.push([`loop${i}`, i]);
}

console.log(nestedArr)

Hey guys just wondering about some behavior of JS that I am not understanding. The challenge is solved when using the commented line in gray // nestedArr.push([loop${i}, i]); but when I try to use the other approach not commented

arr.push(`loop${i}`, i);
nestedArr.push(arr);

doesn’t work as I thought.

The approach is to first declare an array arr and push to it every 5 iterations the string loop${i} and the second element index i. Next pushing array arr into nestedArr during 5 iterations. The expected result should arr is pushed 5 times into nestedArr with each push supposedly adding one element at a time within arr. However, as you can see the pushed subarrays arr are all pushed holding 5 elements each 5 times. I was expecting the first iteration when i is 0 the subarray arr pushed to the nestedArr to be holding only one element but is holding already 5 same with other subarrays.

[['loop0', 0, 'loop1', 1, 'loop2', 2, 'loop3', 3, 'loop4', 4], ['loop0', 0, 'loop1', 1, 'loop2', 2, 'loop3', 3, 'loop4', 4], ['loop0', 0, 'loop1', 1, 'loop2', 2, 'loop3', 3, 'loop4', 4], ['loop0', 0, 'loop1', 1, 'loop2', 2, 'loop3', 3, 'loop4', 4], ['loop0', 0, 'loop1', 1, 'loop2', 2, 'loop3', 3, 'loop4', 4]]

the expected result should be

[['loop0', 0], ['loop1', 1], ['loop2', 2], ['loop3', 3], ['loop4', 4]]

With each iteration to add one element at the time within subarray arr which is pushed to nestedArr afterwards during the 5 iterations. Any idea to why?

You are pushing, inside nestedArr, a reference of arr and adding items to arr. The result, so, will be an array with 5 references of arr, pointing to the same array in memory (hence the result). For the expected result, just move the arr declaration inside the loop, so that it will be redeclared each time and the reference pushed to nestedArr will always point to a different array in memory (hence 5 different arrays). — briosheje
– briosheje, Commented Dec 18, 2018 at 8:38
That's makes sense @briosheje, didn't think about that was confusing me a lot. Thanks for the feedback! — Alonso
– Alonso, Commented Dec 18, 2018 at 9:15
You're welcome. As a general rule, please keep in mind that all types other than primitives are passed by reference, so array and objects always are passed by reference in javascript. Keep track of your variables and remember that even logs work by reference, so logging your array while looping would still have logged the same every time. — briosheje
– briosheje, Commented Dec 18, 2018 at 9:19

aaaaane · Accepted Answer · 2019-01-31 08:56:25Z

3

You should initialize the array arr everytime the loop starts again:

const nestedArr = [];
for (let i = 0; i < 5; i++) {
  let arr = [];
  arr.push(`loop${i}`, i);
  nestedArr.push(arr);
}
console.log(nestedArr);

edited Jan 31, 2019 at 8:56

answered Dec 18, 2018 at 8:21

aaaaane

1871 silver badge15 bronze badges

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

Comments

Avi · Accepted Answer · 2018-12-18 08:32:33Z

3

Array is an object, hence what you push in final array nestedArr, it actually holds the reference of the sub array (arr in your case). Now since you are pushing the data in the same sub-array arr, reference of it gets updated in the main array everytime and finally when you print the output it conains same object multiple times in the array. To avoid this, you can either use what @Oihane Vázquez suggested or directly push data into the main array like this

const nestedArr = [];
for (let i = 0; i < 5; i++) {
  nestedArr.push([`loop${i}`, i]);
}

console.log(nestedArr);

edited Dec 18, 2018 at 8:32

answered Dec 18, 2018 at 8:26

Avi

2,0811 gold badge11 silver badges21 bronze badges

Comments

Álvaro Touzón · Accepted Answer · 2018-12-18 08:37:56Z

1

you have forgotten to append to arr correctly:

const nestedArr = [];
// ADD CODE HERE
let arr = [];
for(let i=0; i<5; i++){
  arr.push([`loop${i}`, i]);
  nestedArr.push(arr);
  // nestedArr.push([`loop${i}`, i]);
}

console.log(nestedArr)

look i do an array before to push in arr arr.push([loop${i}, i]);

edited Dec 18, 2018 at 8:37

answered Dec 18, 2018 at 8:22

Álvaro Touzón

1,2301 gold badge8 silver badges21 bronze badges

Collectives™ on Stack Overflow

Nested Arrays - updating subarrays while nesting with a for loop doesn't work?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related