Day 20 of 30 JavaScript

Hey reader👋 Hope you are doing well😊
In the last post we have talked about about hoisting and interpolation in JavaScript. In this post we are going to know about Callbacks in JavaScript and an introduction to Asynchronous and Synchronous JavaScript.
So let's get started🔥

Callbacks in JavaScript

A callback is a function passed as an argument to another function.

Here forEach is a method available on arrays in JavaScript.
It iterates over each element in the array and executes the provided callback function (fun) once for each element.
So here we have a method foreach in which fun is argument.

We know that JavaScript functions are executed in the order they are called and sometimes we would like to have better control over when to execute a function. So to have better control over execution of functions callbacks came into picture. You will know more about these when we will discuss about Asynchronous JavaScript.

Application of Callback functions ->

1. Event handlers -> In event-driven programming, such as in web development, callback functions are used to handle events like clicks, form submissions, and mouse movements.
   
   So here when a button with id myButton is clicked (an event occured) then a callback function is called and executed.

2. Higher-order Functions -> Callbacks enable higher-order functions, which are functions that take other functions as arguments or return them. This allows for more abstract and flexible code.
   
   Here forEach method takes fun function as argument and calls it for every array element.

3. Customizable Behavior -> Callbacks allow functions to be customized. Instead of writing multiple functions with slight variations, you can write one function that takes a callback to perform specific actions.
   

These are highly used in Asynchronous JavaScript. But to understand the use of callbacks in Asynchronous JavaScript. It is very important to understand Synchronous and Asynchronous JavaScript.

Synchronous JavaScript

Synchronous JavaScript executes code sequentially, one statement at a time. Each operation must complete before the next one starts. If a task takes a long time to complete, it blocks the execution of subsequent code.

So here you can see that first hello is printed then I am Akshat and then Bye.Here every line in executed in a sequence this is what Synchronous JS is.

Asynchronous JavaScript

Asynchronous JavaScript allows code to run without blocking the execution of other operations. When an asynchronous operation is initiated, it allows the code to continue executing while waiting for the operation to complete.

So here you can see that hello is printed first then there is a timeout having a callback function and delay of 2000 milliseconds i.e. 2 seconds. JS sees the timeout and then executes it in background and move forward and prints Outside timeout first and when timeout is ready it executes timeout. This is what Asynchronous JavaScript is.
Now you may be thinking that why do we need Synchronous and Asynchronous JS. The answer is simple as Asynchronous JS doesn't blocks the execution of code so it is important while fetching data from API and other places where we don't want to block the execution.
Synchronous JS is necessary where we need some data from user to proceed further and at places where blocking is important.

So this was it for this blog. I hope you have understood it. In next blog we will read more about Asynchronous JS. Till then stay connected and don't forget to follow me.
Thankyou 🩵