JavaScript: Arrays vs Objects

When learning JavaScript, we all stumble across the phrase “Arrays are just Objects in JavaScript”. Today, we’re going to put that statement under the microscope.

investigate

See the Pen typeof Array by Watandeep Sekhon (@idesi) on CodePen.

Looking at the code it is quite obvious that an array is of type object. But, what does that mean?

Follow this link to read about the typeof operator, if you aren’t familiar with it.

Inheritance

In order to understand the difference between objects & arrays, let’s take a quick peek at inheritance in JavaScript. Prototypal inheritance is a big topic on its own & warrants a separate blog post. However, for the purpose of this post, I’m going to keep things extremely basic.

Every object in JavaScript holds a reference to its parent (prototype) object. When a method is called, JavaScript will look for it on the object you’re working with. If not found, it will look at the prototype. It will keep going down the prototype chain until the property is found, or it reaches the root Object.

See the Pen Prototype Example by Watandeep Sekhon (@idesi) on CodePen.

In the example above, a person object is created with an own property called name. When the toString method is called, the person object is first checked, followed by a lookup on its prototype i.e. Object.prototype. The implementation provided by the prototype is used, which has a default behavior of returning [object Object].

Next, toString method is created on the person object itself, which will be used when toString is called from that point on.

Difference between Objects & Arrays

Despite just being objects under the hood, arrays behave very differently from regular objects. The reason is the Array.prototype object, which has all the Array specific methods. Every new array inherits these extra methods from Array.prototype.

Key thing to note is that the value of the prototype property of Array.prototype is Object.prototype. This means two things:

  1. Arrays are just objects but with some extra methods.
  2. There is nothing an object can do that an array can’t.

Let’s take a look at this in action.

See the Pen Array vs Object prototype by Watandeep Sekhon (@idesi) on CodePen.

Oddities

Like everything in JavaScript, Arrays come with their own set of peculiarities.

Non-indexed Properties
Since arrays are just objects in disguise, it is possible to set non-indexed properties on them. This is usually the first thing that catches people by surprise. In the example below, I’ve set two non-indexed properties named sorted & authored by on the groceries array. Note: both dot & bracket notation is supported, just like objects.

See the Pen KgwNxE by Watandeep Sekhon (@idesi) on CodePen.

length
length property of an array is another one which often becomes a source of confusion. It is often misinterpreted as the count of items in the array. However, that isn’t the case. The value of length is numerically greater than the biggest array index. Due to this behaviour, non-indexed properties don’t affect the length of the array, as demonstrated in the code sample above.

Another scenario where length can cause some confusion is when an item is added at an index which is higher than the current length of the array. Notice that in the code sample above, the length of the array jumped from 2 to 10 after I added a third item to the array at the index 9.

Whenever the value of the length property is changed, every element whose index is larger than the new length is deleted.

In order to get the correct length value, you could use Object.keys(groceries).length. Keep in mind, this will include non-indexed properties as well, unless you define them as non-enumerable. Eg: Object.defineProperty(groceries, "sorted", {    value: false,    enumerable: false,    configurable: true,    writable: true });

What should I use?

A general rule of thumb that I try to follow is that if you need to store a collection of properties of varying types, use an object. Otherwise, use an array.