Broad Network


Callback Function in ECMAScript 2015

Functions in ECMAScript - Part 4

ECMAScript 6

Foreword: In this part of the series I explain callback function in ECMAScript.

By: Chrysanthus Date Published: 25 May 2016

Introduction

This is part 4 of my series, Functions in ECMAScript. In this part of the series I explain callback function in ECMAScript. A callback function is a function whose call, is an argument to another function. You should have read the previous parts of the series before reaching here, as this is a continuation.

Callback Function
A callback function is a function whose call, is an argument to another function. The argument can be a function name with its own arguments, or a function expression with its own arguments. In the following code, the name of the callback function is used for callback:

    function cb (num)
            {
                $cb1 = num +1;
                return $cb1;
            }

    function fn (no)
        {
            $fn1 = no * 4;
            alert($fn1);
        }

    fn(cb(5));

You have two function declarations in the code. The name of the first function is cb() and the name of the second function is fn(). cb() adds 1 to its only argument and returns the result. fn() multiplies its only argument by 4 and returns the result. In the function call, the argument is another function call, which is cb(5). The argument of cb() is 5. With the argument of 5, cb() returns 6. 6 now becomes the argument of fn(). fn() multiplies 6 by 4 and displays 24.

The following code, is a repeat of the above, but the callback function is a function expression:

    cb = function (num)
            {
                $cb1 = num +1;
                return $cb1;
            }

    function fn (no)
        {
            $fn1 = no * 4;
            alert($fn1);
        }

    fn(cb(5));

The following code, is a repeat of the above, but the callback function is an arrow function expression:

    cb = (num) =>
            {
                $cb1 = num +1;
                return $cb1;
            }

    function fn (no)
        {
            $fn1 = no * 4;
            alert($fn1);
        }

    fn(cb(5));

Callback Argument as Function Expression
The callback argument to the main function call, can be a function expression. In this case, the function expression is accessed in the main function body using a variable for the function expression.

The following code, is a repeat of the above, but the callback function is an arrow function expression, as argument to the main function call:

    function fn (cb)
        {
            $fn1 = cb() * 4;
            alert($fn1);
        }

    fn((num=5) =>
            {
                $cb1 = num +1;
                return $cb1;
            });

The second code segment is the main function call with one argument, the arrow function expression (definition).

Note that in the argument list (group) of the arrow function, a value has been assigned to the variable, num.

Note that in the main function body, the function expression has been accessed as cb().

If you do not want the arrow function in the main function call, then you can assign a value to num before the call. The following code illustrates this:

    function fn (cb)
        {
            $fn1 = cb() * 4;
            alert($fn1);
        }

    num=5;

    fn(function ()
            {
                $cb1 = num +1;
                return $cb1;
            });

Note that the parentheses of the function expression argument list is empty.

If you do not want the extra assignment statement, then you have to type the value (5) in the parentheses of the callback function call, inside the definition of the main function. The following code illustrates this:

    function fn (cb)
        {
            $fn1 = cb(5) * 4;
            alert($fn1);
        }

    fn(function (num)
            {
                $cb1 = num +1;
                return $cb1;
            });

Note the presence of the variable, num (any name would do) in the function expression definition. During evaluation, 5 is assigned to num.

That is it for this part of the series.

Chrys

Related Links

ECMAScript Basics
ECMAScript Operators
Expressions in ECMAScript
Statements in ECMAScript
Custom Objects in ECMAScript
Functions in ECMAScript
More Related Links
PurePerl MySQL API
Web Development Course
Major in Website Design

BACK

Comments

Become the Writer's Follower
Send the Writer a Message