DONATE  
MENU
HTML
JSON
AJAX
PHP
CSS
JAVASCRIPT
MYSQL

JavaScript Tutorials

INTRODUCTION

» Introduction to JavaScript

» Practice IT Editor

» JavaScript Example

» JavaScript Placement

» JavaScript Syntax

» JavaScript Statements

» JavaScript Input

» JavaScript Output

» JavaScript Comments

» JavaScript Variables

» Variables' Scope

» JavaScript Operators

» JS Expressions & Concatenation

» JavaScript Data Type

» JavaScript Numbers

» Number Object

» JavaScript Strings

» String Object

» JavaScript Booleans

» Boolean Object

» JavaScript Functions

» JavaScript Arrays

» Array Object - Properties

» Array Object - Methods

» JavaScript Objects

» JavaScript Undefined

» JavaScript Nulls

CONDITIONAL TESTING

» If Statement

» If Else Statement

» JavaScript Ternary Operator

» Switch Statement

LOOPS

» For Loops

» While Loops

» Break & Continue

» For...In Loops

» do...while Loop

FUNCTIONS

» JavaScript Functions

» Creating Functions

» Functions' Parameters

» Functions' Arguments

» Function Invocation

» The Return Keyword

» The Arguments Object

» Callback Functions

» Arrow Functions

ARRAYS

» JavaScript Arrays

» Creating Arrays

» Accessing Arrays

» Looping Arrays

» Multi - dimensional Arrays

OBJECTS

» JavaScript Objects

» Creating Objects

» Prototype Definition

» Accessing Objects

» The this Keyword

AJAX

» Introduction to AJAX

JSON

» Introduction to JSON

JAVASCRIPT DATES

» The Date Object

» Date Methods

» Timing (SetInterval & SetTimeout)

MATH OBJECT

» Math Object

» Math Methods

HTML / JS DOM

» DOM Introduction

» Accessing HTML Elements in DOM

» Get And Change Elements' Contents & Values

» Change Styling - DOM CSS

» DOM Attributes

» JavaScript Event Listeners

» DOM Event Listeners

» JS Events

MISCELLANEOUS

» JS Strict Mode

» JavaScript Hoisting

» JavaScript let keyword

» Reserved Keywords

» JS Best Practices

» JavaScript vs ECMAScript

JAVASCRIPT EXAMPLES

» JavaScript Calculator

.. » JavaScript » Functions » Callback Functions
Share Tweet WhatsApp

Callback Functions

A callback function is a function definition passed to another function as an argument which the function is in turn expected to invoke.
<button onclick='myFunc(sum)'>Click</button>

<script>
function myFunc(callbackFunc){
callbackFunc(2, 5);
}

function sum(x, y){
alert(x+y);
}
</script>

Copy PRACTICE IT

In the above, when a button is clicked, a function (myFunc) is called. The argument assigned to the function was the definition of another function (sum). Remember, when you call a function without parentheses, its definition is returned. Inside the definition of myFunc(), the sum() function is invoke and then, the sum() does what it was created for. The callback function in this case is the sum() whose definition was passed as an argument to myFunc to invoke. You may wonder as to why not call the function directly instead of passing its definition as an argument just as shown below,
<button onclick='myFunc()'>Click</button>

<script>
function myFunc(){
sum(2, 5);
}

function sum(x, y){
alert(x+y);
}
</script>

Copy PRACTICE IT

The above will definitely work but then, it defeats the aim of the callback of a thing. The callback parameter is there so that whatever function definition that is given to it as an argument, it should be able to execute it just as shown below,
<button onclick='myFunc(myFunc1)'>Func1</button>
<button onclick='myFunc(myFunc2)'>Func2</button>
<button onclick='myFunc(myFunc3)'>Func3</button>

<script>
function myFunc(callback){
callback();
}

function myFunc1(){
alert("This is function 1 speaking");
}

function myFunc2(){
alert("This is function 2 speaking");
}

function myFunc3(){
alert("This is function 3 speaking");
}
</script>

Copy PRACTICE IT

Above, there are three buttons. If any is clicked upon, it calls a function (myFunc). The myFunc also has a parameter which should be assigned a callback and yes, the various buttons assigned different callback functions. The callback of any was executed whenever clicked upon. Callback functions are very useful as they allow you to invoke whatever function inside a function. A very great example of where a callback function is being applied is the addEventListener() of HTML elements. The addEventListener method has a parameter for a callback function so that whenever an event takes place, whatever callback function you specify will be executed. Callback functions should be assign without parentheses? A callback function should be assign as an argument to a function without parentheses. This is because you are not invoking the function but rather assigning the name as an argument to the function that will invoke it whenever deemed necessary. To demonstrate,
<script>
//This function expects a callback to execute when its variable "a" equals 0
function myFunc(func){
var a = 1;
if (a == 0){
func()
}
}

//This is the function, we plan passing to it
function myAlert(){
alert("Alerted");
}

//Calling and assigning the function to it
myFunc(myAlert()); //The callback is with parentheses
</script>

Copy PRACTICE IT

Above, you can see the importance of assigning a callback function without parentheses. In the above, the callback is expected to be invoke only when variable "a" is equal to "0" but then, it executed even when "a" was equal to "1". This is not because it was invoke rather by assigning it with parentheses, you are as well invoking it directly. Right Way...
<script>
//This function expects a callback to execute when its variable "a" equals 0
function myFunc(func){
var a = 1;
if (a == 0){
func()
}
}

//This is the function, we plan passing to it
function myAlert(){
alert("Alerted");
}

//Calling and assigning the function to it
myFunc(myAlert); //The callback is without parentheses
</script>

Copy PRACTICE IT

What if the function has parameters? If a function has parameters whose arguments need to be pass when the function is invoked, we then need to create what is known as an anonymous function. An anonymous function is a function without a name. For example,
myFunc(function (){ });
Above, we just created an anonymous function as a parameter to a function. Inside the function, you can then call your function with arguments.
myFunc(function (){
sum(2,4,5);
});
SUMMARY
  1. A callback function is a function definition passed as an argument to another function.
  2. The function it was passed to then executes the function if deemed necessary.
  3. A parameter that expects a callback function as an argument allows us pass just any function to it and it will execute.
  4. When assigning a callback function as an argument, it should not be accompanied with parentheses.
  5. This will ensure the callback function doesn't execute immediately but until the function it was assigned to invokes it.
  6. If the callback function has parameters, we can therefore create an anonymous function and have the callback inside.
  7. In this case, the function it was assigned to will invoke the anonymous function which will in turn invoke the main callback.
  8. An anonymous function is a function without a name such as those we create on variables.
Take a short quiz on Callback Functions.
Ask a question or tell us if Callback Functions is easy or not.
cent?

Join our 1,090 subscribers to receive tutorials' updates!

  We won't spam your mail box. We hate it.





StackBeginner 2021 © Joseph Omamode