How can JavaScript arrays have non-numeric keys?

Question

What I have learned is an array is a type of object. Objects are a collection of properties with key/value pairs. I always thought arrays are a collection of items that are numerically indexed starting at 0. Just recently, I was able to add a non-numeric key to an array.

let arr = ['cribriform plate','mastoid','hyoid'];
arr.eyes = 'brown';
arr.skin = 'white';

That resulted in

['cribriform plate','mastoid','hyoid',eyes : 'brown', skin : 'white'];

The for...in loop of arr yielded:

for(let i in arr){
    console.log(i);
    //0,1,2,3,eyes,skin
}

The for...of loop yielded:

for(let i of arr){
     console.log(i);
     //0,1,2,3
}

I was able to iterate over all the keys of an array using the for...in loop. However, when I used the for...of loop, I was only able to iterate over the numerically indexed keys. Why is that?

And, what is the most accurate definition of an array?

Answer 1

With a for..of loop, the object's Symbol.iterator property is called. In the case of an array, this is equivalent to the array's .values() method, which contains the values for each index in the array. Non-numeric properties are not included - arrays generally don't have arbitrary non-numeric properties, and code that does assign arbitrary non-numeric properties to an array is likely in need of refactoring.

A for..in loop iterates over all enumerable properties on an object, including those inherited from the prototype. Thus, for..of on an array will exclude non-numeric properties on an array that a for..in loop will include.

Arrays, being objects, can have arbitrary properties assigned to them, for the most part, just like properties can be assigned to ordinary functions - it's just not a very good idea.

Answer 2

Arrays are a type of objects in javascript. When you do something like arr.skin = 'white';, you're basically setting a variable to the array's object property collection. That's why you can access it with in for...of, which iterates over the enumerable properties of the object.

However, since this new property is not part of the array's list of elements, it cannot be accessed through for...in

Taken from MDN web docs for Arrays:

Setting or accessing via non-integers using bracket notation (or dot notation) will not set or retrieve an element from the array list itself, but will set or access a variable associated with that array's object property collection. The array's object properties and list of array elements are separate, and the array's traversal and mutation operations cannot be applied to these named properties.