What exactly is the length property in an array and why arr[2] is undefined in [10,20, , ,50] in javascript?
By: Praveen Kumar
Tags: Javascript Development, Javascript Tips, JavaScript, Programming, Arrays

Photo by Irvan Smith on Unsplash

In this article, we will understand what exactly is length property and Why arr[2] is undefined in [10,20, , , 50] in javascript? Most of us, I mean javascript developer thinks they know why arr[2] is undefined in [10,20,,,50]. Not just arr[2], It includes other not defined value i.e arr[2], arr[3] and arr[4]. But they don’t. They usually think that if we do not specify a value in an array then by default it gets an undefined value. But that is not so true. It's not that they don’t want to learn what is going on here instead they just think that it just not important or there could be a reason that they have been told that if we don’t assign a value to a variable then it gets undefined. Yes, that is true in the case of primitive but why it is not in the case of objects (an array is also an object). Let's dive deep inside.

let's say we have an array

The output we will get is

The thing to note is that the output of arr is 10, 20, 2*empty slots, 50. More interesting things come into the picture when we expand the output of that array(arr in our case).

It represents 3 important conclusions:

1) Array is an object(which we all know) and here key represents the index from which we access its value i.e if we access arr[index] then it will return the value of the property (index) of an object(arr).

2) Array object has a special property length which most of us think that it gonna tell us how many elements does this array has or some of us could say it represents how many properties does this array object has. but from the above image, it is clear that it only contains 3 elements and a special property length. But length is nothing just larger integer subscript + 1.

3) If we do not assign value to an array or if we add empty slots then that array object does increment the length of the array but it doesn’t add any value to that particular index or key.

when we say arr[2] then the object performs some checks to return the correct value:

1) It searches inside its properties. If the property exists then it returns that property. If it doesn’t exist then go to step 2.

2) Object looks in its prototype. If it finds there then it returns that value of that property. If still, the property doesn’t exist in its prototype then again repeat 2. This loop continues until the prototype of an object is null.

3) At last undefined is returned.

This is How an object searches property in its prototype chain

when we ask for arr[2] then the array object(arr) searches for property or key ‘2’ inside of it. As it is not available in an array object then it delegates search in its prototype. The property doesn’t exist in the prototype chain, so it will return undefined.

Hope you understand why arr[2] is undefined.

Now, what happens if intentionally someone adds a property in the prototype of an array object.

Here comes the interesting part. What if someone assigns property in Array.prototype i.e Array.prototype[“2”] = “Praveen Kumar”

What the heck is going on here?

You’re expecting arr[2] to be undefined but it is not. It is because when we search arr[2] in our array object then it does not exist, so it delegates search to its prototype. Array.prototype does have a property (‘2’ in our case). So it returns its value.

Hope you learn something from this article. Thank you so much for reading this article.