Scope

Scope

Where to look for variables. JavaScript is a compiled language. It is complied every time.

var foo = "bar"

Grammatically this is a single statement but for JS engine it is 2 different statements. In the first statement JS engine will initialize the variable foo when it is compiling our code and then in the second phase the execution phase variable foo will be set to a value which in this case is the string “bar”.

Undefined means it doesn’t currently have a value like an empty place holder.But it definitely has a declared variable.

As of ES3 the catch clause is a block scope. A caveat in ECMASCRIPT. Linter still don’t understand the nuance of block scope catch variables.

catch(err){
  console.log(err); // TypeError
}

Lexical Scope

It means compiled time scope. Where your variable sits lexically. All the scope decisions will be made during the compiled phase.

Dynamic Scope(this)

function foo() {
  console.log(bar); //foo
}
function baz() {
  var bar = "foo";
  foo();
}
baz();

As we see in lexical scope in function foo that would give an error because the bar doesn’t exist but in dynamic scoping function foo will look for bar in the function it is being called.

The decision for how scoping works in dynamic scoping is a runtime decision as opposed to lexical it’s a author time decision.

eval

A way to cheat the lexical scoping model that JavaScript has(eval parses it’s argument in statement context)

var bar = "bar";

function foo(str) {

  eval(str);    //cheating
  console.log(bar);   //42
}
foo("var bar = 42;");

We are passing variable declaration in the form of string in the function foo eval cheats it and pretends that the line of code has existed at compile time. It modifies the existing lexical scope of ‘foo’ and add a new declaration to it at run time.Which will then modify the existing scope.

Just by having eval present in code JS engine will have to disable some of it’s optimizations.

In strict mode it will not disable the optimizations but it will create a new scope for the eval statement.

with Keyword

var obj = {
  a: 2;
  b: 3;
  c: 4;
};

obj.a = obj.b + obj.c;
obj.c = obj.b - obj.a;

with(obj) {
  a = b + c;
  c = b - a;
  d = 3;
}
obj.d;  //undefined

d; // 3

As we can see we are repeating the obj reference again and again so to shorthand that we use the with keyword. It can make our code shorter and nice but there are some problems. On line 13 we are intending to create a d property on our obj Object.

But that’s not how it works it’s first gonna ask the Object obj if it’s got a reference to the d variable and that’s gonna say NO to it so it will go to the outer scope which in this case is the global scope and ask for the reference again. In this case global scope will say YES! I JUST MADE ONE FOR YOU.

With Keyword at runtime is creating a whole new lexical scope which will then effect our JS engine and it will disable it optimizations.

In strict mode with keyword is completely disallowed altogether.

Hoisting

Conceptual model how JS works. It’s not physically what actually happens. In ECMASCRIPT specifications there’s no mention of word hoisting anywhere. It’s a mental construct that we have invented to explain the behaviors of JS.

So the JavaScript engine has two phases one is compiled phase and the other one is execution. All the variable and function are defined or we can say hoisted during the compiled phase.

Recursion wouldn’t have been possible without hoisting. Like header files we put in the C program are manual hoisting. As compared to JS engine which automatically hoist the values.

this

Every function while executing has a reference to it’s current execution context called this. There are 4 rules for how the this keyword gets bound. They all depend on what we call the CALL SITE. A placing code where a function gets executed.

Default binding rule- Where the function call is right there after declaration like a normal function call. If we are in strict mode default the this keyword to an undefined value if we are not in strict mode default the this keyword to global object.

Implicit binding rule - When there is an Object property reference at the call site the containing object will become this binding.

Explicit binding rule- If we use call or apply at the call site both of these methods take this binder as their parameters then the this will point to that Object.

Hard Binding rule- Here the this will refer to obj even though we called obj2 in the last line with the call method. This is called hard binding. hiding the original function with a function expression which calls the original function but with a context bound exactly, because both have the same name you can’t have two references with the same name

one will be hiding the other one.but function foo still alive, and orig is making reference to it

function foo(){
  console.log(this.bar)
}
console.log(foo)
  var obj = {bar :"bar"}
  var obj2 = {bar :"bar2"}
  var orig = foo

foo = function(){
  orig.call(obj);
}
console.log(orig)
console.log(foo)
foo();           //bar
foo.call(obj2);  // bar

new

When we put the new keyword in front of any function call it magically turns that functional call into a constructor call.when we put a new keyword in front of a function call

1. A brand new empty is jut magically created out of thin air.

2. That brand new object gets link to a different object.*

3. The brand new object gets bounds as this keyword for the purposes of that function call.

4. If that function otherwise doesn’t return anything it will implicitly insert a return this.

function Cat(name , color){
  this.name = name;
  this.color = color;
}
var cat = new Cat(fluffy , white);

this keyword refers to an object. That object is whatever object is executing the current bit of code. by default that is the global object.

So when we executed this Cat function this was referring to a new empty object. That what new keyword does for us. It creates a new empty JS object. Sets the context of this to that new object and then calls the cat function.

So this Cat functions are commonly called constructor functions