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?

Hi, @hayden, will you add to array additionally?

Eric
– Eric

2018-09-18 23:39:25 +00:00
Commented Sep 18, 2018 at 23:39 — Eric
– Eric, Commented Sep 18, 2018 at 23:39

CertainPerformance · Accepted Answer · 2018-09-18 23:47:16Z

9

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.

edited Sep 18, 2018 at 23:47

answered Sep 18, 2018 at 23:41

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Hayden Over a year ago

You said the for...in loop iterates over all properties of an object, included inherited ones, but aren't most methods and properties that are inherited non-enumerable? And then, does that make the numerical-indexed keys properties?

CertainPerformance Over a year ago

For arrays, yes. It has many methods inherited from its prototype (like .forEach, .join) and it also inherits from Object, which gives methods like .hasOwnProperty, .valueOf. But all of these are non-enumerable. On a normal array, it has no enumerable properties by default - the only enumerable properties it will have are array indicies, or arbitrary properties that happen to get assigned to (not a good idea).

Fábio Peres Toi · Accepted Answer · 2018-09-18 23:52:36Z

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.

Collectives™ on Stack Overflow

How can JavaScript arrays have non-numeric keys?

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related