Understanding JavaScript Callbacks

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

Previous Post

Resize All Images With Photoshop Actions

Resizing multiple images at once can be boring work. Adobe Photoshop helps us batch resize images.

Read article
Next Post

Understanding JavaScript Promises

Many people struggle with understand how Promises work (including me). Promises are fundamental to asynchronous coding in JavaScript. In this post we try to understand promises with basic examples.

Read article