How are JavaScript arrays represented in physical memory?

Understanding JavaScript Array Memory Representation

Explore how JavaScript arrays, being dynamic and weakly-typed, are structured and stored in physical memory, and the implications for performance.

JavaScript arrays are fundamental data structures, but their dynamic and weakly-typed nature often leads to questions about their underlying memory representation. Unlike statically-typed languages where array elements occupy contiguous memory blocks of a fixed size, JavaScript's approach is more nuanced. This article delves into how JavaScript engines (like V8 in Chrome and Node.js) manage arrays in physical memory, highlighting the trade-offs and optimizations involved.

The Dynamic Nature of JavaScript Arrays

JavaScript arrays are objects, not true arrays in the C/C++ sense. They are dynamic, meaning their size can change at runtime, and they are weakly-typed, allowing elements of different data types to coexist within the same array. This flexibility comes at a cost: the engine cannot simply allocate a contiguous block of memory for fixed-size elements. Instead, it employs more complex strategies.

graph TD
    A[JavaScript Array Object] --> B{Internal Properties}
    A --> C{Elements Storage}
    B --> D["Length (dynamic)"]
    B --> E["Prototype Chain"]
    C --> F["Indexed Properties (elements)"]
    C --> G["Named Properties (e.g., array.name)"]
    F --> H["Pointer to Value 1"]
    F --> I["Pointer to Value 2"]
    F --> J["Pointer to Value N"]
    H --> K["Actual Value 1 (e.g., Number)"]
    I --> L["Actual Value 2 (e.g., String)"]
    J --> M["Actual Value N (e.g., Object)"]

Conceptual structure of a JavaScript array in memory

At a high level, a JavaScript array is an object that primarily stores two things: its internal properties (like length) and its elements. The elements themselves are not stored directly within a contiguous block of memory associated with the array object. Instead, the array object holds references (pointers) to where the actual values are stored in memory. This allows for heterogeneous types and dynamic resizing without needing to reallocate and copy the entire array every time an element is added or removed.

V8 Engine's Optimization Strategies

Modern JavaScript engines like V8 implement sophisticated optimizations to make arrays performant despite their dynamic nature. V8 categorizes arrays into different 'elements kinds' based on their contents to optimize storage and access. This is a crucial aspect of how arrays are represented in memory.

flowchart LR
    subgraph Array Elements Kinds (V8)
        A[Packed Smi] --> B[Packed Double] --> C[Packed Element]
        D[Holey Smi] --> E[Holey Double] --> F[Holey Element]
    end

    A -- "All small integers" --> G["Contiguous, unboxed Smi values"]
    B -- "All floating-point numbers" --> H["Contiguous, unboxed Double values"]
    C -- "Mixed types, no holes" --> I["Contiguous, boxed pointers to values"]
    D -- "Small integers, with holes" --> J["Sparse, unboxed Smi values"]
    E -- "Floating-point, with holes" --> K["Sparse, unboxed Double values"]
    F -- "Mixed types, with holes" --> L["Sparse, boxed pointers to values"]

    G,H,I,J,K,L -- "Performance Impact" --> M["Faster access for packed/unboxed, slower for sparse/boxed"]

V8's array elements kinds and their memory implications

Packed vs. Holey Arrays

• Packed Arrays: These arrays have no 'holes' (undefined or empty slots). V8 can store their elements contiguously, leading to faster iteration and access.
• Holey Arrays: These arrays contain 'holes', often created by deleting elements or initializing an array with a specific length (e.g., new Array(10)). Holey arrays require more complex memory management, often using hash tables or sparse arrays internally, which can be slower to access.

Specific Element Kinds

• PACKED_SMI_ELEMENTS: Contains only small integers (SMI - Small Integer). These can be stored directly (unboxed) in a contiguous block, offering C-like array performance.
• PACKED_DOUBLE_ELEMENTS: Contains only floating-point numbers. These are also stored unboxed and contiguously.
• PACKED_ELEMENTS: Contains a mix of types (objects, strings, booleans, large numbers) but no holes. Elements are stored as pointers to their actual values.
• HOLEY_SMI_ELEMENTS, HOLEY_DOUBLE_ELEMENTS, HOLEY_ELEMENTS: These are the 'holey' versions of the above, indicating the presence of empty slots, which generally leads to less optimized memory layouts and slower access.

Memory Allocation and Garbage Collection

When an array is created or resized, the JavaScript engine allocates memory from the heap. For packed arrays, it might allocate a new, larger contiguous block and copy existing elements. For sparse or holey arrays, it might update pointers in a hash map-like structure. When elements are no longer referenced, they become candidates for garbage collection, which reclaims memory. This automatic memory management simplifies development but can introduce performance overhead if not managed carefully.

// Example of a packed array (optimized)
const packedArray = [1, 2, 3, 4]; // PACKED_SMI_ELEMENTS

// Example of a holey array (less optimized)
const holeyArray = new Array(5); // HOLEY_ELEMENTS initially, then HOLEY_SMI_ELEMENTS if only SMIs are added
holeyArray[0] = 10;
holeyArray[4] = 20;

// Example of type transition
const mixedArray = [1, 2, 3]; // PACKED_SMI_ELEMENTS
mixedArray.push('hello'); // Transitions to PACKED_ELEMENTS
mixedArray[10] = 5; // Transitions to HOLEY_ELEMENTS

console.log(packedArray);
console.log(holeyArray);
console.log(mixedArray);

Demonstrating array types and transitions in JavaScript