0

I've encountered a problem that is wired for me as a beginner javascript coder.

here is my console when I try to log count variable that is an array of arrays:

enter image description here

As I want to remove the empty arrays inside count I added this line of code just above the count log like this:

 count = count.filter(e => e.length);
 console.log(count);

I saw no difference so I tried to log the count in a different way:

count = count.filter(e => e.length);
console.log("count: "+ count);

This time I can see something wired! the count logs with other values! (Iknow these values but I don't know where are they in the first log and why the filter doesn't work)

enter image description here

Please help I'm confused. how I can remove empty arrays on count?

The desired result would be:

enter image description here

Sara Ree
  • 3,417
  • 12
  • 48
  • 2
    It appears that what you see in the console is the *current* contents of the array, not the contents when it was printed. Try logging with `console.log(JSON.parse(JSON.stringify(count)))` and this will give you a copy of the array at the time of logging it, the copy will not be changed with the other array. – VLAZ Nov 02 '19 at 16:03
  • And thus it depends on where within your code you are trying to do this filter. Issue seems to be with asynchronous code and you haven't shown enough context – charlietfl Nov 02 '19 at 16:04
  • No need for JSON here, arrays already have a built-in copy function called `slice` so if you want to print an array "as it is when you log it", use `console.log(array.slice())`. Also, the first block of code works perfectly fine, as can be demonstrated by running in the console. What (pared down) code do you _really_ have? – Mike 'Pomax' Kamermans Nov 02 '19 at 16:05
  • @VLAZ thanks now I can see all the values in my console... I lost my trust on `console.log` by the way :) – Sara Ree Nov 02 '19 at 16:06
  • @Mike'Pomax'Kamermans `slice` will do a shallow copy only. And since the array contains other arrays, that is *still* going to be wrong after one of those changes, as is the case here. Sure, you can do one level deep clone via `map` -> `slice` or even a recursive one to handle any array depth but `stringify` -> `parse` 1. is simpler 2. doesn't require you to think about depth 3. works with any object, not just arrays. Sure, it's not perfect but most of the time it's what you want to just see the values logged. – VLAZ Nov 02 '19 at 16:17
  • That's interesting, I wasn't able to reproduce it on Chrome 78.0.3904.87, OP's initial solution works just fine there. @SaraRee could you please tell what version of Chrome you are using? I'm curious now. – bdbdbd Nov 02 '19 at 16:27
  • 1
    @bdbdbd chrome 78.0.39.04.70 – Sara Ree Nov 02 '19 at 16:28
  • @bdbdbd the modification of the object has to happen *after* logging it. [check here](https://jsbin.com/qemepasuti/edit?js,console) and open the browser console. If you expand the array to view it, you'll see exactly the same behaviour as the first screenshot - it shows `[Array(2), Array(1)]` (array with two elements - one is an array with 2 elements, the other an array with 1 element) but if you expand expand the array, you'll see one with two elements and another one with no elements in it. – VLAZ Nov 02 '19 at 16:47
  • @VLAZ that's so wonky! Thanks for sharing this – bdbdbd Nov 02 '19 at 16:49

0 Answers0