Search for a command to run...
I'm a solutions engineer lead, GitHub Star, Director of WomenDevsSG, and co founder of ragTech. I work at the intersection of tech, systems, and leadership, and this blog is where I share my journey through all three. Expect honest reflections, real experiences, and thoughts that are still forming rather than polished career advice.
Thank you for such a nice article. I was struggling to understand callbacks and this is the first resource I have encountered through which I could relatively well understand what callbacks can do.
JavaScript is a dynamic and innovative programming language that is used to create websites and blogs, as well as programs on the web. Need to check here https://mightygadget.co.uk/how-to-write-an-assignment-first-page/ to manage their thesis task easily. JavaScript is a programming language with a huge influence on the internet and an ever-growing number of JavaScript books and tutorials across the web. Though JavaScript can be learned in as little as a couple of weeks, it is not at all intuitive.
Let's be honest. We all started from level 0. There's no shame in that. Here's the series for the newbies~ Hope you can learn and feel free to ask a lot of questions! Check my other series: Random project to build
Types of Errors If you are new to JavaScript, you probably encounter the 2 most common type of errors: Syntax Errors Logic Errors Syntax errors are basically spelling errors in your code. JavaScript is case-sensitive! So a little mistake in the ...
How to Install Skills + Installing gog skill + Setup workflows
Part 1 - Intro to OpenClaw + Setting up on Oracle Cloud Free Tier + Connect to Telegram
And what The Human Condition taught me about slowing down
Beyond the ethics and environmentalism, Karen Hao’s exposé reveals the chillingly brilliant, multi-move strategy of AI’s quintessential architect.
How the system really works, what most people miss, and how to make opportunities find you
Hello to coders and creative people! Previously, I noticed that a few of you who read my posts are currently learning JavaScript. Good for you! I hope you'll continue learning and building projects with the awesome JavaScript language.
So, I dedicate this post to those of you still learning about JavaScript and callback functions. Let's begin.
If you have never heard of a callback function, I'll tell you what it is in the simplest way I could think of...
It is a function passed as an argument of another function, to be executed later or immediately.
For example, take a look at these functions:
//Defining functions
function prepare(ingredients, callback) {
console.log("Preparing " + ingredients);
callback();
}
//callback function
function chop(){
console.log("Chopping");
}
//Calling the function
prepare("onions and garlic", chop);
In your daily life, you probably observed that a chef will prepare ingredients first then starts chopping them. The functions above illustrates that.
The prepare() function takes in 'ingredients' as its first argument and a callback function called chop() as the second argument, which will execute inside the prepare() function at a later time. So the console will print:
Preparing onions and garlic
Chopping
Most of the time, you won't see callback functions written like the example. Developers like to keep code concise so we can just insert chop() directly into prepare() like:
//Defining function
function prepare(ingredients, callback) {
console.log("Preparing " + ingredients);
callback();
}
//Calling the function
prepare("onions and garlic", function chop() {
console.log("Chopping" );
});
See? Now the code looks more concise! If you want to take it a step further, JavaScript has anonymous functions which lets you declare and execute functions without naming them. Callback functions can be anonymous functions like so:
//Defining function
function prepare(ingredients, callback) {
console.log("Preparing " + ingredients);
callback();
}
//Calling the function
prepare("onions and garlic", () => {
console.log("Chopping");
});
As seen above, now the callback function is not called 'chop'. It is nameless and therefore anonymous. I hope this helps you understand callback functions a little better.
**Key takeaway: **A callback function is a function passed as an argument of another function, which will be executed eventually. The callback function executes inside the main function and it is up to the main function to decide when to execute it.
So now you know that the main function which the callback is executed in has the power to decide when it executes. In the previous example, it executes immediately after the main function executes.
But there's also more that the main function decides for the callback. It may pass arguments to the callback function too. Let's see an example of a callback function with an argument.
Have a look at this block of code:
//Defining function
function prepare(ingredients, callback) {
console.log("Preparing " + ingredients);
callback(ingredients); //this time, ingredients is added as an argument for the callback
}
//Calling the function
prepare("onions and garlic", function chop(arg) { //chop() now takes in arg as an argument
console.log("Chopping " + arg);
});
This time, instead of just calling the callback function chop(), we pass in ingredients as an argument and tell it to print "Chopping " plus its argument when executed. You should see the console now printing:
Preparing onions and garlic
Chopping onions and garlic
It would seem lame if all callback functions can do is only like the examples I have shown you. But callback functions are also functions! Which means it can do anything a function can do too! So don't underestimate it!
Let's have another example. Say you want the console to print:
Preparing onions and garlic
Chopping onions
So that means the callback function has to take in ingredients and filter out words that are not onions so that it will only print "Chopping onions" instead of "Chopping onions and garlic". Let's write the function for that:
function chop(ingredients){
var value = ingredients.match(/\bonions\b/g);
if (value){console.log("Chopping " + value);} //Chop onions if one of the ingredients are onions
else{console.log("Not chopping");} //if no onions are found, no need to chop
}
In this callback function, we are asking it to find if the word "onions" is in the ingredients argument. If it is, it will print "Chopping onions". If not, it will print "Not chopping". Let's run this callback function as usual.
function prepare(ingredients, callback) {
console.log("Preparing " + ingredients);
callback(ingredients);
}
function chop(ingredients){
var value = ingredients.match(/\bonions\b/g);
if (value){console.log("Chopping " + value);} //Chop onions if one of the ingredients are onions
else{console.log("Not chopping"); } //if no onions are found, no need to chop
}
prepare("onions and garlic", chop);
Our console should display:
Preparing onions and garlic
Chopping onions
Yay! That's exactly what we want!
I hope this tutorial helps you understand what callback functions are, how to use them with/without arguments and how to make them as useful as functions! There are still many things to learn about callback functions so I encourage you to keep practicing and learn by building more projects. You'll soon see the beauty and incredible-ness of callback functions.
If you have any questions, remember that we are all here to help so feel free to leave a comment! If you find this tutorial useful, please let me know by clicking 'thumbs up' so I know that I should make more of it! Thanks for reading and have fun learning! Cheers!