Hellllooooooo!
Hope you're doing great! This is SMY! Welcome to my second article 👋
In this article, we are going to learn about Closures in JavaScript.
Contents:
-
⚡
Closures simple definiton -
⚡
Closure Example
**Let's start **🚀
Closures are one of the most fundamental topics of JavaScript nowadays. If you happen to give an interview or will, you must know your Closures well!
Closures Simple Definiton
Closures are simply functions bundled together. Each function inside a closure has access to its parents and its parents and so on.. lexical environment or in other words has access to the variables and functions defined, created or initialised in its own scope and its ancestors.
Let's take a look at simple example, in which adding up two numbers.
Example:
const add = (num1) => { // outer function
return (num2) => { // inner function
return num1 + num2;
};
};
console.log(add(1)(2)); // logs 3
Let's break down what's happening on inside.
Whenever a function is created in JavaScript, it makes its own execution context and lexical environment. The inner function(s) have access to its parent or any of its ancestors lexical environment, that is because its own execution context and lexical environment is created inside those.
Lets visualise this with JavaScript.
{ // add execution context and or outer func
const memory = { // outer lexical environment
num1: 1,
};
{ // inner func execution context
const memory = { // inner lexical environment
parentMemory: super.memory
num2: 2,
};
}
}
We can see here how the inner memory has access or reference to all of its parents memory, which contains variables and functions if any.
One thing may be curious to you, is that how can the inner function has access to the num1 if outer function finished executing before inner function?
The reason is, the inner function as visualised above in example code has the reference to parents memory or lexical environment.
That's the basics of how we can use Closures in JavaScript.
That's it, folks! hope it was a good read for you. Thank you! ✨