Javascript Array changes value when I push it onto another array

Question

There's a strange thing happening in my code that I don't know the reason for.

I have 2 arrays. One is a very large array (40,000 elements long) and one is an empty array.

I want to push the large array onto the empty array like so:

emptyArray.push(largeArray);

This works as expected for the most part.... but some of the large Arrays values just vanish when I do the push. If before it was:

largeArray = [0, 1, 2, 3, 4, 5, ..... ,40000];

Now when I console.log it, it shows:

largeArray = [0,1,3,4,5,....,40000];

The 2 is just gone. I double checked that the 2 was there prior to the push by using breakpoints and sure enough before the array gets pushed all it's values are there. When the array is pushed however, some just vanish.

Any ideas? I tested my project on firefox and chrome, both show the same behavior. Also this is just normal javascript arrays, not typed arrays or anything.

Edit:

Some people in the comments asked for more details behind the code. So this is a more through explanation.

I'm drawing an image on a canvas, then I get the image data. I only want to work with the red channel so I make a new array like so:

var imgData = ctx.getImageData(0, 0, width, height);

  var imgDataRed = [];
  for (i = 0; i < imgData .length; i+=4) {
          imgDataRed[i] = imgPixels[i / 4];
  }

I then want to push this imgDataRed array onto an empty storage array. So I run:

var storageArr = [];
storageArr.push(imgDataRed);

Hope that helps.

you can use the imgDataRed.slice() method to get the data into another array easily — Selaka Nanayakkara, Dec 10 '17 at 13:02
a reference to `imgDataRed` is pushed in `storageArr`, so any changes to `imgDataRed` are also in `storageArr`. If you just need a copy of the first quarter of `imgPixels`, you can use something like `imgDataRed = imgPixels.slice(0, imgPixels.length / 4)` — Slai, Dec 10 '17 at 13:10

score 0 · Answer 1 · answered Dec 10 '17 at 14:07

If you're working with big arrays, you should be looking at a library like immutable.js.

Here's a for example:

const { List } = require('immutable');

var arr1 = [];

for(var i=0; i<40000; i++){
    arr1.push(i);
}

var list1 = List(arr1);


console.log(list1.count());   // outputs 40000

Javascript Array changes value when I push it onto another array

Edit:

1 Answers1