JavaScript Internals 2026: V8 Engine, Event Loop, Closures & More

// Your code:
const x = 5 + 3

// AST representation (simplified):
{
  type: "VariableDeclaration",
  kind: "const",
  declarations: [{
    type: "VariableDeclarator",
    id: { type: "Identifier", name: "x" },
    init: {
      type: "BinaryExpression",
      operator: "+",
      left: { type: "Literal", value: 5 },
      right: { type: "Literal", value: 3 }
    }
  }]
}

// Visualize any code's AST at → astexplorer.net

// What you write:
console.log(a)      // undefined (not error - var hoisted)
console.log(b)      // ReferenceError - TDZ
console.log(greet)  // [Function: greet] - fully hoisted

var a = 10
let b = 20
function greet() { return "hello" }

console.log(x)  // undefined (hoisted, not initialized)
var x = 5
console.log(x)  // 5

// JS sees it as:
var x           // declaration hoisted to top
console.log(x)  // undefined
x = 5           // assignment stays here
console.log(x)  // 5

console.log(y)  // ❌ ReferenceError: Cannot access 'y' before initialization
let y = 10

// let and const ARE hoisted (JS knows they exist)
// but they're in TDZ from start of scope until declaration line
// accessing them in TDZ = ReferenceError

// Function DECLARATION - fully hoisted
greet()  // ✅ "Hello" - works before declaration
function greet() { console.log("Hello") }

// Function EXPRESSION - NOT fully hoisted (treated like var)
sayHi()  // ❌ TypeError: sayHi is not a function
var sayHi = function() { console.log("Hi") }

// Arrow function - same as function expression
sayBye() // ❌ TypeError
var sayBye = () => console.log("Bye")

function multiply(a, b) {
    return a * b
}
function square(n) {
    return multiply(n, n)
}
function printSquare(n) {
    const result = square(n)
    console.log(result)
}
printSquare(4)  // Output: 16

function infinite() {
    return infinite()  // calls itself forever
}
infinite()
// ❌ RangeError: Maximum call stack size exceeded
// Stack grows until memory runs out - this is a "stack overflow"

// 1. GLOBAL SCOPE
var globalVar = "I'm everywhere"

function example() {
    // 2. FUNCTION SCOPE
    var funcVar = "only inside this function"

    if (true) {
        // 3. BLOCK SCOPE (let/const only)
        let blockVar = "only inside this block"
        var notBlockScoped = "I leak out to function scope"
    }

    console.log(notBlockScoped)  // ✅ accessible (var ignores blocks)
    console.log(blockVar)        // ❌ ReferenceError (let is block scoped)
}

const a = 'global'

function outer() {
    const b = 'outer'
    function middle() {
        const c = 'middle'
        function inner() {
            const d = 'inner'
            console.log(d)  // ✅ found in own scope
            console.log(c)  // ✅ found in middle scope (1 level up)
            console.log(b)  // ✅ found in outer scope (2 levels up)
            console.log(a)  // ✅ found in global scope (3 levels up)
            console.log(e)  // ❌ ReferenceError - not found anywhere
        }
        inner()
    }
    middle()
}
outer()

function makeCounter() {
    let count = 0        // this variable "closes over" into inner function

    return function() {
        count++
        return count
    }
}

const counter = makeCounter()
// makeCounter() has finished - its EC is gone from call stack
// BUT count still lives because the inner function holds a reference

console.log(counter())  // 1
console.log(counter())  // 2
console.log(counter())  // 3

// 1. DATA PRIVACY (encapsulation)
function createBankAccount(initialBalance) {
    let balance = initialBalance  // private - can't access directly
    return {
        deposit: (amount) => { balance += amount },
        withdraw: (amount) => { balance -= amount },
        getBalance: () => balance
    }
}
const account = createBankAccount(1000)
account.deposit(500)
console.log(account.getBalance())  // 1500
console.log(account.balance)       // undefined - no direct access!

// 2. FUNCTION FACTORIES
function multiply(x) {
    return (y) => x * y     // closes over x
}
const double = multiply(2)
const triple = multiply(3)
double(5)   // 10
triple(5)   // 15

// 3. MEMOIZATION
function memoize(fn) {
    const cache = {}         // closes over cache
    return function(n) {
        if (cache[n]) return cache[n]
        cache[n] = fn(n)
        return cache[n]
    }
}

// ❌ BUG - var doesn't create new scope per iteration
for (var i = 0; i < 3; i++) {
    setTimeout(() => console.log(i), 1000)
}
// Output: 3, 3, 3  (NOT 0, 1, 2)
// All closures share the SAME i (var is function scoped)

// ✅ FIX 1 - use let (block scoped, new binding per iteration)
for (let i = 0; i < 3; i++) {
    setTimeout(() => console.log(i), 1000)
}
// Output: 0, 1, 2

// ✅ FIX 2 - use IIFE to create new scope
for (var i = 0; i < 3; i++) {
    ((j) => {
        setTimeout(() => console.log(j), 1000)
    })(i)
}

// RULE 1: Global context
console.log(this)  // window (browser) / {} (Node module)

// RULE 2: Object method - this = the object
const user = {
    name: "Dev Kant",
    greet() { console.log(this.name) }  // "Dev Kant"
}
user.greet()

// RULE 3: Regular function - this = undefined (strict) or window
function standalone() {
    console.log(this)  // undefined in strict mode
}
standalone()

