Understanding call back functions in JavaScript

A callback function is simply when we tell a function to run and when it is completed it should then call another function,this other function is called the callback function which would be inputed as a parameter or an argument. Some jS methods belongs to few objects that has parameter that requires a call back function, examples are .forEach(), setTimeout and a lot more, Later on I'll use forEach to give an example.

Why We need JS call back function

Call back functions helps us avoid unnecessary Errors or mistakes, it's clearer and safer to use when understood, some js methods belongs to few objects that has parameter that requires a call back function.

Simple Example of a javascript callback function

function xample(callback){
callback();
}

function hello() {
console.log("hello friends");
}

xample(hello)

This would simply log 'hello friends'
What we did in the above code is simple but looks complicated, let me break it down
First we created a function 'xample' then we passed in the parameter 'callback' which is an argument or a variable that we used to store another function, then we created the call back function which is 'hello' and we assigned the function 'hello' into the first function which is 'xample' by calling the 'xample()' and inputting the call back function into the 'xample(hello)' function this calls the hello function inside of the 'hello' function we added 'console.log("hello friends")' so each time we call the 'xample' function "hello friends" is printed which we logged inside of the call back function 'hello'.
You might be wondering why we didn't add parentheses to the hello function when we called xample function 'xample(hello)' like this 'xample(hello)' and you might be wondering why we passed inside of 'callback();' inside of the xample function , although the code can be run like this

function xample(callback){

}

function hello() {
console.log("hello friends");
}

xample(hello())

The reason we didn't do it at the above way is because we didn't want the code to be confusing and it's easier and better to pass the parenthesis inside of the 'xample' function by passing the argument/parameter inside of the 'xample' function with parentheses like this 'callback();', Now we understand this let's check out another example this time we would add a parameter to the first function xample

function xample(callback){
let name = 'Abod';
callback(name);
}

function hello(name) {
console.log("Hello", name);
}

xample(hello)

This time we passed a parameter or an argument with 'name' and we declared and assigned 'abod' to the name variable inside of xample and we logged name which would print
'Hello Abod', Now that we understand the call back function, why we should use them and how to use them ,let's give an example on how to use call back function on jS methods which belongs to few objects that has parameter that requires a call back function, we are going to use forEach()

/* 
In this code we want to add an HTML template to every element in an array using forEach and print as an array 
*/
Let rry= ['mike','zoey','sam,'abod'];
Let val = [];
rry.forEach(xample)
function xample(name){
val.push(`<li class ="mem">${name}</li>`); 
}
console.log(val);

}

There are other ways of doing this by creating a function inside of the for each but we are not focusing on foreach or arrow function, my next article would be about iterating an array using forEach.
I would be posting a link to the video tutorial soon
Image Credit to zeolearn,