Course contents
- 01Variables
- 02Primitive Data Types
- 03Operators
- 04Conditionals
- 05Arrays
- 06Array methods and properties
- 07Objects
- 08Functions
- 09Callbacks
- 10Arrow functions
- 11Promises
- 12Async and await
- 13Loops
- 14DOM Manipulation
- 15Syntax parser
- 16Execution context and hoisting
- 17Call stack
- 18WebAPI and setTimeout
- 19Closures
- 20Function Constructors and Prototypes
- 21By value vs by reference
Callbacks
Functions can receive arguments, but have you ever thought about the possibility that one of these arguments can be a function? Yes, it can! Just like this:

Functions that receive functions are called higher order functions.
Functions that get passed to other functions are called callback functions.
We first define two functions: add, and multiply. Later on, we define a function called “calculate” which can receive three arguments: the first two are the values that we want to do some calculation with, and the third is the function that we can pass.
Asynchronous callbacks
Callbacks are a way to make sure certain code doesn’t execute until other code has already finished execution. The callback function is not run until the containing function invokes it, or “calls it back”. Once the containing function has stopped running, it calls back to the function that was passed in the parameter, hence the name callback function. This example is a synchronous callback, the callback function is being run where we invoke it. However, often callback functions are being executed after an asynchronous function has completed.
For example, you need to do homework but you forgot what the assignment was. In order to figure it out, you send a message to a friend and ask what the homework is. This could take a while: maybe your friend is busy and responds in 10 minutes, we don’t know! However, we’re not just gonna sit there and do absolutely nothing until he responds, instead we can still do other things such as listening to music and eating food.
Once your friend has responded, you know what the homework is, and you can actually do your homework. This would look something like:

Or in code:

Don’t worry if some of this syntax is still unfamiliar to you: I cover promises, arrow functions, and async/await in other blog posts! I invoke the higher order askHomework function with the callback function doHomework. If there is homework to do, this function will be invoked.
While you were was waiting for your friend to respond, you could still listen to music and eat snacks. You just made sure that the doHomework function didn’t get run before the askHomework function was completed: otherwise you wouldn’t know what homework to do!
References and further reading
- MDN: Callback functionThe definition and a simple example.
- MDN: addEventListenerCallbacks in the browser event system.