CHAPTER 3- HEART AND MIND OF JAVASCRIPT.
STAR OF JAVASCRIPT = FUNCTION
Functions are the main “building blocks” of the program. They allow the code to be called many times without repetition. Simply , a block of code separated out for reuse.
Now , In midst of basic Functions theory that you might have done tons and tons of time in other programming languages , JS allows to store function inside a variable and use it .
This does not change anything in the working of Functions. It is just a mere part of Functional Programming in JS which is in trend now.
But what make JS unique is the way the functions in JS work , or you can say Behind the Scenes of it.
The output drawn is pretty similar. But its behind the scene is pretty intelligent.
We all know whenever we run a JS program , a global execution context is created with its variables and functions which is put on call stack .
Remember the picture of Execution Context:
In first phase , some memory must be allocated to variables and functions in general such that var: undefined func :{....}//code
Second phase is then executed accordingly to fill the value of variable and starts function invocation leading to the creation of brand new execution context over Global Execution Context(GEC).
New thing to wonder here is: Global Execution context has its won memory space and functions invocation from it will have its own memory space. Memory space is categorized into Global and Local Memory space .
Local will follow then second phase of execution context for its own memory space and then the process starts.
Summary is : So every Execution context maintains its own memory space even if Execution Context is created by function or it is Global Execution Context or any other Execution Context. That is they would have their virtual kind of environment independent of each other..
And thus the functions in JS proves their worth.
PEAK A BOO FROM JAVASCRIPT WINDOW
Guess the output:
var a =10;
console.log(a);
console.log(window.a)
console.log(this.a)
So JS Engine is very hardworking and do a lot for you without asking for credit. Do you know,
JS Engine creates something called window. It is nothing but something that contains lots of variables and functions created by JS engine into global space so that you can access these variables and functions anywhere.
JS Engine also creates "this" keyword which points to the window object.
Something fishy right??
See Window is a global object created along with Global Execution Context along with that global object and thus "this" is created.
Remember global object in case of browser = window.
All JS Engines have this responsibility in creating this global object. Global object is called with different name in different JS Engines like browser , Nodejs , Mozilla Firefox etc.
At global level: this === window returns absolute true.
Summary is anything you create in global space gets attached to the global object.
STRONG CHAINS OF JAVASCRIPT:~
Consider a Scenario: Blue guy at very center got candy , he can eat its own candy. But in some case if he does not have his own candy ,
he can ask orange guy for candy and if orange guy does not have ,
he can ask from purple guy as well.
But according to the society , But if blue guy got his candy , he can eat his own. But if orange guy as his own candy , he can eat but if he does not have he cannot ask from blue guy but can ask from purple guy. And Similarly purple guy cannot ask for candy from any orange or blue guy. ` Before getting more into these gibberish words: Lets visualize some outputs:
We can shape everything into the concept of execution context. Remember Scope is directly proportional to lexical environment. So whenever execution context is created a lexical environment is created, where lexical environment = local memory + lexical environment of its parent . Lexical references hierarchy.
Let us first make its execution context:
Working: A global execution context space(GEC) is created with two phases of execution with a lexical environment of its parent NULL on call stack .
Then function a() is defined which invoke a brand new execution context over GEC with a lexical environment of its parent GEC with initialization of variables .
Then function c() is defined invoking a brand new execution context over a() with a lexical environment of its parent a() with initialization of variables.
SOLUTION:
The work of c() is processed which in turn takes you back to a() and then to GEC and then to NULL.
Until then if value of b is not found , it gives the error: b is not defined.
The process completes and call stack gets empty and execution context gets removed for that particular JS program .
Summary is: So execution context works like finding : c() is lexically sitting inside a() and a() is lexically inside global space.
And the process of doing so much tedious work is called SCOPE CHAIN which tells whether variable or function is present inside the scope.
MIND JS THIS
Objects are the basic building blocks in JavaScript. There’s one special object available in JavaScript, the this object. You can see the value of this at every line of JavaScript execution.
The value of this is decided based on how the code is being executed.
console.log(this)
gives access to global context! How? Now I think you know the answer.
Surprisingly now not,
In Nodejs it gives us an output of empty scope.
But in the browser it gives us an access to global context which is a window object.
console.log(this) inside a function gives a lot of description about Object. But in browser it gives same window object always.
Summary is:
The window object is the global object in the case of the browser.
And in a NodeJS environment, a special object called global will be the value of this.