Intro to Callback in JavaScript

Intro to Callback in JavaScript

Foundation of callback function and use cases in JavaScript. In JavaScript, functions are objects, which means, like any other objects it can be assigned to a variable and passed as an argument to another function. In a nutshell, a callback function is _a function_ that is provided as a _parameter_ for other methods such as forEach method or addEventListener method and gets invoked at a certain point in time.

During my journey of learning JavaScript and a few days in with React, I had to come to terms with callback functions. It was impossible to avoid its existence and blindly using it without understanding. To understand callback function we have to know a bit about functions. Here I want to talk about function expression, arrow function, and callback function.


What is a Callback function?

According to MDN doc:

A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action.

In JavaScript, functions are objects, which means, like any other objects it can be assigned to a variable and passed as an argument to another function. In a nutshell, a callback function is a function that is provided as a parameter for other methods such as forEach method or addEventListener method and gets invoked at a certain point in time.

Passing functions as arguments

So how do we do this? Let’s see with an example below:

document.addEventListener(‘click’,whoAmI);

//whoAmI Function Declaration(Function Statement)
function whoAmI(event){
  console.log(event.target.tagName)
}

We attached the ‘click_’ event listener to _document with whoAmI function as a parameter that logs the tag name of the clicked target. Whenever ‘click’ happens whoAmI function will be called with an _event_ argument. We call whoAmI a callback function.

When we call a function by its name followed by ( ), we are telling the function to execute its code. When we name a function or pass a function without the ( ), the function does not execute.** The callback function doesn’t execute right away. Instead, the addEventListener method executes the function when the event occurs.**

One more thing I want to mention is because we used function declaration, we were able to call thewhoAmI function before it was declared. It’s the magic of hoisting in JS. But with function expression, it doesn’t get hoisted. So the order of writing function expressions and using them as callback would be crucial.

callback javascript callback-function function javascript-fundamental

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

What is Callback-Function in JavaScript? How it is Replaced By Promises?

Let us understand term Callback by an real-world example: Suppose, you are calling to your Girlfriend (If you have) and she is busy in another call then she send message to you : “I am busy right now, Call back you later.!!”. After completing her work, she calls you back and this is what call back in JavaScript as well. In this post, we'll discuss What is Callback-Function in JavaScript? How it is Replaced By Promises?

Function Expression vs Function Declaration in JavaScript

In this article, we will acquaint ourselves with three simple terms: function declaration, function expression, and hoisting.

What is a Callback Function in JavaScript?

What is a Callback Function in JavaScript? Learn JavaScript Callback Functions with Example --- Callback functions are an important part of JavaScript and once you understand how callbacks work, you’ll become much better in JavaScript.

The real reason why JavaScript has arrow functions

The real reason why JavaScript has arrow functions Nowadays, all my code is based on the use of arrow functions. If you are still not using them yourself, then don’t be ashamed of who you are. That’s your parent’s job. Instead, find about all the benefits that you can get by using arrow functions like the cool kids. You may notice that the code is shorter and that there is an arrow. Everything before the arrow is arguments of the function and everything after the arrow is always returned as the result of the function.

JavaScript Course : Callback Functions in JavaScript

We'll be going to learn about callback functions in JavaScript, which is very important.