Hello readers, I will be going to explain one of the core concepts of JavaScript which is Closures in the next few minutes, bare with me

Hoping you have a basic knowledge of how javaScript works, we will build on top of that, so if you are not sure about it then consider reading this first here. Before going into what are closures let us try to understand some basics needed to get it right

Scope

This set of braces { } represents a block in javaScript, which helps in separating the code into pieces. Let's take an example to understand the scope

Example-1

function one() {
  const b = 10
  function two() {
    const e = 2
    console.log(b)
    console.log(a)
  }
  two()
}
const a = 100
one()
console.log(b)

//Output
reference error b is not defined
10 // value of b
100 //value of a

Referring to the piece of code above a can be accessed anywhere in code as it is a globally scoped variable which is not declared inside a block, whereas b which is declared inside a block, it shows that b is local scoped meaning b cannot be accessed directly outside of its block From the understanding above we can define scope as

Where in the code can we access the variable/function

Lexical Environment

The term Lexical means Hierarchy, Let me tell you how variable a is accessible in function two Lexical Environment means: > local memory + reference to lexical environment of its parent. Hold on => What this means is, the function one is the lexical (hierarchical) parent of function two as function two is physically present inside the function one. So function two has access to its local variables which is only e as of now and the lexical environment of its parent function one which is variable b, Again lexical environment of function one will be all its local variables plus the lexical scope of its parent so this chain goes on from child to parent to its parent and so on until the global scope This chain is called the scope chain

What are closures in javaScript?

Okay so we are done with closures, from the code snippet above you have already used a closure

A closure is a function bind together or bundled together with its lexical bindings we can also say function along with its lexical scope forms a closure Here is how it went It forms closure in function two and it accesses the variable from its lexical scope (function one), the function twowas bind to variables of function one.

Let's take another example to understand better As we know functions are first-class citizens in JavaScript, which means functions can be returned from another function or passed in as arguments to another function or can be stored in a variable

function one(){
  const a = 70
  function two(){
    console.log(a)
  }
  return two
}
const x = one()
console.log(x)
x()

When we execute the above code a global execution context will be created, and when execution comes to the line after the function one ends, It will call the function one and a new execution context will be created inside the function,then we returned another function two which will then be stored into the variable x $$\\$$ Then it moves to the next line console.log(x), Now the execution context of function one will be vanished, The next line will print the code inside of function two as we previously stored in variable x. Now we are calling x() on the next line and it will call function two So what should be the output? As its execution context was cleared so will it print the value of a ? Yes it will print 70 in the console The question is how/why? It's because of closures, When functions are returned from another function, even though their execution context gets vanished they still remember their lexical scope or bindings(you know what lexical scope is) Though function one doesn't exist now still function two remembers its lexical scope and has a reference to variable a and prints it in the console when called

I got clear with the concept of closures from this video series of Namaste Javascript by Akshay Saini. I hope you got the gist of what closures are, This is my first blog Please let me know your feedback. Thank you