Memory Management & Garbage Collection

What should be added to the destroy method to prevent memory leaks?

class Component {
  constructor(element) {
    this.element = element;
    this.handleClick = this.handleClick.bind(this);
    this.element.addEventListener('click', this.handleClick);
  }
  handleClick() {
    console.log('Clicked');
  }
  destroy() {
    // Component cleanup
  }
}

this.element = null;
delete this.handleClick;
this.element.removeEventListener('click', this.handleClick);
The destroy method should remove the event listener: 1) Event listeners create strong references between DOM elements and callback functions, 2) Failing to remove event listeners can prevent objects from being garbage collected, 3) The correct cleanup requires explicitly calling removeEventListener with the same function reference, 4) Setting this.element = null isn't sufficient because the event listener maintains a reference, 5) The handleClick method is bound in the constructor specifically to maintain the same reference for proper removal, 6) This pattern of binding in constructor and removing in destroy is a common best practice, 7) Proper cleanup is especially important in components that may be created and destroyed frequently, 8) Simply nullifying references without removing listeners is a common cause of memory leaks in web applications.
this.handleClick = null;

Next Question (18/40)