Callback Function 🔥

ramya_srim

Ramya Sri M

Posted on November 26, 2024

Callback Function 🔥

Callback Function

Functions are first-class citizens, meaning take a function and pass into another function.It provides access to the entire asynchronous world in a synchronous world.

function x(y){

}
x(function y(){

});
Enter fullscreen mode Exit fullscreen mode

Take a function y and pass it into another function x. Here, y is a callback function. This allows function x to call function y.

setTimeout(function () {
    console.log("Timer");
}, 8000)
Enter fullscreen mode Exit fullscreen mode

The function passed as the first parameter to setTimeout is the callback function, and the second parameter is the timer.

JavaScript is a synchronous and single-threaded language. However, with callbacks, we can perform asynchronous operations in JavaScript.

setTimeout(function () {
    console.log("timer");
  }, 6000);
  function x(y) {
    console.log("x");
    y();
  }
  x(function y() {
    console.log("y");
  });
Enter fullscreen mode Exit fullscreen mode
  • Look at the above code. Initially, x and y are present in the call stack, and then the call stack becomes empty. setTimeout will take this callback function and store it in a separate space, attaching a timer to it(Eg:6 seconds). After 6 seconds, the timer will be added to the call stack.

  • If x() takes 20 seconds to run, JavaScript must wait for it to finish. JavaScript has only one call stack, which is also referred to as the main thread.

  • Everything is executed through the call stack.

Blocking The Main Thread

  • Any operation that blocks the call stack is referred to as blocking the main thread.
  • Never block the main thread.

Always try to use asynchronous operations for tasks that take time, such as setTimeout.

Credits to Akshay Saini.

💖 💪 🙅 🚩
ramya_srim
Ramya Sri M

Posted on November 26, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related