JavaScript Basics & Syntax Quiz

Closures

Closures: Functions with Memory

A closure is a function that has access to variables from its outer (enclosing) scope even after the outer function has finished executing. It’s like a function that carries a backpack with all the variables it needs.

Basic Closure

Copy to Clipboard

Practical Closure Examples

Copy to Clipboard

// Counter with closure
function createCounter() {
  let count = 0; // Private variable
  
  return function() {
    count++; // Can access and modify count
    return count;
  };
}

let counter1 = createCounter();
let counter2 = createCounter();

console.log(counter1()); // 1
console.log(counter1()); // 2
console.log(counter1()); // 3

console.log(counter2()); // 1 (separate count)
console.log(counter2()); // 2

// Each counter has its own private count variable

// Calculator with closure
function createCalculator() {
  let history = []; // Private variable
  
  return {
    add: function(a, b) {
      let result = a + b;
      history.push('add: ' + a + ' + ' + b + ' = ' + result);
      return result;
    },
    subtract: function(a, b) {
      let result = a - b;
      history.push('subtract: ' + a + ' - ' + b + ' = ' + result);
      return result;
    },
    getHistory: function() {
      return history;
    },
    clearHistory: function() {
      history = [];
    }
  };
}

let calc = createCalculator();
console.log(calc.add(5, 3)); // 8
console.log(calc.subtract(10, 4)); // 6
console.log(calc.getHistory()); // ['add: 5 + 3 = 8', 'subtract: 10 - 4 = 6']

Closures with Parameters

Copy to Clipboard

Closures in Event Handlers

Copy to Clipboard

// Button click counter
function createButtonCounter() {
  let clickCount = 0;
  
  return function() {
    clickCount++;
    console.log('Button clicked ' + clickCount + ' times');
    return clickCount;
  };
}

let buttonClickHandler = createButtonCounter();

// In a real app, you'd attach this to a button:
// button.addEventListener('click', buttonClickHandler);

// Simulate clicks
buttonClickHandler(); // Button clicked 1 times
buttonClickHandler(); // Button clicked 2 times
buttonClickHandler(); // Button clicked 3 times

// Data privacy with closure
function createUserManager() {
  let users = []; // Private array
  
  return {
    addUser: function(name, email) {
      let user = {
        id: users.length + 1,
        name: name,
        email: email,
        createdAt: new Date()
      };
      users.push(user);
      return user;
    },
    getUser: function(id) {
      return users.find(user => user.id === id);
    },
    getAllUsers: function() {
      return [...users]; // Return a copy, not the original
    },
    getUserCount: function() {
      return users.length;
    }
  };
}

let userManager = createUserManager();
userManager.addUser('Alice', 'alice@email.com');
userManager.addUser('Bob', 'bob@email.com');

console.log(userManager.getUserCount()); // 2
console.log(userManager.getAllUsers()); // Array of users
// console.log(userManager.users); // undefined (private)

Common Closure Patterns

Copy to Clipboard

// Module pattern
let calculator = (function() {
  // Private variables and functions
  let operations = {
    add: (a, b) => a + b,
    subtract: (a, b) => a - b,
    multiply: (a, b) => a * b,
    divide: (a, b) => b !== 0 ? a / b : 'Error'
  };
  
  let history = [];
  
  function logOperation(operation, a, b, result) {
    history.push({
      operation: operation,
      operands: [a, b],
      result: result,
      timestamp: new Date()
    });
  }
  
  // Public interface
  return {
    calculate: function(operation, a, b) {
      if (operations[operation]) {
        let result = operations[operation](a, b);
        logOperation(operation, a, b, result);
        return result;
      }
      return 'Invalid operation';
    },
    getHistory: function() {
      return history;
    },
    clearHistory: function() {
      history = [];
    }
  };
})();

console.log(calculator.calculate('add', 5, 3)); // 8
console.log(calculator.calculate('multiply', 4, 2)); // 8
console.log(calculator.getHistory()); // Array of operations

Closure Gotchas

Copy to Clipboard

// Problem: Loop variable capture
function createButtons() {
  let buttons = [];
  
  for (var i = 0; i < 3; i++) {
    buttons.push(function() {
      console.log('Button ' + i + ' clicked');
    });
  }
  
  return buttons;
}

let buttonHandlers = createButtons();
buttonHandlers[0](); // Button 3 clicked (not Button 0!)
buttonHandlers[1](); // Button 3 clicked (not Button 1!)
buttonHandlers[2](); // Button 3 clicked

// Solution 1: Use let (block scope)
function createButtonsFixed() {
  let buttons = [];
  
  for (let i = 0; i < 3; i++) {
    buttons.push(function() {
      console.log('Button ' + i + ' clicked');
    });
  }
  
  return buttons;
}

let fixedHandlers = createButtonsFixed();
fixedHandlers[0](); // Button 0 clicked
fixedHandlers[1](); // Button 1 clicked
fixedHandlers[2](); // Button 2 clicked

// Solution 2: IIFE to create new scope
function createButtonsIIFE() {
  let buttons = [];
  
  for (var i = 0; i < 3; i++) {
    buttons.push((function(index) {
      return function() {
        console.log('Button ' + index + ' clicked');
      };
    })(i));
  }
  
  return buttons;
}

Tip: Closures are powerful for data privacy and creating functions with "memory," but be careful with loop variables!