JavaScript Engine Internals: V8 and Execution

// Understanding execution
// 1. Code is parsed into AST
function add(a, b) {
  return a + b;
}

// 2. AST is compiled to bytecode
// 3. Bytecode is executed by interpreter
// 4. Hot code is optimized by JIT compiler

// V8 optimization strategies
// - Inline caching
// - Hidden classes
// - Type feedback

// Optimize for V8
// ✅ Use consistent object shapes
function createUser(name, age) {
  return { name, age }; // Consistent shape
}

// ❌ Avoid changing object shapes
const obj = {};
obj.name = "Alice"; // Shape 1
obj.age = 30; // Shape 2 (different shape)

// ✅ Prefer arrays for numeric indices
const arr = [1, 2, 3]; // Optimized

// ❌ Avoid sparse arrays
const sparse = [];
sparse[1000] = 1; // Not optimized

JavaScript engines optimize code through parsing, compilation, and JIT optimization. Write code with consistent object shapes and avoid patterns that prevent optimization.

// Execution context creation
function outer() {
  const a = 1;
  
  function inner() {
    const b = 2;
    console.log(a, b);
  }
  
  inner();
}

outer();

// Call stack visualization:
// 1. Global context pushed
// 2. outer() context pushed
// 3. inner() context pushed
// 4. inner() context popped
// 5. outer() context popped
// 6. Global context remains

// Stack overflow
function recursive() {
  recursive(); // Infinite recursion
}

// Maximum call stack size exceeded
// recursive(); // ❌ Error

// Tail call optimization (ES6)
function factorial(n, acc = 1) {
  if (n <= 1) return acc;
  return factorial(n - 1, n * acc); // Tail call
}

// Proper tail calls allow infinite recursion (in strict mode)

Execution context contains variable environment, lexical environment, and this binding. Call stack tracks function calls. Understanding this helps debug and optimize code.

// Event loop execution order
console.log("1");

setTimeout(() => console.log("2"), 0);

Promise.resolve().then(() => console.log("3"));

console.log("4");

// Output: 1, 4, 3, 2
// Explanation:
// 1. "1" - synchronous
// 2. setTimeout - moved to Web API, callback queued
// 3. Promise - moved to microtask queue
// 4. "4" - synchronous
// 5. "3" - microtask (runs before macrotasks)
// 6. "2" - macrotask (runs after microtasks)

// Microtasks vs Macrotasks
console.log("start");

setTimeout(() => console.log("timeout"), 0);

Promise.resolve().then(() => {
  console.log("promise 1");
  return Promise.resolve();
}).then(() => {
  console.log("promise 2");
});

console.log("end");

// Output: start, end, promise 1, promise 2, timeout

// Blocking the event loop
function blocking() {
  const start = Date.now();
  while (Date.now() - start < 5000) {
    // Block for 5 seconds
  }
}

// This blocks all JavaScript execution
// Use Web Workers for heavy computation

Event loop handles asynchronous execution. Microtasks (Promises) run before macrotasks (setTimeout). Understanding execution order is crucial for async code. Avoid blocking the event loop.