Objects, Arrays, and their working in JavaScript

You must have heard the term "Arrays in JavaScript are not really arrays but objects" weird right?

Let’s take a look at JavaScript’s memory model to help us better understand how JS works under the hood and how objects and arrays are stored in memory.

In JavaScript, memory is divided into two types a heap and a stack.

The heap stores all complex data types like arrays & objects whereas the stack stores simple data types like a small number, string, Boolean & address indexes. Small numbers are numbers whose length is less than 32bits.

To access an object from the heap, we need to first find the associated memory address of this object in the stack. We can then use this address to find the corresponding object in the heap.

Here is an example of a stack and heap working together:

As we have direct access to the variables in the stack reading and writing to it is faster than a heap where we have to search for a memory address before performing any operation. Just how fast you ask? Let's test it out with some code.

Here is the code that we will be using:

This test is performed on Windows/Chrome v106.0.5249.62.

It might not be the most optimal way of testing but is enough to give us a rough idea of the difference in speed. And here are what the results look like:

On running each test 100,000 times we can say that writing to a stack is about 38% faster than compared to a heap 😱.

Now that we have a clear understanding of the memory structure let’s see how objects and arrays are stored inside a heap.

Objects

To store complex data types JS needs a data structure that has high performance for reads, inserts (writes), and deletes.

Arrays are the fastest at reads and subsequent inserts but are slow at inserts and deletes. Linked lists have the fastest inserts and deletes but are inefficient in reads. Tree data structures are complex to build and inefficient to initialize.

Hash Table

This brings us to the Hash table which is a commonly used data structure for storage. A Hash table uses a mapping algorithm to convert an input of any length to an output of a fixed length.

In the case of JS, each property is mapped to a different storage address according to a certain hashing algorithm. To handle any collisions, values mapped to the same address are stored as a linked list where each node stores the key and value, and a pointer to the next node.

As seen in the image the memory space for the linked list is allocated dynamically and it is not contiguous.

This removes the need of having a large contiguous memory block assigned at the beginning which can result in a wastage of memory space if objects do not contain that many properties. It also provides very fast index addition and removal.

This is why JS objects are so flexible and form the basis for almost everything inside the language.

Let's also have a look at Arrays and how they're stored in JavaScript.

Arrays

Internally JS Arrays are stored as objects in the same way a regular Object would be stored but in the case of arrays, the key (index of the property) is automatically incremented as we add items to it.

This makes JS arrays more flexible than arrays in other languages as we just have to add an item to the linked list in order to add a value to our array.

It also allows us to store values of different data types in the same array as it is an object and each entry can be added to the linked list as a new data type.

That's it from my end, would love to hear your thoughts on the article. Also if you found this article interesting give me a follow I keep posting things such as things about the world of JavaScript.