Callback Functions in JS ft. Event Listeners 🔥| Namaste JavaScript Ep. 14

Summary

The video explains how JavaScript callback functions work, using timers and browser event listeners as examples.

Main Ideas

• Callbacks are functions passed to other functions. Because JavaScript treats functions as first-class values, one function can be supplied as an argument to another. The receiving function can call it later, which is why it is called a callback.
• Callbacks enable delayed or event-driven work. For example, setTimeout accepts a callback to run after a delay rather than immediately.
• Timers don’t stop JavaScript from doing other work. Synchronous JavaScript runs on the call stack. Once a timer’s delay has elapsed, its callback can run when the stack is clear. The delay does not guarantee that the callback runs at that exact moment.
• Long synchronous work blocks the main thread. While JavaScript is busy with a long task, it cannot promptly handle other work, such as a click callback. Lengthy operations should not monopolize the main thread.
• Event listeners use callbacks. A handler can be attached to a button or another DOM element so the browser calls it when an event, such as a click, occurs.
• Closures preserve data for callbacks. A callback can retain access to variables from the scope where it was created. The video illustrates this with a counter that increases when a button is clicked.
• Remove listeners when they’re no longer needed. Event listeners can retain references to their callbacks and related data. Removing unused listeners can help avoid unnecessary memory use, particularly on pages with many elements or listeners.

Practical Pattern

1. Select the DOM element that should respond to an event.
2. Create a handler function, optionally using variables captured through a closure.
3. Register the handler with an event-listener method such as addEventListener.
4. Let the browser invoke the handler when the event occurs.
5. Remove the listener when it is no longer needed, using the handler reference that was registered.

Speakers and Sources

• Akshay Saini — presenter and narrator.
• JavaScript code and browser developer-tools demonstrations — used to illustrate callbacks, timers, and event listeners.