← This Keyword (Deep Dive)Asynchronous JavaScript →

Closures in JavaScript

Master one of JavaScript's most powerful features - closures. Understand how functions &qout;remember&qout; their lexical scope and enable powerful programming patterns.

🔒 What are Closures?

A closure is a function that retains access to variables from its lexical scope even when the function is executed outside that scope.

Lexical Scoping - Functions remember where they were created
Persistent State - Variables persist between function calls
Data Privacy - Enable private variables in JavaScript

💡 Simple Definition

A closure is created when a function is defined inside another function and has access to the outer function's variables, even after the outer function has returned.

Closure Components:

Inner function
Outer function's variables
Lexical environment reference

🎯 Closure Fundamentals

Basic Example

JavaScript Editor

// Understanding Closures
console.log("=== CLOSURE FUNDAMENTALS ===");

// 1. Basic Closure Example
function outerFunction() {
  let outerVariable = "I'm from outer function";
  
  function innerFunction() {
    console.log(outerVariable); // Accessing parent scope variable
  }
  
  return innerFunction;
}

const closureExample = outerFunction();
closureExample(); // Still has access to outerVariable

// 2. Multiple Closures
console.log("\n=== MULTIPLE CLOSURES ===");
function createCounter() {
  let count = 0;
  
  return {
    increment: function() {
      count++;
      console.log(`Count: ${count}`);
    },
    decrement: function() {
      count--;
      console.log(`Count: ${count}`);
    },
    getCount: function() {
      return count;
    }
  };
}

const counter = createCounter();
counter.increment(); // 1
counter.increment(); // 2
counter.decrement(); // 1
console.log("Final count:", counter.getCount());

// 3. Closure with Parameters
console.log("\n=== CLOSURES WITH PARAMETERS ===");
function createMultiplier(multiplier) {
  return function(number) {
    return number * multiplier;
  };
}

const double = createMultiplier(2);
const triple = createMultiplier(3);

console.log("Double 5:", double(5)); // 10
console.log("Triple 5:", triple(5)); // 15

// 4. Each Closure Has Its Own State
console.log("\n=== SEPARATE CLOSURE STATES ===");
const counter1 = createCounter();
const counter2 = createCounter();

counter1.increment(); // 1
counter1.increment(); // 2
counter2.increment(); // 1 (separate state)

console.log("Counter 1:", counter1.getCount());
console.log("Counter 2:", counter2.getCount());

// 5. Closure in Loop
console.log("\n=== CLOSURE IN LOOPS ===");
function createFunctionArray() {
  const functions = [];
  
  for (var i = 0; i < 3; i++) {
    functions.push(function() {
      console.log(i); // Problem: all log 3
    });
  }
  
  return functions;
}

const problemFunctions = createFunctionArray();
problemFunctions[0](); // 3
problemFunctions[1](); // 3
problemFunctions[2](); // 3

// Solution with IIFE or let
function createFixedFunctionArray() {
  const functions = [];
  
  for (let i = 0; i < 3; i++) {
    functions.push(function() {
      console.log(i); // Correct: 0, 1, 2
    });
  }
  
  return functions;
}

const fixedFunctions = createFixedFunctionArray();
fixedFunctions[0]();
fixedFunctions[1]();
fixedFunctions[2]();

How Closures Work

Step-by-step Process:

Function Definition: Inner function is created inside outer function
Scope Chain: Inner function gets reference to outer function's scope
Function Return: Outer function returns inner function
Execution: Inner function is called later
Access: Inner function still has access to outer function's variables

Visual Representation:

outerFunction()
            ├── outerVariable = "I'm from outer"
            └── innerFunction() [CLOSURE]
                └── [[Scope]] → outerFunction's environment
                    └── outerVariable: "I'm from outer"

            When outerFunction returns innerFunction:
            • innerFunction maintains reference to outerFunction's scope
            • outerVariable persists in memory
            • Each closure has its own separate state

💼 Practical Applications

Closures enable several powerful programming patterns in JavaScript:

JavaScript Editor

// Practical Closure Examples
console.log("=== PRACTICAL CLOSURE USES ===\n");

