Elevate Your JavaScript Skills: Mastering the Magic of Closures ??

??Closures - a concept in JavaScript that might seem complex at first, but is actually a game-changer once you grasp it

?1- Overview and concept

?2- Scoping in javascript

?3- temporal dead zone

?4- Closure in JavaScript

?1. Overview and concept

• Closures are one of the important concepts in JavaScript and are most widely used by developers either knowingly or unknowingly.
• A good understanding of this concept can play a pivotal role in creating maintainable code and will provide a better understanding of how code is working internally which will help in finding bugs and expecting the outcome.

?? before we start with closures we need to understand Scoping and temporal dead zone

?2. Scoping in javascript

• before ES6 There were 2 types of scope in JavaScript

function scope:

Variables declared within a function have function scope. They are only accessible within that function

global scope :

Variables declared outside of any function or block have global scope. They can be accessed and modified from anywhere in your code, including within functions and blocks.

Block Scope (introduced with ES6 using let and const)

Variables declared with let and const within a block (typically enclosed by {}) have block scope. They are only accessible within that block, which includes loops, conditional statements, and functions.

? Practical Example:

? 3. Temporal dead zone :

• The (TDZ) is a period in JavaScript during which a variable is declared but not yet initialized with a value.
• Accessing the variable during this period will result in a ReferenceError.
• It occurs with variables declared using let and const before they are assigned a value.
• The TDZ exists from the point of declaration until the variable is assigned a value, making sure that variables are used only after they are properly initialized to avoid unexpected behavior.

? Practical Example:

4. ?Closure in JavaScript

• Closures are a fundamental concept in JavaScript and many other programming languages.
• They refer to the combination of a function and the lexical environment within which that function was declared.
• This combination allows the function to remember and access variables from its containing (enclosing) scope even after the outer function has finished executing.

?? There are 4 key elements of closures:

?Function Declaration:

Closures are created when you declare a function within another function. The inner function is known as the "nested" or "inner" function, and the outer function is referred to as the "enclosing" or "outer" function.

?Access to Variables:

The inner function has access to its own local variables, as well as the variables declared in the outer function. It can also access global variables.

?Preserved Lexical Scope:

The key feature of closures is that they preserve the lexical scope, which means they remember the scope in which they were created, including all the variables in that scope.

?Independent Instances:

Each closure is an independent instance, so multiple closures created from the same outer function will have their own separate copies of the captured variables.

? Practical Example:

? Explanation:

1. outerFunction is a function that's defined. Inside this function, there's a variable named outerVar which is assigned the string 'I am from the outer function'.
2. Inside outerFunction, there's another function called innerFunction. This is a nested function, and it's defined within the scope of outerFunction. Importantly, innerFunction has access to all the variables in the scope of outerFunction, including outerVar.
3. outerFunction returns innerFunction as its result. This means that when you call outerFunction, it doesn't execute innerFunction immediately. Instead, it returns the innerFunction itself.
4. const closureExample = outerFunction(); calls outerFunction and assigns the result (which is the innerFunction) to the variable closureExample. Essentially, closureExample now holds the innerFunction.
5. Finally, closureExample(); calls the innerFunction that was assigned to closureExample. When innerFunction runs, it prints the value of outerVar, which is 'I am from the outer function'. This demonstrates the concept of a closure because even though outerFunction has already finished executing, innerFunction still remembers and has access to the outerVar variable from the outer function's scope.