How do arrays store empty values - JavaScript

Question

Not too long ago, I discovered that arrays in JavaScript need not contain an ordered set of keys (0-x) to store values within it

and some numeric keys may not be defined (0-4 ... 6-x, where 5 is not defined).

And this creates semantically two types of arrays that are similar:

arrayA = [, ,] (partially-empty arrays or sparse arrays)

arrayB = [undefined, undefined] (filled arrays)

But recently, I was tinkering with JavaScript in the Google Chrome Developer Console and came across this:

Now the second array is like arrayA, and the third like arrayB as shown in the console.

But the first array ([...'🏃🏽‍♀️'])... what is it?

I opened up its directory and saw the elements that were defined as hole were undefined with their respective keys in the array.

I also ran a few types of JavaScript loops on the array:

for...in statement captures all elements, except the *hole*s.
for...of statement captures all elements, except the *hole*s and proceeds to throw an error that the iterator variable used is undefined i.e.:

for (var value of [...'🏃🏽‍♀️']) console.log(value);

// Throw 'ReferenceError' when loop is done.
Array.prototype.forEach method captures all elements, except the *hole*s.
do...while, for and while statements captures all elements, except the *hole*s.

Why does the console see those values as different from empty or undefined (as with arrayA and arrayB)?

The main question is: Is there implicitly another type of array and if so, is there anything to note about it?

Our_Benefactors · Accepted Answer

Emojis are made up of a variety of elements which the browser renders as a single emoji. Here's a quick article that expands on that. https://til.hashrocket.com/posts/2f488279a3-expand-emojis-with-the-spread-operator

By applying the spread syntax to an emoji, you can look at the individual emojis it's composed of.

Answers (1)