Swastik Yadav

S Y

Navigate back to the homepage
Subscribe

Callback functions and closures in JavaScript

Swastik Yadav
July 9th, 2021 · 1 min read

Hello Everyone,

In this post we will explore the HOF (Higher order function), Callbacks, and the crazy JavaScript Closures.

Higher Order Function

A function which accepts a function definition as a parameter and/or returns a function is HOF (Higher Order Function).

For instance:

1function isEven(n) {
2 return n % 2 === 0;
3}
4
5function printMsg(evenFunc, num) {
6 const isEven = evenFunc(num);
7 console.log(`The number ${num} is even: ${isEven}`);
8}
9
10printMsg(isEven);

In the above snippet printMsg is the Higher Order Function, because it accepts the isEven function as parameter.

Callbacks

A callback is a function passed into another function as an argument to be executed later. In the last code snippet isEven is the callback function.

It is called callback because it calls back to the place where it was created.

Let’s see one more example.

1let numbers = [1, 2, 4, 7, 3, 5, 6];
2
3function isOddNumber(number) {
4 return number % 2;
5}
6
7function oddNumbers = numbers.filter(isOddNumber);
8console.log(oddNumbers); // [1, 7, 3, 5]

In the above code snippet isOddNumber is the callback function. Callback functions can be used to handle Async JavaScript.

Closures

From execution context, we know that after a function is returned, it is removed from the call stack and deleted from execution context. So, keeping that in mind, here is the definition of a closure.

A closure is a function which has access to the outer variables even after the outer function is returned.

1let x = 10;
2
3function foo() {
4 let y = 20;
5
6 function bar() {
7 let z = 15;
8 return x + y + z;
9 }
10
11 return bar;
12}
13
14let test = foo();
15test(); // 45

In the above code, bar is the closure function, which has access to outer variables (x and y) even after outer function is returned.

Simplified Closure Definitions:

  • A closure is function which remembers the environment in which it was created.
  • When a function is returned from an outer function, it carries the environment with itself.

Closures are possible in JS because of Lexical Scoping. Lexical scoping means, If a variable is not found in the local scope, it looks in the outer scope, and so on till the global scope.

lexical-scoping

Exeption in closures

There is just one exeption in closures. In JavaScript every function is a closure except for functions created via “new Function” syntax.

Usually a function have access to the lexical environment where it was created. But when a function is created via the “new Function” syntax, it doesn’t have access to the lexical environment but the global one.

1function getFunc() {
2 let value = "test";
3
4 let func = new Function('alert(value)');
5
6 return func;
7}
8
9getFunc()(); // error: value is not defined

So, functions such as func (in above code) doesn’t have access to outer variables, only to the global ones.


So, that’s it for this post. I hope you learned something new, if so, please do share and join my email newsletter below or here.

Thank You!

More articles from Swastik Yadav

How JavaScript works behind the scene - Execution Context and Call Stack

Learn how JS works under the hood and how functions are executed in JavaScript with execution context.

July 2nd, 2021 · 2 min read

Shallow cloning vs Deep cloning

The difference between shallow and deep cloning, How to implement them, and the pitfalls with shallow cloning.

June 25th, 2021 · 1 min read

Become a better full-stack developer in 10 minutes a week.

Be the first to receive our latest content with the ability to opt-out at anytime. We promise to not spam your inbox or share your email with any third parties.



By subscribing, you agree with Revue’s Terms and Privacy Policy.
© 2021 Swastik Yadav
Link to $https://twitter.com/swastikJsDevLink to $https://github.com/SwastikyadavLink to $https://www.linkedin.com/in/swastik-yadav-6386b71b5/Link to $https://www.youtube.com/channel/UCHs73qDeimVFGTa-MzjtnLA