Memory Management & Garbage Collection

What potential memory issue does this code demonstrate?

function createNodes() {
  let div1 = document.createElement('div');
  let div2 = document.createElement('div');
  
  div1.onclick = function() {
    console.log(div2.innerHTML);
  };
  
  div2.onclick = function() {
    console.log(div1.innerHTML);
  };
  
  return { div1, div2 };
}

Stack overflow
Circular references
This code demonstrates circular references: 1) Each div element's event handler references the other div element, creating a circular reference structure, 2) div1 references div2 through its onclick handler, and div2 references div1 the same way, 3) In older JavaScript engines using reference counting, this would have caused a memory leak, 4) Modern mark-and-sweep algorithms can handle this situation correctly, 5) However, if these divs are removed from the DOM but the references aren't properly cleaned up, they may still prevent garbage collection, 6) This pattern can still cause memory issues in certain scenarios, especially when involving DOM elements, 7) Proper cleanup would involve removing the event handlers before deleting the elements, 8) Circular references should be carefully managed to avoid unintended memory retention.
Memory fragmentation
Too many DOM elements

Next Question (6/40)