Programming Programming Knowledge

Objects and Arrays | Mysterious behavior of Arrays in JavaScript

December 11, 2018
Objects and Arrays (Part - 2)

In JavaScript, Arrays are not what you think it is! In JavaScript array is not accually an array! 

Before I say anything, let’s take a look at this code

As you can see that, in this code segment person is an array. And then we assign a value to a property of person array, as we used to do it with objects. How is this possible? In normal sense, an array shouldn’t be working as an object! right?

Is person an array or an Object?

Is person an array or an Object?

 

Believe it or not. I also thought it is wrong. but when I ran it in the console I saw that person array is working as an object! How is this possible? So, does this mean, there is no array? or is it an object? So to be sure about this, I ran the last line of the code segment. It was kind of a moment of truth for me too!

Array is an object

An array is an object

So in JS array is an object. It’s not an array like we used to see! The whole thing is a sham! There is no array. People have been lying to us from the beginning. It’s just a special type of object that has some method attached to it by default. like push() or pop() or length etc.

So the next question is if this is a kind of an object, why we are using ‘[]’ bracket notation when we are storing a value in an array? Why we write this code instead of the second one?

Turns out that, when we write code in a first way, internally JS actually stringify the 0 and store it as “0”. Despite we should have been able to write in a second way. it’s actually syntax error. Nothing else. Otherwise, there is no other problem! That’s why we use brackets. So when should we use brackets? When the property of the array (special kind of object!) is a number. And when it is a string we can either use dot notation or bracket notation.

when should we use bracket

Use of bracket in an array

In this picture, we can see that we can either store a data inside an array using “[]” bracket notation and also access it using dot notation. They work in the same way. except when we need an array whose index value should be number, only that time we have to use bracket notation.

Btw remember that in the code when I wrote person[‘text’] I enclosed key text inside a quotation mark. It is necessary. Because by default JS compiler expects that a variable named text is already inside the array if you don’t put it in the quotation mark, then you will get an error saying “Uncaught reference error: text is not defined at …” 

One another interesting thing is if we save data inside an array while the index value is not a number then the length property will not be correct. If you don’t believe me, write the above code then check the length property by yourself. You will see that the length is 1, although it should be 2. one is 0 and the other one is ‘text’. Also, you can take it to the next level by storing multiple values where the key or index-part is string type. But, you will still see that array.length value is not changed. I used to check if the array has any contents by checking the length property of that array. Never doing it again!!

 

Lesson learned:

  • An array is a special kind of object that has some methods attached to it.
  • We can store a value using dot notation or bracket notation. Unless the array index is a number type
  • Never use array.length to check if the array is empty or not. It doesn’t give actual value always.

Before ending this post I want to show you a picture. And you’ll have to tell me why the person.length is showing 11 when we can clearly see that there is no other value inside the array.

Why person.length shows 11?

Why person.length shows 11?

You can comment on this post and tell me exactly why this is happening. If you like this post or if you believe that you have learned something new, share it with others.

You Might Also Like

No Comments

Leave a Reply