namaste-javascript-notes

Episode 14 : Callback Functions in JS ft. Event Listeners

Callback Functions

Functions are first class citizens ie. take a function A and pass it to another function B. Here, A is a callback function. So basically I am giving access to function B to call function A. This callback function gives us the access to whole Asynchronous world in Synchronous world.
```
setTimeout(function () {
  console.log("Timer");
}, 1000) // first argument is callback function and second is timer.
```
JS is a synchronous and single threaded language. But due to callbacks, we can do async things in JS.
```
setTimeout(function () {
  console.log("timer");
}, 5000);
function x(y) {
  console.log("x");
  y();
}
x(function y() {
  console.log("y");
});
// x y timer
```
- In the call stack, first x and y are present. After code execution, they go away and stack is empty. Then after 5 seconds (from beginning) anonymous suddenly appear up in stack ie. setTimeout
- All 3 functions are executed through call stack. If any operation blocks the call stack, its called blocking the main thread.
- Say if x() takes 30 sec to run, then JS has to wait for it to finish as it has only 1 call stack/1 main thread. Never block main thread.
- Always use async for functions that take time eg. setTimeout

// Another Example of callback
function printStr(str, cb) {
    setTimeout(() => {
        console.log(str);
        cb();
    }, Math.floor(Math.random() * 100) + 1)
}
function printAll() {
    printStr("A", () => {
        printStr("B", () => {
            printStr("C", () => {})
        })
    })
}
printAll() // A B C // in order

Event Listener

We will create a button in html and attach event to it.

// index.html
  <button id="clickMe">Click Me!</button>

// in index.js
document.getElementById("clickMe").addEventListener("click", function xyz(){ //when event click occurs, this callback function (xyz) is called into callstack
      console.log("Button clicked");
});

Lets implement a increment counter button.

Using global variable (not good as anyone can change it)

  let count = 0;
  document.getElementById("clickMe").addEventListener("click", function xyz(){ 
      console.log("Button clicked", ++count);
  });

Use closures for data abstraction

  function attachEventList() {  //creating new function for closure
      let count = 0;
      document.getElementById("clickMe").addEventListener("click", function xyz(){ 
      console.log("Button clicked", ++count);  //now callback function forms closure with outer scope(count)
  });
  }
  attachEventList();

Event Listerner Demo

Garbage Collection and removeEventListeners

Event listeners are heavy as they form closures. So even when call stack is empty, EventListener won’t free up memory allocated to count as it doesn’t know when it may need count again. So we remove event listeners when we don’t need them (garbage collected) onClick, onHover, onScroll all in a page can slow it down heavily.

Watch Live On Youtube below:

This site is open source. Improve this page.