Optimizing JS Object Creation for V8 Engine

// V8 tracks constructors and pre-allocates slots
class Particle {
  constructor(x, y, vx, vy) {
    // V8 creates hidden class with 6 in-object slots after slack tracking
    this.x = x;
    this.y = y;
    this.vx = vx;
    this.vy = vy;
    this.mass = 1.0;
    this.alive = true;
  }
 
  update(dt) {
    this.x += this.vx * dt;
    this.y += this.vy * dt;
  }
}
 
// After ~7 instances, V8 finalizes the hidden class layout
// All subsequent Particle instances share one hidden class
// and have all 6 properties as in-object properties
 
// ANTI-PATTERN: Adding properties outside the constructor
class BadParticle {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
 
  init() {
    // These properties are added after construction
    // They may spill to the out-of-object backing store
    this.vx = 0;
    this.vy = 0;
    this.mass = 1.0;
    this.alive = true;
  }
}
 
// FIX: Define everything in the constructor
class GoodParticle {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.vx = 0;      // Default in constructor
    this.vy = 0;       // Default in constructor
    this.mass = 1.0;   // Default in constructor
    this.alive = true; // Default in constructor
  }
}
 
// BENCHMARK: 1 million particle creations
// GoodParticle: ~45ms (all in-object)
// BadParticle:  ~85ms (out-of-object spillover)

// Classes and factory functions have different optimization profiles
 
// CLASS: V8 pre-allocates slots, shares hidden class across instances
class Vector3 {
  constructor(x, y, z) {
    this.x = x;
    this.y = y;
    this.z = z;
  }
 
  length() {
    return Math.sqrt(this.x * this.x + this.y * this.y + this.z * this.z);
  }
 
  add(other) {
    return new Vector3(this.x + other.x, this.y + other.y, this.z + other.z);
  }
}
 
// FACTORY: Returns plain object, methods duplicated per instance
function createVector3(x, y, z) {
  return {
    x, y, z,
    length() {
      return Math.sqrt(this.x * this.x + this.y * this.y + this.z * this.z);
    },
    add(other) {
      return createVector3(this.x + other.x, this.y + other.y, this.z + other.z);
    },
  };
}
 
// ANALYSIS:
// Class advantages:
// - Methods on prototype (shared memory, not duplicated)
// - V8 pre-allocates in-object slots via slack tracking
// - instanceof works
// - Established hidden class transition from constructor
//
// Factory advantages:
// - No 'new' keyword required
// - True encapsulation with closures
// - No prototype chain lookup for methods
//
// MEMORY: 1000 instances
// Class: 1000 objects (data only) + 1 prototype (methods)
// Factory: 1000 objects (data + methods) -- methods duplicated
 
// OPTIMIZED FACTORY: Separate prototype manually
const vectorProto = {
  length() {
    return Math.sqrt(this.x * this.x + this.y * this.y + this.z * this.z);
  },
  add(other) {
    return createOptVector(this.x + other.x, this.y + other.y, this.z + other.z);
  },
};
 
function createOptVector(x, y, z) {
  const v = Object.create(vectorProto);
  v.x = x;
  v.y = y;
  v.z = z;
  return v;
}
// Methods shared via prototype, but still uses factory pattern

// Object pooling reuses objects to reduce GC pressure
// Critical for high-frequency allocations (games, animations)
 
class ObjectPool {
  #factory;
  #reset;
  #pool = [];
  #active = 0;
  #maxSize;
 
  constructor(factory, reset, initialSize = 100, maxSize = 10000) {
    this.#factory = factory;
    this.#reset = reset;
    this.#maxSize = maxSize;
 
    // Pre-allocate initial objects
    for (let i = 0; i < initialSize; i++) {
      this.#pool.push(factory());
    }
  }
 
  acquire() {
    let obj;
    if (this.#pool.length > 0) {
      obj = this.#pool.pop();
    } else {
      obj = this.#factory();
    }
    this.#active++;
    return obj;
  }
 
  release(obj) {
    if (this.#pool.length < this.#maxSize) {
      this.#reset(obj);
      this.#pool.push(obj);
    }
    this.#active--;
  }
 
  getStats() {
    return {
      pooled: this.#pool.length,
      active: this.#active,
      total: this.#pool.length + this.#active,
    };
  }
 
  drain() {
    this.#pool.length = 0;
  }
}
 
// Usage: Particle pool for a game engine
const particlePool = new ObjectPool(
  // Factory: create with all properties initialized
  () => ({ x: 0, y: 0, vx: 0, vy: 0, life: 0, color: 0, size: 0, active: false }),
  // Reset: restore to default state (reuses same hidden class)
  (p) => { p.x = 0; p.y = 0; p.vx = 0; p.vy = 0; p.life = 0; p.color = 0; p.size = 0; p.active = false; },
  1000, // Initial pool size
  50000 // Maximum pool size
);
 
