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

Answer 1

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.

Answer 2

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.