// 1. Data Privacy / Encapsulation
console.log("1. DATA PRIVACY:");
function createBankAccount(initialBalance) {
  let balance = initialBalance;
  
  return {
    deposit: function(amount) {
      if (amount > 0) {
        balance += amount;
        console.log(`Deposited $${amount}. New balance: $${balance}`);
      }
      return balance;
    },
    
    withdraw: function(amount) {
      if (amount > 0 && amount <= balance) {
        balance -= amount;
        console.log(`Withdrew $${amount}. New balance: $${balance}`);
      } else {
        console.log("Insufficient funds or invalid amount");
      }
      return balance;
    },
    
    getBalance: function() {
      return balance;
    }
  };
}

const account = createBankAccount(100);
account.deposit(50);    // 150
account.withdraw(30);   // 120
console.log("Current balance:", account.getBalance());
// Cannot access balance directly: account.balance → undefined

// 2. Function Factories
console.log("\n2. FUNCTION FACTORIES:");
function createGreeting(greeting) {
  return function(name) {
    return `${greeting}, ${name}!`;
  };
}

const sayHello = createGreeting("Hello");
const sayHi = createGreeting("Hi");
const formalGreet = createGreeting("Good day");

console.log(sayHello("Alice"));     // Hello, Alice!
console.log(sayHi("Bob"));          // Hi, Bob!
console.log(formalGreet("Charlie")); // Good day, Charlie!

// 3. Memoization / Caching
console.log("\n3. MEMOIZATION:");
function memoize(fn) {
  const cache = {};
  
  return function(...args) {
    const key = JSON.stringify(args);
    
    if (cache[key]) {
      console.log(`Cache hit for ${fn.name}(${args})`);
      return cache[key];
    }
    
    console.log(`Cache miss, computing ${fn.name}(${args})`);
    const result = fn(...args);
    cache[key] = result;
    return result;
  };
}

// Example: Expensive calculation
function slowSquare(n) {
  console.log(`Computing square of ${n}...`);
  return n * n;
}

const memoizedSquare = memoize(slowSquare);
console.log("First call:", memoizedSquare(5));   // Computes
console.log("Second call:", memoizedSquare(5));  // Cached
console.log("New call:", memoizedSquare(6));     // Computes

// 4. Event Handlers with State
console.log("\n4. EVENT HANDLERS:");
function createButtonHandler(buttonId) {
  let clickCount = 0;
  
  return function() {
    clickCount++;
    console.log(`Button ${buttonId} clicked ${clickCount} times`);
    
    if (clickCount >= 3) {
      console.log(`Button ${buttonId} disabled after 3 clicks`);
      // In real code, you would disable the button here
    }
  };
}

const handleButton1 = createButtonHandler("btn1");
const handleButton2 = createButtonHandler("btn2");

// Simulate clicks
handleButton1(); // Button btn1 clicked 1 times
handleButton1(); // Button btn1 clicked 2 times
handleButton2(); // Button btn2 clicked 1 times
handleButton1(); // Button btn1 clicked 3 times
handleButton2(); // Button btn2 clicked 2 times

// 5. Module Pattern
console.log("\n5. MODULE PATTERN:");
const UserModule = (function() {
  // Private variables
  let users = [];
  let userIdCounter = 1;
  
  // Private function
  function generateId() {
    return userIdCounter++;
  }
  
  // Public API
  return {
    addUser: function(name, email) {
      const user = {
        id: generateId(),
        name,
        email,
        createdAt: new Date()
      };
      users.push(user);
      return user;
    },
    
    getUser: function(id) {
      return users.find(user => user.id === id);
    },
    
    getAllUsers: function() {
      return [...users]; // Return copy
    },
    
    deleteUser: function(id) {
      const index = users.findIndex(user => user.id === id);
      if (index > -1) {
        return users.splice(index, 1)[0];
      }
      return null;
    },
    
    getUserCount: function() {
      return users.length;
    }
  };
})();

UserModule.addUser("Alice", "alice@example.com");
UserModule.addUser("Bob", "bob@example.com");
console.log("All users:", UserModule.getAllUsers());
console.log("User count:", UserModule.getUserCount());

// 6. Partial Application
console.log("\n6. PARTIAL APPLICATION:");
function multiply(a, b, c) {
  return a * b * c;
}

function partial(fn, ...fixedArgs) {
  return function(...remainingArgs) {
    return fn(...fixedArgs, ...remainingArgs);
  };
}

const multiplyBy2 = partial(multiply, 2);
console.log("multiplyBy2(3, 4):", multiplyBy2(3, 4)); // 24

