
Today we are going to learn about a concept that is widely used in javascript and that is used quite a lot by today's frameworks, libraries, especially NodeJS. This is the use of Callbacks.
What is a Callback?
Simplifying, it is to pass a function as a parameter so that this function runs our parameter. You may have already done it in C#, PHP or Java: make your function/method return something to perform the action.This is what we usually do as programmers.
In the following example, the function foo receives by parameter another function, which is the callback. The function foo is in responsible of executing the callback.
function foo(callback) { //do something callback(); }
It is important to take into account that when we pass a callback we only pass the definition of the function and do not execute it in the parameter.
So, the container function chooses when to execute the callback.
A very common example of callback is as a listening function of an event.
function showAlert(){ alert('Alerta'); } button.addEventListener('click', showAlert);
In this example, showAlert
is a callback. We can also write the callback as an anonymous function:
button.addEventListener('click', function(){ alert('Alerta'); });
Callbacks are also used to "warn" when a function has finished doing something:
function foo(callback) { console.log("hello") callback(); }foo(function(){console.log("finished")}); → hello finished
The use of callback is also known as callback pattern, since it is essentially a pattern as it is a solution to common problems. In addition, the use of callbacks is related to functional programming, which specifies the use of functions as arguments.
Callbacks can help not to repeat code and its maintenance, to get more specific functions and, in some cases, to improve the level of abstraction and code reading.
Checking the asynchronous execution with callbacks
The callbacks themselves are synchronous. In the following example, it is the container function that chooses when the callback is executed, and it is executed without causing another execution flow.
function foo(val, callback){ if(val == 1){ callback(true); } else{ callback(false); } }
Therefore, callbacks are very useful for handling asynchrony in JS. For example, they can be very useful when we are testing asynchronous elements.
Let's see an example.
Within a test, we create a setTimeOut
(asynchronous method since it causes another execution flow). The test can work incorrectly because it does not wait for the asynchronous operation to be finished and it does not get executed.
To make sure that the content of the setTimeOut
is always executed, we pass a callback to it. Until the callback has been called, JS will not leave the test (i.e. the function).
it("checks something of the DOM", function (done) { foo1(); foo2(); foo3(); function onTimeout() { expect(parseInt(element.innerHTML)).toEqual(x); done(); } setTimeout(onTimeout, 1000); });
Let's see what the order of execution is:
it("restart the counter time", function (done) { console.log(1); foo1(); console.log(2); foo2(); console.log(3); foo3(); console.log(4); function onTimeout() { console.log(5); expect(parseInt(element.innerHTML)).toEqual(x); console.log(6); done(); console.log(7); } console.log(8); setTimeout(onTimeout, 1000); console.log(9); });
El orden de ejecución, al pasar el test, es el siguiente:
1 2 3 4 8 9 5 6 7
With the done
parameter we make sure that the number 5, 6 and 7 are always executed.
Let's see the case where we don't pass callback to the test:
it("restart the counter time", function () { console.log(1); foo1(); console.log(2); foo2(); console.log(3); foo3(); console.log(4); function onTimeout() { console.log(5); expect(parseInt(element.innerHTML)).toEqual(x); console.log(6); } console.log(8); setTimeout(onTimeout, 1000); console.log(9); });
The order of execution, when passing the test, is as follows:
1 2 4 8 9
Neither the 5th nor the 6th is ever executed.
Callbacks to eliminate knowledge on the dependencies
In a code, it is usual that there are functions that depend on other functions. When many parts of our code depend on other parts, it is easier for some methods to affect others without us having foreseen it or for any future change to be complex and laborious. In general, the less dependency, the better.
There are several ways to eliminate dependency and one of them is the use of callbacks. This is not a common solution nor can we use it in every situation, but it can help us in certain cases.
Through callbacks, we can reverse the dependency at the knowledge level and make one function unaware of the other function it is executing.
Let's look at an example with a countdown:
var seconds = 20;function startCountDown(){ setInterval(function(){ seconds--; showSeconds(); }, 1000); }function showSeconds(){ console.log(seconds); }startCountDown()
The startCountDown
function depends on the showSeconds()
function. Every second, startCountDown
executes the showSeconds
function. If we want to minimize this dependency, we can make the startCountDown
function unaware of the showSeconds function by passing it a callback.
var seconds = 20;function startCountDown(onTimeChanged){ setInterval(function(){ seconds--; onTimeChanged(); }, 1000); }function showSeconds(){ console.log(seconds); }startCountDown(showSeconds);

Silvia Mazzetta
Web Developer, Blogger, Creative Thinker, Social media enthusiast, Italian expat in Spain, mom of little 7 years old geek, founder of @manoweb. A strong conceptual and creative thinker who has a keen interest in all things relate to the Internet. A technically savvy web developer, who has multiple years of website design expertise behind her. She turns conceptual ideas into highly creative visual digital products.
Related Posts
How to use the endsWith method in JavaScript
In this short tutorial, we are going to see what the endsWith method, introduced in JavaScript ES6, is and how it is used with strings in JavaScript. The endsWith method is…
What are javascript symbols and how can they help you?
Symbols are a new primitive value introduced by ES6. Their purpose is to provide us unique identifiers. In this article, we tell you how they work, in which way they…
Callbacks in JavaScript
Callback functions are the same old JavaScript functions. They have no special syntax, as they are simply functions that are passed as an argument to another function. The function that receives…
How to create PDF with JavaScript and jsPDF
Creating dynamic PDF files directly in the browser is possible thanks to the jsPDF JavaScript library. In the last part of this article we have prepared a practical tutorial where I…
How to make your own custom cursor for your website
When I started browsing different and original websites to learn from them, one of the first things that caught my attention was that some of them had their own cursors,…
Node.js and npm: introductory tutorial
In this tutorial we will see how to install and use both Node.js and the npm package manager. In addition, we will also create a small sample application. If you…
How to connect to MySQL with Node.js
Let's see how you can connect to a MySQL database using Node.js, the popular JavaScript runtime environment. Before we start, it is important to note that you must have Node.js installed…
JavaScript Programming Styles: Best Practices
When programming with JavaScript there are certain conventions that you should apply, especially when working in a team environment. In fact, it is common to have meetings to discuss standards…
Difference between arrow and normal functions in JavaScript
In this tutorial we are going to see how arrow functions differ from normal JavaScript functions. We will also see when you should use one and when you should use…
JavaScript Arrow functions: What they are and how to use them
In this article we are going to see what they are and how to use JavaScript Arrow Functions, a new feature introduced with the ES6 standard (ECMAScript 6). What are Arrow…
How to insert an element into an array with JavaScript
In this brief tutorial you will learn how to insert one or more elements into an array with JavaScript. For this we will use the splice function. The splice function will not…
What is the difference between primitives types and objects in JavaScript?
In this short tutorial we are going to look at the differences between primitive types and objects in JavaScript. To start with, we're going to look at what primitive types…