Confusing inspection for sparse arrays

[TimothyGu]

• Version: all supported versions (oldest tested branch is v4.x (4.8.0))
• Platform: all
• Subsystem: util

In the node REPL, sparse elements of an array are shown as "empty":

> new Array(3)
[ , , ]

However, when one copy the resulting [ , , ] and reenter it into the prompt, a different array is shown, thus confusing the developer:

> [ , , ]
[ , ]

How the Chrome inspector deals with this situation is explicitly make the inspected result not compliant JS:

> new Array(3)
[undefined × 3]
> [undefined, , undefined] // to differentiate between a hole and `undefined`
[undefined, undefined × 1, undefined]

Firefox is more upfront:

> new Array(3)
Array [ <3 empty slots> ]
> [undefined, , undefined] // to differentiate between a hole and `undefined`
Array [ undefined, <1 empty slot>, undefined ]

[bnoordhuis]

I agree it's confusing but I think it's correct. Due to the trailing comma, [ , , ] is actually a two-element array, not three:

> new Array(3).length
3
> [ , , ].length
2

[TimothyGu]

Yeah, the REPL is doing its job alright. It's just the inspection is a bit counter-intuitive.

Personally I'm leaning more towards Firefox's approach. It's clear and unambiguous, and I'm worried the Unicode × character used in Chrome's version might not be friendly towards Windows terminals. Substitutes like the letter X might be confusing in themselves.

[aqrln]

@TimothyGu @bnoordhuis what about something like this?

> new Array(3)
[ [3 empty] ]
> [1, 2, , , , 3, 4, 5]
[ 1, 2, [3 empty], 3, 4, 5 ]
> [1, 2, , , , 3, 4, 5, , 2]
[ 1, 2, [3 empty], 3, 4, 5, [1 empty], 2 ]

Screenshot

[TimothyGu]

I'd be okay with that. Personally I'd prefer the [3 empty] to have the same color as undefined just to be consistent, though that's bikeshedding.

[aqrln]

@TimothyGu IMO it's more appropriate to mark it with special style, but ¯\_(ツ)_/¯