const multiplyBy2And3 = partial(multiply, 2, 3);
console.log("multiplyBy2And3(4):", multiplyBy2And3(4)); // 24

// 7. Debouncing
console.log("\n7. DEBOUNCING:");
function debounce(fn, delay) {
  let timeoutId;
  
  return function(...args) {
    clearTimeout(timeoutId);
    
    timeoutId = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}

// Simulate search input
const search = debounce(function(query) {
  console.log(`Searching for: "${query}"`);
}, 300);

// Simulate rapid typing
search("a");
search("ap");
search("app");
search("appl");
search("apple"); // Only this one executes after delay

// 8. Throttling
console.log("\n8. THROTTLING:");
function throttle(fn, limit) {
  let lastCall = 0;
  
  return function(...args) {
    const now = Date.now();
    
    if (now - lastCall >= limit) {
      lastCall = now;
      fn.apply(this, args);
    }
  };
}

const logScroll = throttle(function(position) {
  console.log(`Scrolled to: ${position}px`);
}, 1000);

// Simulate scroll events
logScroll(100);
logScroll(200); // Ignored (within 1 second)
logScroll(300); // Ignored
setTimeout(() => logScroll(400), 1100); // Executes

Data Privacy

Private variables and encapsulation

Function Factories

Create specialized functions

Memoization

Cache expensive computations

Module Pattern

Organize code with private state

🚀 Advanced Patterns

Advanced closure patterns for sophisticated JavaScript development:

JavaScript Editor

// Advanced Closure Patterns
console.log("=== ADVANCED CLOSURE PATTERNS ===\n");

// 1. Currying
console.log("1. CURRYING:");
function curry(fn) {
  const arity = fn.length;
  
  return function curried(...args) {
    if (args.length >= arity) {
      return fn.apply(this, args);
    } else {
      return function(...moreArgs) {
        return curried.apply(this, args.concat(moreArgs));
      };
    }
  };
}

// Example usage
function add(a, b, c) {
  return a + b + c;
}

const curriedAdd = curry(add);
console.log("curriedAdd(1)(2)(3):", curriedAdd(1)(2)(3)); // 6
console.log("curriedAdd(1, 2)(3):", curriedAdd(1, 2)(3)); // 6
console.log("curriedAdd(1)(2, 3):", curriedAdd(1)(2, 3)); // 6

// 2. Compose Function
console.log("\n2. FUNCTION COMPOSITION:");
function compose(...fns) {
  return function(x) {
    return fns.reduceRight((acc, fn) => fn(acc), x);
  };
}

const add5 = x => x + 5;
const multiply3 = x => x * 3;
const square = x => x * x;

const composed = compose(square, multiply3, add5);
console.log("compose(square, multiply3, add5)(2):", composed(2)); // (2+5)*3)^2 = 441

// 3. State Machine
console.log("\n3. STATE MACHINE:");
function createStateMachine(initialState, transitions) {
  let currentState = initialState;
  let history = [initialState];
  
  return {
    transition: function(event) {
      const nextState = transitions[currentState]?.[event];
      
      if (nextState) {
        console.log(`${currentState} --${event}--> ${nextState}`);
        history.push(nextState);
        currentState = nextState;
        return true;
      }
      
      console.log(`Invalid transition: ${currentState} --${event}-->`);
      return false;
    },
    
    getState: function() {
      return currentState;
    },
    
    getHistory: function() {
      return [...history];
    },
    
    reset: function() {
      currentState = initialState;
      history = [initialState];
      console.log("State machine reset");
    }
  };
}

const trafficLight = createStateMachine("red", {
  red: { TIMER: "green" },
  green: { TIMER: "yellow" },
  yellow: { TIMER: "red" }
});

trafficLight.transition("TIMER"); // red -> green
trafficLight.transition("TIMER"); // green -> yellow
trafficLight.transition("TIMER"); // yellow -> red
console.log("History:", trafficLight.getHistory());

// 4. Private Class Fields (pre-ES6)
console.log("\n4. PRIVATE CLASS FIELDS (CLOSURE APPROACH):");
function createPerson(name, age) {
  // Private variables
  let _name = name;
  let _age = age;
  let _secret = "My secret";
  
  // Public interface
  return {
    getName: function() {
      return _name;
    },
    
    setName: function(newName) {
      if (newName && newName.length > 0) {
        _name = newName;
      }
    },
    
    getAge: function() {
      return _age;
    },
    
    haveBirthday: function() {
      _age++;
      console.log(`Happy birthday! Now ${_age} years old.`);
    },
    
    // Cannot access _secret from outside
    revealSecret: function(password) {
      if (password === "1234") {
        return _secret;
      }
      return "Access denied";
    }
  };
}

const person = createPerson("Alice", 25);
console.log("Name:", person.getName());
person.haveBirthday();
console.log("Age:", person.getAge());
console.log("Secret:", person.revealSecret("wrong")); // Access denied
console.log("Secret:", person.revealSecret("1234")); // My secret

// 5. Observable Pattern
console.log("\n5. OBSERVABLE PATTERN:");
function createObservable(initialValue) {
  let value = initialValue;
  let observers = [];
  
  function notify() {
    observers.forEach(observer => observer(value));
  }
  
  return {
    getValue: function() {
      return value;
    },
    
    setValue: function(newValue) {
      if (value !== newValue) {
        value = newValue;
        notify();
      }
    },
    
    subscribe: function(observer) {
      observers.push(observer);
      // Return unsubscribe function
      return function() {
        const index = observers.indexOf(observer);
        if (index > -1) {
          observers.splice(index, 1);
        }
      };
    },
    
    getObserverCount: function() {
      return observers.length;
    }
  };
}

const observable = createObservable(0);
const unsubscribe1 = observable.subscribe(val => console.log(`Observer 1: ${val}`));
const unsubscribe2 = observable.subscribe(val => console.log(`Observer 2: ${val}`));

observable.setValue(10);
unsubscribe1();
observable.setValue(20);
console.log("Remaining observers:", observable.getObserverCount());

// 6. Lazy Evaluation
console.log("\n6. LAZY EVALUATION:");
function lazy(fn) {
  let result;
  let computed = false;
  
  return function() {
    if (!computed) {
      result = fn();
      computed = true;
      console.log("Computed result");
    } else {
      console.log("Returning cached result");
    }
    return result;
  };
}

const expensiveComputation = lazy(() => {
  console.log("Performing expensive computation...");
  let sum = 0;
  for (let i = 0; i < 1000000; i++) {
    sum += Math.random();
  }
  return sum;
});

console.log("First call:", expensiveComputation()); // Computes
console.log("Second call:", expensiveComputation()); // Cached
console.log("Third call:", expensiveComputation()); // Cached

// 7. Chainable API
console.log("\n7. CHAINABLE API:");
function createQuery() {
  let conditions = [];
  let limit = null;
  let offset = 0;
  
  return {
    where: function(field, operator, value) {
      conditions.push({ field, operator, value });
      return this;
    },
    
    limit: function(num) {
      limit = num;
      return this;
    },
    
    offset: function(num) {
      offset = num;
      return this;
    },
    
    build: function() {
      let query = "SELECT * FROM table";
      
      if (conditions.length > 0) {
        query += " WHERE " + conditions
          .map(c => `${c.field} ${c.operator} '${c.value}'`)
          .join(" AND ");
      }
      
      if (limit !== null) {
        query += ` LIMIT ${limit}`;
      }
      
      if (offset > 0) {
        query += ` OFFSET ${offset}`;
      }
      
      return query;
    }
  };
}

const query = createQuery()
  .where("status", "=", "active")
  .where("age", ">", 18)
  .limit(10)
  .offset(5);

console.log("Built query:", query.build());

💡 Pattern Applications:

Currying:

Transform multi-argument functions into chains

Composition:

Combine simple functions into complex ones

Observables:

Reactive programming patterns

⚠️ Memory Considerations

Understanding memory implications of closures is crucial for performance:

JavaScript Editor

// Closure Memory Considerations
console.log("=== CLOSURE MEMORY CONSIDERATIONS ===\n");

// 1. Memory Leak Example
console.log("1. MEMORY LEAK PATTERN:");
function createLeakyClosure() {
  const largeData = new Array(1000000).fill("Large data string");
  let count = 0;
  
  return function() {
    count++;
    // Closure keeps reference to largeData forever
    console.log(`Called ${count} times, data size: ${largeData.length}`);
    return count;
  };
}

const leakyFunction = createLeakyClosure();
leakyFunction();
leakyFunction();

// largeData cannot be garbage collected while leakyFunction exists
console.log("largeData is kept in memory by closure");

// 2. Avoiding Memory Leaks
console.log("\n2. AVOIDING MEMORY LEAKS:");
function createOptimizedClosure() {
  // Only keep what's necessary
  let count = 0;
  
  // Large data that we don't need in closure
  const tempData = new Array(1000000).fill("Temporary data");
  const processedData = processData(tempData);
  
  // tempData can be garbage collected after this function returns
  // because closure doesn't reference it
  
  return function() {
    count++;
    console.log(`Called ${count} times, using: ${processedData.length} items`);
    return count;
  };
  
  function processData(data) {
    // Process and return only what's needed
    return data.map(item => item.length);
  }
}

const optimizedFunction = createOptimizedClosure();
optimizedFunction();

// 3. Circular References
console.log("\n3. CIRCULAR REFERENCES:");
function createCircularReference() {
  const obj = {
    data: "Some data",
    cleanup: function() {
      console.log("Cleanup called");
      // This creates circular reference
      // obj → cleanup → closure → obj
    }
  };
  
  // Store reference that won't be used
  const unusedRef = obj;
  
  return function() {
    console.log(obj.data);
  };
}

// Modern garbage collectors (mark-and-sweep) handle circular references
// But it's still good practice to clean up

// 4. Event Listener Memory Leak
console.log("\n4. EVENT LISTENER LEAK:");
function createComponent() {
  const element = { 
    addEventListener: () => console.log("Listener added"),
    removeEventListener: () => console.log("Listener removed")
  };
  
  const data = new Array(10000).fill("Component data");
  
  function handleClick() {
    console.log(`Clicked, data length: ${data.length}`);
  }
  
  element.addEventListener("click", handleClick);
  
  // Problem: If we don't remove listener, closure keeps data in memory
  // even after component is no longer needed
  
  return {
    destroy: function() {
      element.removeEventListener("click", handleClick);
      console.log("Component destroyed, listeners removed");
    }
  };
}

const component = createComponent();
component.destroy();

// 5. Weak References with Closures
console.log("\n5. WEAK REFERENCES:");
function createWeakClosure() {
  // Use WeakMap for caching without preventing garbage collection
  const cache = new WeakMap();
  
  return {
    set: function(key, value) {
      cache.set(key, value);
    },
    
    get: function(key) {
      return cache.get(key);
    },
    
    // No need to manually clean up - WeakMap automatically removes
    // entries when keys are garbage collected
  };
}

const weakCache = createWeakClosure();
let tempObj = { id: 1 };
weakCache.set(tempObj, "Cached value");

console.log("Before null:", weakCache.get(tempObj));
tempObj = null; // Now the cache entry can be garbage collected

// 6. Memory Profiling Example
console.log("\n6. MEMORY PROFILING TIPS:");
function createMemoryIntensiveClosure() {
  const closures = [];
  
  for (let i = 0; i < 1000; i++) {
    // Each closure captures its own 'i'
    closures.push((function(index) {
      const largeData = new Array(1000).fill(`Data for closure ${index}`);
      
      return function() {
        // Only use what's necessary
        return largeData.length; // But we're keeping all the data!
      };
    })(i));
  }
  
  return closures;
}

// Better approach
function createMemoryEfficientClosures() {
  const closures = [];
  
  for (let i = 0; i < 1000; i++) {
    // Only capture what's needed
    closures.push((function(index) {
      // Don't capture large data unless necessary
      return function() {
        return index; // Much more memory efficient
      };
    })(i));
  }
  
  return closures;
}

console.log("Memory intensive vs efficient closures created");

// 7. Closure Cleanup Pattern
console.log("\n7. CLEANUP PATTERN:");
function createManagedResource() {
  const resources = [];
  let isActive = true;
  
  // Acquire resource
  resources.push("Resource 1");
  resources.push("Resource 2");
  
  function cleanup() {
    if (!isActive) return;
    
    isActive = false;
    console.log("Cleaning up resources:", resources.length);
    resources.length = 0; // Clear array
  }
  
  return {
    useResource: function() {
      if (!isActive) {
        throw new Error("Resource closed");
      }
      console.log("Using resource, total:", resources.length);
      return resources[0];
    },
    
    close: cleanup,
    
    // Automatic cleanup on GC (not reliable, but pattern)
    finalize: function() {
      cleanup();
    }
  };
}

const resource = createManagedResource();
resource.useResource();
resource.close();
// resource.useResource(); // Would throw error

⚠️ Memory Leak Sources:

Unnecessary large data in closures
Forgotten event listeners
Circular references (less issue with modern GC)
Too many closures holding state

✅ Memory Best Practices:

Only capture needed variables
Clean up event listeners
Use WeakMap for caching
Implement cleanup methods

🎓 Interview Patterns

Common closure-related interview questions and implementations:

JavaScript Editor

// Closure Interview Questions & Patterns
console.log("=== CLOSURE INTERVIEW PATTERNS ===\n");

// 1. Classic Interview Question
console.log("1. CLASSIC INTERVIEW QUESTION:");
for (var i = 1; i <= 5; i++) {
  setTimeout(function() {
    console.log("var i:", i); // All log 6
  }, i * 1000);
}

// Solution 1: IIFE
for (var i = 1; i <= 5; i++) {
  (function(j) {
    setTimeout(function() {
      console.log("IIFE j:", j); // 1, 2, 3, 4, 5
    }, j * 1000);
  })(i);
}

// Solution 2: Using let
for (let i = 1; i <= 5; i++) {
  setTimeout(function() {
    console.log("let i:", i); // 1, 2, 3, 4, 5
  }, i * 1000);
}

// 2. Closure Scope Chain
console.log("\n2. SCOPE CHAIN QUESTION:");
function outer() {
  var x = 10;
  
  function middle() {
    var y = 20;
    
    function inner() {
      var z = 30;
      console.log(x + y + z); // What does this log?
    }
    
    return inner;
  }
  
  return middle;
}

const middleFunc = outer();
const innerFunc = middleFunc();
innerFunc(); // 60

// 3. Private Counter Implementation
console.log("\n3. PRIVATE COUNTER:");
const Counter = (function() {
  let privateCounter = 0;
  
  function changeBy(val) {
    privateCounter += val;
  }
  
  return {
    increment: function() {
      changeBy(1);
    },
    
    decrement: function() {
      changeBy(-1);
    },
    
    value: function() {
      return privateCounter;
    }
  };
})();

console.log("Initial value:", Counter.value()); // 0
Counter.increment();
Counter.increment();
console.log("After increments:", Counter.value()); // 2
Counter.decrement();
console.log("After decrement:", Counter.value()); // 1

// 4. Function Currying Implementation
console.log("\n4. CURRYING IMPLEMENTATION:");
function sum(a, b, c) {
  return a + b + c;
}

// Implement curry function
function curry(fn) {
  return function curried(...args) {
    if (args.length >= fn.length) {
      return fn.apply(this, args);
    } else {
      return function(...moreArgs) {
        return curried.apply(this, args.concat(moreArgs));
      };
    }
  };
}

const curriedSum = curry(sum);
console.log("curriedSum(1)(2)(3):", curriedSum(1)(2)(3)); // 6
console.log("curriedSum(1, 2)(3):", curriedSum(1, 2)(3)); // 6
console.log("curriedSum(1)(2, 3):", curriedSum(1)(2, 3)); // 6

// 5. Memoize Fibonacci
console.log("\n5. MEMOIZED FIBONACCI:");
function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

// Without memoization (very slow for large n)
console.log("Without memoization - fib(10):", fibonacci(10));

// With memoization
function memoize(fn) {
  const cache = {};
  
  return function(n) {
    if (cache[n] !== undefined) {
      return cache[n];
    }
    
    const result = fn(n);
    cache[n] = result;
    return result;
  };
}

const memoizedFibonacci = memoize(function fib(n) {
  if (n <= 1) return n;
  return memoizedFibonacci(n - 1) + memoizedFibonacci(n - 2);
});

console.log("With memoization - fib(40):", memoizedFibonacci(40)); // Fast!

// 6. Implement Bind
console.log("\n6. IMPLEMENT BIND():");
Function.prototype.myBind = function(context, ...boundArgs) {
  const fn = this;
  
  return function(...callArgs) {
    return fn.apply(context, [...boundArgs, ...callArgs]);
  };
};

function greet(greeting, punctuation) {
  return `${greeting}, ${this.name}${punctuation}`;
}

const person = { name: "Alice" };
const boundGreet = greet.myBind(person, "Hello");
console.log("myBind result:", boundGreet("!")); // Hello, Alice!

// 7. Debounce Implementation
console.log("\n7. DEBOUNCE IMPLEMENTATION:");
function myDebounce(fn, delay) {
  let timeoutId;
  
  return function(...args) {
    clearTimeout(timeoutId);
    
    timeoutId = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}

let debounceCount = 0;
const debouncedIncrement = myDebounce(() => {
  debounceCount++;
  console.log("Debounced increment:", debounceCount);
}, 300);

// Simulate rapid calls
debouncedIncrement();
debouncedIncrement();
debouncedIncrement();
setTimeout(debouncedIncrement, 400); // This one will execute

// 8. Throttle Implementation
console.log("\n8. THROTTLE IMPLEMENTATION:");
function myThrottle(fn, limit) {
  let lastRan;
  let timeoutId;
  
  return function(...args) {
    if (!lastRan) {
      fn.apply(this, args);
      lastRan = Date.now();
    } else {
      clearTimeout(timeoutId);
      
      timeoutId = setTimeout(() => {
        if (Date.now() - lastRan >= limit) {
          fn.apply(this, args);
          lastRan = Date.now();
        }
      }, limit - (Date.now() - lastRan));
    }
  };
}

let throttleCount = 0;
const throttledIncrement = myThrottle(() => {
  throttleCount++;
  console.log("Throttled increment:", throttleCount);
}, 1000);

// Simulate rapid calls
throttledIncrement();
throttledIncrement();
throttledIncrement();
setTimeout(throttledIncrement, 1100); // This will execute

// 9. Singleton Pattern
console.log("\n9. SINGLETON PATTERN:");
const Singleton = (function() {
  let instance;
  
  function createInstance() {
    const object = {
      data: Math.random(),
      getData: function() {
        return this.data;
      }
    };
    return object;
  }
  
  return {
    getInstance: function() {
      if (!instance) {
        instance = createInstance();
      }
      return instance;
    }
  };
})();

const instance1 = Singleton.getInstance();
const instance2 = Singleton.getInstance();
console.log("Same instance?", instance1 === instance2); // true
console.log("Same data?", instance1.getData() === instance2.getData()); // true

// 10. Module Pattern with Revealing Module
console.log("\n10. REVEALING MODULE PATTERN:");
const revealingModule = (function() {
  let privateCounter = 0;
  
  function privateFunction() {
    privateCounter++;
  }
  
  function publicFunction() {
    privateFunction();
  }
  
  function publicGetCount() {
    return privateCounter;
  }
  
  // Reveal public pointers to private functions
  return {
    increment: publicFunction,
    getCount: publicGetCount
  };
})();

revealingModule.increment();
revealingModule.increment();
console.log("Revealing module count:", revealingModule.getCount());

Common Interview Topics:

Basic Concepts:

What is a closure?
Scope chain
Lexical vs dynamic scoping

Implementation:

Implement bind/call/apply
Memoization
Currying
Debounce/throttle

Problem Solving:

Loop closure problems
Private variables
Module patterns
Memory considerations

🎯 Closure Best Practices

✅ Do:

Use closures for data encapsulation
Implement function factories for specialization
Use memoization for expensive computations
Leverage module pattern for organization
Clean up event listeners and timeouts
Use let in loops to avoid closure issues

❌ Avoid:

Creating unnecessary closures in loops
Keeping large data in closures unnecessarily
Forgetting to cleanup event listeners
Creating circular references without cleanup
Using closures where simple functions suffice
Ignoring memory implications

← This Keyword (Deep Dive)Asynchronous JavaScript →

JavaScript Tutorial

Closures in JavaScript

🔒 What are Closures?

💡 Simple Definition

Closure Components:

🎯 Closure Fundamentals

Basic Example

How Closures Work

Step-by-step Process:

Visual Representation:

💼 Practical Applications

Data Privacy

Function Factories

Memoization

Module Pattern

🚀 Advanced Patterns

💡 Pattern Applications:

⚠️ Memory Considerations

⚠️ Memory Leak Sources:

✅ Memory Best Practices:

🎓 Interview Patterns

Common Interview Topics:

Basic Concepts:

Implementation:

Problem Solving:

🎯 Closure Best Practices

✅ Do:

❌ Avoid:

Follow Us

Our Tools

Our Company

Special Tools