26/02/2018

Anonymous functions, callbacks and chaining essentials in JS

Anonymous functions are functions that are dynamically declared at runtime.

They’re called anonymous functions because they aren’t given a name in the same way as normal functions.

Because functions are first-class objects, we can pass a function as an argument in another function and later execute that passed-in function or even return it to be executed later.

This is the essence of using callback functions in JavaScript.

Anonymous functions:

Let’s consider the following example:

function sum(a, b) {
return a + b;
}

console.log("Result: " + sum(2, 3)); //Result: 5

It’s clear that this function returns sumarization of two numbers,
by passing them into the function as arguments.
Let’s try to reimplement this function so that it could be called as follows:

console.log( "Result: " + sum(3,4) ); //Result: 7
console.log( "Result: " + sum(5)(4) ); //Result: 9

We already took care of the first example, but to achieve second result by the same function, we need to use anonymous function,
before that, let’s see an example of anonymous function:

function nonAnonymousFunction(a) {
return function (b) {
console.log("Non anonymous param: "
+ a + " Anonymous param: " + b);
};
}

nonAnonymousFunction("Hello")("World"); // Non anonymous param: Hello Anonymous param: World

First call of function returns a function that is then called by the second parentheses.

Now back to our mathematical example, implementation of anonymous function would go as follows:

function sum(a, b) {
if (b) {
return a + b;
} else {
return function (c) {
return a + c;
};
}
}

console.log("Result: " + sum(3, 4)); //Result: 7
console.log("Result: " + sum(5)(4)); //Result: 9

This can be simplified and optimized by usage of ternary operator:

function sum(a, b) {
return b
? a + b
: function (c) {
return a + c;
};
}

In ES6 we are also able to make it even shorter, by shortening the function definition:

sum = (a, b) => (b ? a + b : c => a + c);

Callbacks:

If you want to use the return value directly without having to assign it to a variable, you can use callback.

function functionWithCallback(callback) {
callback();
}

functionWithCallback(function () {
//DO SOMETHING
});

We are able to pass function as an argument and then call it, this is the simplest callback.

Another thing, we can pass params into callback when calling it, just as we would call any other function:

function functionWithCallback(callback) {
callback(1, 2, 3, 4);
}

functionWithCallback(function (a, b, c, d) {
console.log(a, b, c, d); // 1,2,3,4
});

Also a defined function can be passed as a callback:

function callbackFunctionfunction(a, b, c, d) {
console.log(a, b, c, d); // 1,2,3,4
}

function functionWithCallback(callback) {
callback(1, 2, 3, 4);
}

functionWithCallback(callbackFunctionfunction);

Now when we got through the essentials of callbacks, let’s use one in our sum function:

function sum(a, b, callback) {
callback(a + b);
}

sum(2, 3, function (result) {
console.log("Result: " + result); //Result: 5
});

a, b and callback function gets passed into sum, then the callback is called with one parameter, which is the result of a+b

Can we make this function be called in all three ways? Answer is yes:

function sum(a, b, clbk) {
if (clbk) {
clbk(a + b);
} else {
if (b) {
return a + b;
} else {
return function (c) {
return a + c;
};
}
}
}

Chaining:

From time to time, we have to run functions in a certain order, and this is where chaining comes in, or in modern way of doing thing Promises, but we need to understand chains before looking into Promise.

For example:

var myGlobalValue = 0;

chain("myGlobalValue")
.add(7)
.add(9)
.substract(2)
.add(9)
.substract(4);

console.log(myGlobalValue); // 19

To achieve this, we need to chain functions by returning them in the return object:

This is a simple way to chain mathematical functions over one variable.

We can also chain callbacks:

callbackChain()
.then(someFunction)
.then(otherFunction)
.then(evenOtherFunction)
.then();

This would also mean returning an object with variable then which is a function that returns itself while calling the callback:

var callbackChainResult = {
then: function (callback) {
callback();
return callbackChainResult;
}
};

function callbackChain() {
return callbackChainResult;
}

This could be also acheived without using .then() by returning the chain function that’s expecting callback as parameter:

function callbackChain(callback) {
callback();
return callbackChain;
}

Conclusion:

Most of the time we are using anonymous functions, callbacks and chains without even noticing or getting deeper into the functionality itself.
Knowing how and why it works as it works is what makes us create our own frameworks and customize others without dependency.