Javascripts hidden treasures BY - https://geekyants.com/

Javascripts hidden treasures BY - https://geekyants.com/

• 1.
  JavaScript’s Hidden Treasures: Closures and Hoisting By Geekyants
• 2.
  INTRODUCTION JavaScript possesses manyhidden features that can often make us feel confused and bewildered. Let’s demystify two of them. 1. Closures 2. Hoisting
• 3.
  Closures We encounter closuresseveral times while coding in JavaScript. So it’s quite necessary to understand what they actually signify. Let’s first zip through some formal definitions. What is a closure? • A closure is a function that has access to the parent scope, even after the scope has returned we can also define it as: • A closure is the combination of a function and the lexical environment within which that function was declared.
• 4.
  Scope The Scope isessentially the lifespan of a variable in JavaScript. Where a variable is defined plays a large role in how long that variable is around, and which functions in your program have access to it. So it would be safe to say that any function can be considered a closure because a function can refer to or have access to: • Any variable or parameter in its own function scope. • Any variable or parameters of its outer (parent) functions. • Any variable from the global scope.
• 5.
  Definition of closureinto 3 parts. 1.We can refer to variables defined outside of the current function. Here, the printData() function refers to the type variable and the model parameter of the enclosing function setData(). So when setData() is called, printData()uses the variables and parameters of the former to print the output “Audi is a Car”.
• 6.
  Inner Functions 2.Inner functionscan refer to variables defined in outer functions even after the latter have returned. The code may seem similar to the one in the first point. But here printData() is returned inside the outer setData() function, instead of being immediately called. So, the value of currentData is the inner printData() function.
• 7.
  3. Inner functionsstore their outer function’s variables by reference, not by value Here, carData() returns an object containing two closures,get() and set(), and they both refer to the outer variable Car. While get()obtains the current value of Car, set()updates it. When myCar.get() is called for the second time, it prints the updated value of Car – “Mercedes” – rather than the previous value “Audi”.
• 8.
  Closure Features Closures haveanother very interesting features which is that the variables in a closure are automatically hidden. Closures store data in their enclosed variables without providing direct access to them. The only way to alter those variables is by providing access to them indirectly. For example, in the last code snippet, we saw that we can modify the variable Car only obliquely by using the get() and set() closures.
• 9.
  Loops Looping is somethingthat tends to take a toll on everyone. When loops are not written correctly, we are left with weird outputs. Let’s look at one such example where a loop produces a confusing result. Running the code snippet should give us the output as: 0 1 2 But instead our output will be: 3 3 3 JavaScript is single-threaded so it keeps an event queue where it queues up things to do. The closure created in each loop iteration is queued to run as soon as the rest of the current execution context finishes and CPU time is returned to the event loop. setTimeout here serves to simply defer the execution of each closure until after the loop finishes running. By that point, the final value of i is ‘3’.
• 10.
  Solution to overcome the problem We can use closures to overcome this problem. In the following code snippet, we make use of a closure by defining nested functions. The code prints the desired output, which is: 0 1 2 If you already have a loop that you don’t want to convert to use an iterator function, all you have to do is wrap your closure inside another closure in which you define new variables which capture the current value of the variables that change on each iteration. The trick to capturing the variables is to make sure your outer closure executes immediately during the current iteration of the loop. Now the above code snippet will produce the desired result!
• 11.
  Hoisting Hoisting is employedto explain how Variables and Function declarations are ‘lifted’ to the top of a function or a global scope. A JavaScript interpreter performs many things behind the scene, and one of them is called hoisting. The best way of thinking about the behavior of JavaScript variables is to always visualize them as consisting of two parts: a declaration and an assignment. var state; // variable declaration state = "ready"; // variable definition (assignment) var state = "ready"; // declaration plus definition
• 12.
  Declarations & Definition Tounderstand why the concept of function declarations and definitions getting pushed to the top and assignments staying is important, let’s consider a simple example. • At first look, this piece of code makes no sense, for the simple reason that not only is the variable state being print even before it is declared but also the function hoisting()is being called before it is even defined. Normally Line 1 should throw an error since state as it is not even declared yet. • Also, why is the statement at Line 9 printing undefined even though the variable stateis already declared at Line 3?
• 13.
  Types of executioncontext There are two major types of execution contexts in JavaScript —Global execution context and Function execution context. Since JavaScript is based on a single-threaded execution model, only one piece of code can be executed at a time. For our code, the process is as follows : While the execution context keeps track of the execution of the code, Lexical environment keeps track of the mapping of identifiers to specific variables.
• 14.
  Lexical environment • Lexicalenvironment basically is an internal implementation of the JavaScript scoping mechanism. • Generally, the lexical environment is associated with a specific structure of the JavaScript code. For example, a function or a block of code like a forloop. Whenever a function is created, a reference to the lexical environment in which it was created is passed internal property named [[Environment]]. • So in our code example, the first time we print the value of the state, it does not throw an error because internally JavaScript has already assigned an identifier to it, which is not assigned any value. So it prints undefined The second time it is called, it again prints undefined because now it is in the hoisting()execution context and not in the global execution context. In this context, the variable state is still undefined.
• 15.
  Change of Code •Now let’s change our preceding code a bit. This time we print the value of the variable state before hoisting() . • This time, our code prints Ready instead of undefined. As we learned in the earlier section, this happens because now we are in the global execution context and not in Hoisting’s function execution context.
• 16.
  Things to remember •Both function and variable declarations are hoisted to the top of the containing scope, before any part of our code is executed. • Functions are hoisted first, and then variables. • Function declarations have priority over variable declarations, but not over variable assignments.
• 17.
  Conclusion JavaScript developers oftenface these issues, but fail to grasp the reason behind the unexpected behavior. Through this presentation, we tried to clear some of the myths and ambiguities that a developer often comes across while dealing with Closures and Hoisting.
• 18.
  THANK YOU