// RULE 4: Arrow function - this = inherited from surrounding scope
const obj = {
    name: "Dev Kant",
    greet: () => {
        console.log(this.name)  // undefined! arrow has no own 'this'
    },
    greetCorrect() {
        const arrow = () => console.log(this.name)  // ✅ inherits
        arrow()
    }
}

// RULE 5: Constructor / new keyword - this = newly created object
function Person(name) {
    this.name = name    // this = new empty object
}
const dev = new Person("Dev Kant")
console.log(dev.name)  // "Dev Kant"

function introduce(greeting) {
    console.log(`${greeting}, I'm ${this.name}`)
}
const person = { name: "Dev Kant" }

// call - invoke immediately, pass args individually
introduce.call(person, "Hello")

// apply - invoke immediately, pass args as array
introduce.apply(person, ["Hi"])

// bind - returns NEW function with this permanently bound
const boundIntroduce = introduce.bind(person)
boundIntroduce("Hey")

const arr = [1, 2, 3]
// arr has access to .map(), .filter(), .push() etc.
// but YOU didn't define them - where do they come from?
// Answer: arr → Array.prototype → Object.prototype → null

function Dog(name) {
    this.name = name
}
Dog.prototype.bark = function() {
    console.log(`${this.name} says Woof!`)
}

const dog1 = new Dog("Bruno")
dog1.bark()  // "Bruno says Woof!"

// When JS looks up dog1.bark:
// 1. Check dog1 own properties → not found
// 2. Check Dog.prototype → found! ✅ execute it

// Class syntax (modern, clean)
class Animal {
    constructor(name) { this.name = name }
    speak() { console.log(`${this.name} makes a sound`) }
}

class Dog extends Animal {
    speak() { console.log(`${this.name} barks`) }
}

// Under the hood, JS is STILL using prototypes
// 'extends' sets up the prototype chain
// 'super()' calls the parent constructor
// Classes are just a cleaner API for the same mechanism

// If JS were purely synchronous:
const data = fetch('https://api.example.com/data')  // takes 2 seconds
console.log(data)   // everything FREEZES for 2 seconds
// User can't click, scroll, type - completely blocked

console.log('1 - synchronous')

setTimeout(() => console.log('2 - macrotask'), 0)

Promise.resolve().then(() => console.log('3 - microtask'))

console.log('4 - synchronous')

// OUTPUT:
// 1 - synchronous
// 4 - synchronous
// 3 - microtask      ← runs BEFORE macrotask even with 0ms timeout!
// 2 - macrotask

// ⚠️ This will NEVER execute the setTimeout!
function keepAddingMicrotasks() {
    Promise.resolve().then(keepAddingMicrotasks)
    // keeps adding to microtask queue infinitely
    // event loop never gets to macrotask queue
}
keepAddingMicrotasks()
setTimeout(() => console.log('never runs'), 0)

// The microtask queue never empties, so the macrotask
// (setTimeout callback) is starved and never executes

// When you create a Promise:
const p = new Promise((resolve, reject) => {
    // executor runs SYNCHRONOUSLY immediately
    setTimeout(() => resolve(42), 1000)
})

// p is in PENDING state right now

p.then(value => console.log(value))
// .then() registers a callback - doesn't run yet
// when resolve(42) fires after 1 second:
// → callback goes to MICROTASK QUEUE
// → event loop picks it up → runs it → prints 42

fetch('/api/user')
    .then(response => response.json())      // returns new Promise
    .then(data => data.name)               // returns new Promise
    .then(name => console.log(name))       // chain continues
    .catch(err => console.error(err))      // catches any error above
    .finally(() => console.log('done'))    // always runs

// Each .then() returns a NEW Promise - this enables chaining

// Promise version
function getUser() {
    return fetch('/api/user')
        .then(res => res.json())
        .then(data => data.name)
}

// async/await version - same thing, cleaner syntax
async function getUser() {
    const res = await fetch('/api/user')   // pauses HERE
    const data = await res.json()         // pauses HERE
    return data.name
}

async function example() {
    console.log('A')
    const result = await Promise.resolve(42)
    // Everything AFTER await goes into microtask queue
    console.log('B', result)  // this runs later
}

console.log('1')
example()
console.log('2')

// Output:
// 1
// A        ← async function starts synchronously
// 2        ← continues synchronous code after example() call
// B 42     ← microtask runs after call stack clears

async function getData() {
    try {
        const res = await fetch('/api/data')
        if (!res.ok) throw new Error('HTTP error!')
        const data = await res.json()
        return data
    } catch (err) {
        console.error('Failed:', err.message)
    } finally {
        console.log('cleanup always runs')
    }
}

// ❌ LEAK 1: Accidental globals
function leak() {
    forgotVar = "I'm global now"  // no let/const/var → goes to window
}

// ❌ LEAK 2: Forgotten timers
const data = hugeDataSet
setInterval(() => {
    processData(data)  // data is never freed, timer keeps reference
}, 1000)
// Always clearInterval() when done!

// ❌ LEAK 3: Detached DOM nodes
let element = document.getElementById('btn')
document.body.removeChild(element)  // removed from DOM
// BUT element variable still holds reference - NOT garbage collected
element = null  // ✅ fix: explicitly null the reference

// ❌ LEAK 4: Closures holding large data
function process() {
    const bigData = new Array(1000000).fill('data')
    return function() {
        // closes over bigData even if not using it
        return 'done'
    }
}