How arrays work internally in JS

In this blog I will tell you how arrays work in JavaScript internally. Let’s start.

Array types and subcategories

So first we know how many types of arrays exist in JS internally.
There are two types of arrays.
1.PACKED
When arrays are in continuous series and don't have any empty blocks of memory.

const nums = [1,2,3,4]; 

2.HOLEY
When array is not in continuous form and have some empty blocks of memory

const nums = [1,2,3,4];
nums[6] = 10;
// [ 1, 2, 3, 4, <2 empty items>, 10] output

But wait where is 4 and 5 index items there is empty memory block so it become HOLEY array.

Sub categories

Now we know arrays are two types PACKED and HOLEY. Now we talk about their sub categories each type as three categories -

1. SMI (small integer)
2. Double (decimal values)
3. Elements (object function etc.)
   Now we understand these types and their categories with example

1. PACKED type

const nums = [1,2,3,4]; 
// PACKED_SMI

arrays internally identify this array age PACKED_SMI. Now we change our array

nums.push(5.5);
// PACKED_DOUBLE 

Now our array downgrade to PACKED_DOUBLE but if we want to upgrade it to PACKED_SMI we can't do this. Now we change our array again.

nums.push("hello");
// PACKED_ELEMENTS

Analyze which category is fast

PACKED_SMI > PACKED_DOUBLE > PACKED_ELEMENTS

So, our PACKED_SMI is fastest and PACKED_ELEMENTS is slowest in PACKED type

2. HOLEY type

Now we understand PACKED type and its sub categories now we talk our second type HOLEY type

const nums = [1,2,3,4];
// PACKED_SMI
nums[6] = 10;
// HOLEY_SMI

Now our array become HOLEY_SMI because we have empty block of memory at index 4 and 5 Now we change our array again

nums.push(5.5);
// HOLEY_DOUBLE

now our array become Holey_Double because we have put decimal value in our array Now we change our array again

nums.push("hello");
// HOLEY_ELEMENTS

Now our array become HOLEY_ELEMENTS and it is slowest. Analyze which category is fast

HOLEY_SMI > HOLEY_DOUBLE > HOLEY_ELEMENTS
So, our HOLEY_SMI is fastest and HOLEY_ELEMENTS is slowest in HOLEY type

Our PACKED array and it's sub categories always fast to HOLEY array and it's sub categories.

Why does HOLEY array slow

Now we are talking why does HOLEY array slow. so first we learn how arrays work and how they find an element? When we access an element in array there are some steps behind the scene.

1. Bound check
   In this step our array check given index is in our array range or not. if not, it gives undefined value and doesn't go to next step. if it is in range it goes to next step.
2. Check in array properties
   If first step passes successfully our array check that value is exist in his property or not.

hasOwnProperty(arr,property)
// Note: - chill guys hasOwnProperty only take one parameter(property) but here I am using two parameters for understanding purpose

If found it return the value and stop here else go to next step.
3.Check in array prototype
If value is not found in array, next our array check that property in array prototype

hasOwnProperty(arr.prototype,property);

If found it return the value and stop here else go to next step.
4.Check in object prototype
if value is not found in third step our array check that value in object prototype because everyone comes from object.

hasOwnProperty(object.prototype,property);

So, these four steps done in HOLEY array and 'hasOwnProperty' is one of the slowest property in JavaScript. So, our Holy becomes slow.

Some real world examples

Sometimes we can create an array using Array object and it give us a HOLEY array. Because in initial stage there is empty blocks of memory

const nums = new Array(5);
console.log(nums);
// [ <5 empty items> ]

We create an array of size of 5 but don't give any value so it automatically become a HOLEY array. So instead of this we use this code.

const nums = [];

It gives us a PACKED_SMI array so it is much faster than previous example.

Conclusion

I hope you will be understood about arrays internal mechanism. How arrays work internally in Js? If you have some doubt, you can watch this video of Hitesh Choudhary that is a very experience developer and instructor.
Watch on YouTube.