Callbacks are fundamental to asynchronous coding in JavaScript. In this post, we try to understand callbacks with several examples.
setTimeout #
let logCallback = function(){
console.log("logCallback function was called back.");
}
setTimeout(logCallback, 3000);
// or
setTimeout(function(){
console.log("The function was called back.")
}, 3000);
Event Listeners #
<button type="button" id="my-button">CLICK HERE</button>
let myButton = document.getElementById("my-button");
myButton.addEventListener("click", function(){
console.log("My Button was clicked.");
});
Create Your Own Callback #
You may choose to create your own callback. We've been using some functions available in JavaScript that accept callbacks as a parameter.
let people = [
{name: "Yasin", age: 27, city: "Istanbul"},
{name: "Natalia", age: 24, city: "Lutsk"},
{name: "Json", age: 32, city: "Columbus"},
{name: "Stefan", age: 29, city: "Istanbul"},
{name: "Pimmy", age: 35, city: "Bangkok"},
{name: "Rose", age: 37, city: "Novosibirsk"},
{name: "Melis", age: 35, city: "Istanbul"},
{name: "Linda", age: 19, city: "Birmingham"},
];
let processPeople = function(data, callback){
for(let i = 0; i < data.length; i++){
if(data[i].age < 30){
if(typeof callback === "function"){
callback(data[i]);
}
}
}
}
// Retrieve people from array who is younger than 30 years old.
processPeople(people, function(obj){
console.log(obj)
});
// Retrieve people from array who is younger than 30 years old & who lives in Istanbul
processPeople(people, function(obj){
if (obj.city == "Istanbul"){
console.log(obj)
}
});
// Calculate age total + person count.
let determineTotal = function(){
let ageTotal = 0,
personCount = 0;
processPeople(people, function(obj){
ageTotal = ageTotal + obj.age;
personCount++;
});
console.log("Age Total: " + ageTotal);
console.log("Person Count: " + personCount);
}
determineTotal();
I wrote this blog post for consolidate my knowledge.
Main Source: https://www.youtube.com/watch?v=Nau-iEEgEoM