Execution contexts, Lexical enviroments & Hoisting. Learn advanced concepts in minutes

Execution contexts, Lexical enviroments & Hoisting. Learn advanced concepts in minutes

This article is a compose of some of my notes, it may not be as clear or well writted as you expect

→ When Javascript Engine see () its going to create an execution context, then, it tries to add it to the callstack and run it. This happends every time the javascript engine recognize a pair of brackets. When the javascript engine start, it creates the Global execution context (global()), and it add it to the callstack as the base. Its the first thing in the stack, and the last thing to pop up it. All our javascript code its runned inside this Global Execution Context. The Global Execution Context gives us the Global Object and the this keyword, that its assigned to the global object (it depends of the runtime: Brower -> Window, node -> Global).

Lexical Enviroment

→ Where you write your code. When we create an execution context, whe create an entire universe(lexical enviroment) within it. A lexical analysis is just an analysis that determines in wich lexical enviroment the code was written.

→ In javascript our lexical scope (available data + variables where the function was defined) determines our available variables. Not where the function is called (dynamic scope)

Hoisting

→ Is the behavior of moving to the top the variables of function declariations to the top of the respective lexical enviroment during compliation fase. Variables are partially hoisted, and function declaration are fully hoisted. The javascript engine allocates memorie for the variables and functions that it sees in your code during the creation fase before it executes it. Let and Const don't get hoisted

console.log(sing())
(function sing() {
    console.log('ohhh la la la')
})

--> sing its not definded because its not defined in the global execution context,
        but in its own execution context

Javascript engine its not really moving the variables and the function declarations to the top of the file, it first allocates memory to them if they are in the global execution context and then runs the file in it self

→ There are 2 fases when a new execution context is created: The creation fase (lexical enviroment, lexical scope and variable enviroment and hoisting) and then execution fase (interpreter)

Arguments: The arguments keyword let us access to an object that give us all the arguments a funtion recives and their respective positions. Its a bad practice because it can bring the compliler into a deoptimization

Variable enviroment: Where variables live in each execution context

Scope Chain: A scope chain is a chain that connects a child execution context to its parent execution context. That let as access variables and functions defined but a parent execution context from its childs

→ In javascript our lexical scope (available data + variables where the function was defined) determines our available variables. Not where te function is called (dynamic scope)

→ The compiler, before running the code, construct the scope chains and the lexical scopes of each execution context, so it can know wich is the scope of every variable and function

→ The lexical scope its also known as the [[Scope]]

→ When you initialize a variable without any keyword in a execution context, the globla execution context would create it for you as a var