What are callback functions in javascript

Before diving into callback functions, we need to understand what is a function in javascript.

What is a Function :

In JavaScript, a function is a block of code that is executed when it is called. Functions allow you to encapsulate a piece of code that can be executed multiple times, with different inputs. Functions are an essential part of JavaScript and are used to structure your code into reusable and manageable pieces.

A JavaScript function is defined using the function keyword followed by a name, a list of parameters enclosed in parentheses ( ), and a block of code surrounded by curly braces { }. Here's an example:

function greet(name) {
console.log("Hello " + name + "!");
}

This function, called greet, takes a single parameter name and prints a message to the console. To call this function, you simply use its name followed by a set of parentheses with any arguments you want to pass in:

greet("John"); // Output: Hello John!

Functions can also return a value using the return keyword. Here's an example:

function square(x) {
return x * x;
}

let result = square(5);
console.log(result); // Output: 25

In this example, the square function takes a single argument x, and returns the square of that value. The returned value is then stored in the result variable and printed to the console.

As we have built our basic understanding of functions, now we should move towards our main topic of the day named callback functions.

The first thing we must look at it is that in JavaScript functions are the first class object which means like other objects we can pass a function as an argument to other functions and even we can assign a function to a variable and also we can return a function from another function.

Now, Let's try to define it in simple terms.

What is a Callback Function:

A callback function in JavaScript is a function that is passed as an argument to another function and is executed after some kind of event or when a specific condition is met. Callback functions are a powerful tool for creating asynchronous code and allow you to structure your code in a more manageable way.

Here's an example of a callback function in JavaScript:

function add(a, b, callback) {
let result = a + b;
callback(result);
}

function logResult(result) {
console.log("The result is: " + result);
}

add(2, 3, logResult); // Output: The result is: 5

In this example, the add function takes three arguments: a, b, and callback. The callback argument is a reference to the logResult function, which is executed after the add function has finished computing the sum of a and b. When the add function is called, the callback function is passed the result of the calculation and is executed, logging the result to the console.

Callback functions are commonly used in JavaScript for handling events, such as button clicks or page load events, as well as for handling asynchronous operations, such as reading data from a file or making an API request. By using callback functions, you can write code that is executed only when certain conditions are met, without blocking the execution of the rest of your code. This makes it possible to write more efficient and scalable code in JavaScript.

Here is another example of using a callback function to handle an asynchronous operation in JavaScript:

function addNumbers(a, b, callback) {
  setTimeout(function() {
    let result = a + b;
    callback(result);
  }, 1000);
}

function logResult(result) {
  console.log("The result is: " + result);
}

addNumbers(2, 3, logResult); // Output after 1 second: The result is: 5

In this example, the addNumbers function takes three arguments: a, b, and callback. The function uses the setTimeout function to simulate an asynchronous operation that takes one second to complete. After one second, the callback function is executed, passing the result of the calculation to it. The logResult function is used as the callback and simply logs the result to the console.

By using a callback function in this way, you can write code that handles the response from the asynchronous request without blocking the execution of the rest of your code. This makes it possible to write more efficient and scalable code in JavaScript.

I hope, you understand how we can use the Callback function as I used very basic examples. In the next article, we will talk about why we need promises in Javascript to overcome the problem like callback hell.