JavaScript: Scope, Closure, Hoisting, this and new Keyword

Scope:
Finding the Variable in lookup.
Lexical identifier who is doing the looking. Lexical scope: Compile time scope- level wise scope search.
Java script has compiler but like other compiled languages C or C++ do not sent the binary complied code. Java Script compile every time run. Interpreter language.
In JavaScript, a name enters a scope in one of four basic ways:
1. Language-defined: All scopes are, by default, given the names this and arguments.
2. Formal parameters: Functions can have named formal parameters, which are scoped to the body of that function.
3. Function declarations: These are of the form function foo() {}.
Function as first class object with lexical(vocabulary) scoping.
Function creates a new scope. Unlike other languages If statements, do not create a new scope
var x = 1;
console.log(x); // 1
if (true) {
 var x = 2;
 console.log(x); // 2
}
console.log(x); // 2
To have own inner scope we can create a temporary scope Using IIFE inside if statement.
function foo() {
 var x = 1;
 if (x) {
  (function () {
   var x = 2;
   // some other code
  }());
 }
 // x is still 1.
4. Variable declarations: These take the form var foo;
Declaration of variables as LHS = RHS
 var foo=”bar”;
Here Global Scope have a LHS reference of var foo.
function scope  {
X= “cvd”;  //This assign to a global variable in global scope as we have a LHS is here so while going up one level in global scope and create one.
}
Asking scope engine about LHS reference.
var foo = 1;
function bar() {
 if (!foo) { // Here the variable is created in global scope initialized with default value 0
  var foo = 10;
 }
 alert(foo);
}
bar();
Hence the above function will print ’10’.

Function Declaration:
function baz(){  function bar(){}};
Herr bar() Is a RHS because this is not a LHS with no assignment operator..
baz();  will give Error. RHS identifier doesn’t exist & it will give a reference error bcz function is declared inside a another function.
Function Expression:
If we have a function expression… var foo= function baz(){..};
 baz();  will give error.
**Dynamic Scope: Run time: go up level from where the function is being called from.
**Way to create a new scope:  function, Catch block, curly braces with let keyword.
undeclared(reference error) & undefined(doesn’t currently have a value).
var foo = function () { // function expression assigned to local variable ‘foo’
  alert(“this won’t run!”);
 }
 function bar() { // function declaration, given the name ‘bar’
  alert(“this will run!”);
 }
Closure:
Closure is -when a function remember its lexical scope even when function is executing outside that defined lexical scope.
Closure is kind of hidden reference to scope object.
Click event handler able to return to environment because of closure.
Scope : execute a function create a scope.
If there at least on closure over scope the scope does not go away.
**Function callback inside a loop.
for(var i=0 ; i <= 5; i++ ){
// Put IIFE
  setTimeOut(function(){
    alert(“i: ” + i);
  },i*1000);
}
Putting IIFE inside the loop will solve issue of having a new scope.
Inside loop IIFE will add a new scope.
Classic module pattern:
Outer inclosing wrapper function
One or more inner function.– keeps closure over private scope.
Modern Module Pattern:
Future/ ES 6+ module Pattern:- export import
Benefits of module pattern: Hiding things, Public APIs
Disadvantage/ Trade Off: testing not all public.
Function declaration and Expression.
Declaration–Function keyword very first thing in statement.
If it’s not declaration then it is expression.
Named function expression bar
Var foo = function bar(){};
bar(); // Error
**Safe thing to put function name in case of function expressions.
In debugging get in debug stack traces.
Hoisting:
Compiler pulls up the declaration first.
function test() {
 foo(); // TypeError “foo is not a function”
 bar(); // “this will run!”
 var foo = function () { // function expression assigned to local variable ‘foo’
  alert(“this won’t run!”);
 }
 function bar() { // function declaration, given the name ‘bar’
  alert(“this will run!”);
 }
}
test();
In this case, only the function declaration has its body hoisted to the top.
This:
Every function while executing has a reference to its own current execution context called that reference this keyword.
Execution context means where the function is called, how the function is called when called.
lexical scope and dynamic scope are different.
The new Keyword:
1. Create a brand new object
2. Object get linked.
3. The context get set.
4. Returns this.

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s