Advanced JS & Memory Management

1. Closures & Scoping

function createCounter() {
  let count = 0; // Private state variable
  
  return {
    increment: () => {
      count++;
      return count;
    },
    decrement: () => {
      count--;
      return count;
    }
  };
}

const counter = createCounter();
console.log(counter.increment()); // 1
console.log(counter.increment()); // 2
// The variable "count" cannot be accessed directly from the outside!

Production Use Cases:

• Data Encapsulation: Creating private variables that cannot be overwritten by outside scripts.
• Currying and Partial Application: Preserving configurations or state setups across sequential function calls.

2. Prototypical Inheritance

const animal = {
  eats: true,
  walk() {
    console.log("Animal walking...");
  }
};

const dog = Object.create(animal); // Links dog's prototype to animal
dog.barks = true;

dog.walk(); // "Animal walking..." (Found by traveling up the prototype chain!)
console.log(dog.eats); // true

1. The engine checks the object's own properties.
2. If not found, it travels up the prototype chain (object.__proto__) until it either finds the property or reaches the end (null).

3. Modern JavaScript API Updates (ES6 - ES15)

• Optional Chaining (?.) & Nullish Coalescing (??):
  javascript

  // Prevents crash if user or profile is missing. Nullish coalescing checks for null/undefined only.
  const theme = user?.profile?.settings?.theme ?? "light";
  

• Structured Cloning (structuredClone): Historically, deep-copying objects required importing loadash or running JSON.parse(JSON.stringify(obj)), which crashes on dates or regex. Use native structuredClone:
  javascript

  const deepCopy = structuredClone(originalObject);
  

• WeakMap & WeakSet: Regular Maps and Sets hold strong references to keys, preventing them from being garbage-collected. WeakMap keys must be objects, and they hold weak references, allowing the garbage collector to clean them up if there are no other references to them.
  javascript

  const metadata = new WeakMap();
  let element = document.getElementById("main-card");
  
  metadata.set(element, { clicked: false });
  // If element is removed from DOM and dereferenced:
  element = null; // The WeakMap automatically releases memory for both key and metadata!
  

4. Memory Leak Detection & Prevention

Common Memory Leaks in Single Page Applications:

1. Dangling Event Listeners:

// ❌ BAD: React hook without clean-up
useEffect(() => {
  window.addEventListener("resize", handleResize);
}, []);

// ✅ GOOD: Always remove listeners on unmount
useEffect(() => {
  window.addEventListener("resize", handleResize);
  return () => window.removeEventListener("resize", handleResize);
}, []);

2. Forgotten Timers:

// ❌ BAD: Timer runs forever
setInterval(() => {
  fetchData();
}, 1000);

// ✅ GOOD: Clear interval
const timerId = setInterval(fetchData, 1000);
// Clear using clearInterval(timerId) when route changes or component unmounts.

3. Out of DOM References:

const elements = {
  button: document.getElementById("action-btn")
};
document.body.removeChild(elements.button);
// elements.button still references the node! Fix: elements.button = null;

Key Takeaways

• Closures preserve scope references, creating private variables.
• Prototypical Inheritance connects objects, letting child elements access parent methods.
• Modern ES6-ES15 APIs simplify tasks like deep copying (structuredClone) and dynamic properties checking (?.).
• Memory leaks occur when objects are kept reachable from the root after they are no longer needed.
• Garbage collection cleans up unreachable elements from memory.