Demystifying JavaScript Array Internals ??

Arrays are a fundamental data structure in JavaScript. Behind the scenes, V8 - Google's JavaScript engine - optimizes arrays in two main ways:

1. Contiguous arrays
2. Holey arrays

?? Contiguous Arrays: For densely populated arrays without undefined elements, V8's magic comes alive. Elements are stored consecutively, leading to faster access, efficient memory usage, and cache-friendly performance. ??

This provides several benefits:

• Faster access - Since elements are contiguous, accessing an element by index is fast.
• Cache friendliness - Contiguous elements are more cache friendly since they are loaded into the CPU cache together.
• Memory efficiency - No space is wasted storing undefined values.

V8 uses this representation when:

• All elements are initialized
• There are no undefined elements

For example:

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

This array will be stored as a contiguous array

Contagious Array is further divided into different types based on what data is and where it is in the array.

• PACKED SMI (SMALL INT)

const array=[1,2,3,4]        

• PACKED DOUBLE(double,float,string)

const array=[1,2,3,4,6.0,]        

• PACKED ELEMENTS

const array=[1,2,3,4,6.0,'a']        

PACKED_SMI >>> PACKED_DOUBLE >> PACKED_ELEMENTS

Holey Arrays

??? Holey Arrays: When your array has undefined elements, V8 resorts to holey arrays. Elements aren't stored contiguously, and "holes" represent the undefined elements. Accessing elements may be a tad slower than contiguous arrays. This means:

• Elements are not necessarily stored contiguously
• undefined elements are represented by "holes" in the array

This allows V8 to:

• Only allocate memory for initialized elements
• Still provide O(1) access by index

For example:

  const arr = [1, <3 empty items>, 3];        

This array will be stored as a holey array, with the undefined element represented as a hole.

When accessing elements by index, V8 must check for holes and return undefined appropriately. This makes accessing elements slightly slower than in contiguous arrays.

HOLES ARE VERY VERY EXPENSIVE IN JS

Holey array is categorised in further types as

• HOLEY SMI (SMALL INT)

const array=[1,2,3,<1 empty value>,4]        

• HOLEY DOUBLE(double,float,string)

const array=[1,2,3,<1 empty value>,4,6.0,]        

• HOLEY ELEMENTS

const array=[1,2,3,<1 empty value>,4,6.0,'a']        

HOLEY_SMI >>> HOLEY_DOUBLE >> HOLEY_ELEMENTS

Optimization

? Optimization: V8 continuously fine-tunes arrays based on their usage. As arrays transition from holey to contiguous, V8 works its magic to optimize the representation.

?? Pro Tip: Leverage built-in JavaScript methods like .map and .filter for top-notch performance. The JavaScript engine knows best! ??