function spawnParticle(x, y, vx, vy, color) {
  const p = particlePool.acquire();
  p.x = x;
  p.y = y;
  p.vx = vx;
  p.vy = vy;
  p.color = color;
  p.life = 1.0;
  p.active = true;
  return p;
}
 
function killParticle(p) {
  p.active = false;
  particlePool.release(p);
}
 
// Without pooling: ~50,000 GC pauses per minute
// With pooling: ~0 GC pauses (objects recycled)

// V8 stores object data in specific memory layouts
// Understanding this helps minimize memory waste
 
// STRUCTURE OF A JS OBJECT IN V8 MEMORY
// ┌─────────────────────────────┐
// │ Map pointer (hidden class)  │ 8 bytes
// │ Properties pointer          │ 8 bytes (or inline)
// │ Elements pointer            │ 8 bytes (for indexed props)
// │ In-object property 1        │ 8 bytes (tagged value)
// │ In-object property 2        │ 8 bytes
// │ ...                         │
// └─────────────────────────────┘
// Minimum object size: 32 bytes (header + padding)
 
// TAGGED VALUES: V8 uses pointer tagging
// - Smi (Small Integer): stored inline, no heap allocation
//   Bit pattern: value << 1 | 0 (last bit = 0 means Smi)
// - HeapObject pointer: last bit = 1 (pointer to heap)
//
// Smi range: -2^30 to 2^30 - 1 (on 32-bit) or -2^31 to 2^31 - 1
 
// OPTIMIZATION: Keep numbers in Smi range when possible
// GOOD: Smi (stored inline, no allocation)
const count = 42;      // Smi: fits in pointer, no heap object
const index = 1000;    // Smi: fits in pointer
 
// LESS OPTIMAL: HeapNumber (heap allocated)
const ratio = 3.14;    // HeapNumber: allocated on heap
const big = 2 ** 31;   // HeapNumber: exceeds Smi range
 
// ARRAY MEMORY LAYOUT
// V8 uses different backing stores for arrays:
 
// PACKED_SMI_ELEMENTS (most compact)
const smiArray = [1, 2, 3, 4, 5];
// Stored as raw Smis, no boxing overhead
 
// PACKED_DOUBLE_ELEMENTS (unboxed doubles)
const doubleArray = [1.1, 2.2, 3.3];
// Stored as raw IEEE 754 doubles (8 bytes each, no wrapper objects)
 
// PACKED_ELEMENTS (generic, boxed)
const mixedArray = [1, "two", { three: 3 }];
// Each element is a tagged pointer, requires boxing for numbers
 
// STRUCT-OF-ARRAYS pattern for better memory layout
// BAD: Array of objects (scattered memory)
const particles = [];
for (let i = 0; i < 10000; i++) {
  particles.push({ x: 0, y: 0, vx: 0, vy: 0 });
}
// Each particle is a separate heap object with header overhead
 
// GOOD: Parallel typed arrays (contiguous memory)
const particleX = new Float64Array(10000);
const particleY = new Float64Array(10000);
const particleVX = new Float64Array(10000);
const particleVY = new Float64Array(10000);
// 70-80% less memory, better cache locality, SIMD-friendly

// Prototype chain depth affects property lookup speed
 
// SHALLOW CHAIN (fast): 1 level of prototype
class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() { return `${this.name} makes a sound`; }
}
 
const dog = new Animal("Rex");
dog.speak(); // Found on Animal.prototype (1 hop)
 
// DEEP CHAIN (slower): Many levels
class LivingThing {
  exist() { return true; }
}
class Organism extends LivingThing {
  grow() { return true; }
}
class Creature extends Organism {
  move() { return true; }
}
class Beast extends Creature {
  hunt() { return true; }
}
class Predator extends Beast {
  stalk() { return true; }
}
 
const tiger = new Predator();
tiger.exist(); // Found after 5 prototype hops
 
// V8 mitigates this with inline caches:
// After first access, V8 caches the prototype chain lookup result
// Subsequent calls skip the chain walk entirely
// BUT: Changes to any prototype in the chain invalidate the cache
 
// ANTI-PATTERN: Modifying prototypes at runtime
Animal.prototype.newMethod = function () { return "added later"; };
// This invalidates ALL inline caches for Animal instances
// Every property access on any Animal must be re-cached
 
// ANTI-PATTERN: Using hasOwnProperty in hot loops
// BAD: walks prototype chain, prevents optimization
for (const key in obj) {
  if (obj.hasOwnProperty(key)) {
    process(obj[key]);
  }
}
 
// BETTER: Use Object.keys (bypasses prototype chain)
for (const key of Object.keys(obj)) {
  process(obj[key]);
}
 
// Or use Object.hasOwn (ES2022)
for (const key in obj) {
  if (Object.hasOwn(obj, key)) {
    process(obj[key]);
  }
}