Deep Dive into JavaScript Array Implementation in V8 Engine

This article explores the underlying implementation of JavaScript arrays in the V8 engine, revealing how JavaScript achieves its unique array characteristics that differ from traditional data structure arrays.

The article begins by explaining the traditional array definition from data structures: continuous memory and homogeneous data types . In languages like C, C++, Java, and Scala, arrays are implemented by allocating a continuous, fixed-length memory space to store a finite number of identical data types.

JavaScript arrays, however, exhibit remarkable differences: they can store elements of different types (numbers, strings, booleans, objects, functions, etc.), support dynamic length changes, and provide rich built-in methods like push(), pop(), shift(), and various manipulation functions.

Through V8 source code analysis, the article reveals that JavaScript arrays are implemented with two distinct storage mechanisms:

1. Fast Arrays (FAST ELEMENTS) : Use contiguous memory (FixedArray) with dynamic capacity adjustment. New empty arrays default to Fast Elements mode. When elements are added, the array expands by 1.5 times plus 16 elements (new_capacity = old_capacity * 1.5 + 16). When space is underutilized (capacity >= length * 2 + 16), the array contracts. There are two variants: Fast Elements (PACKED_SMI_ELEMENTS) for fully populated arrays, and Fast Holey Elements (HOLEY_SMI_ELEMENTS) for arrays with sparse indices.

2. Slow Arrays (DICTIONARY ELEMENTS) : Use a HashTable-based structure, allocating scattered memory space. This approach saves memory but offers slower traversal performance compared to fast arrays.

Conversion between Fast and Slow Arrays :

Fast → Slow : Occurs when new capacity >= 3 * expanded capacity * 2, or when the gap between the current capacity and the assigned index exceeds kMaxGap (1024), creating more than 1024 holes.

Slow → Fast : When the hash table can be stored in a fast array and only saves 50% space, V8's heuristic algorithm converts it back to fast array mode.

The article concludes that JavaScript arrays appear different from traditional arrays, but this is merely a V8 implementation detail that optimizes performance through space-time tradeoffs. Understanding these internals helps developers write more efficient code.

Additionally, the article introduces ArrayBuffer (ES6), which allows manual allocation of contiguous memory that requires views (like Int32Array) for manipulation.