JavaScript execution and what is meant by "Hoisting"

This blog is about how JavaScript Hoisting works behind the scene, one of the fundamental concept in javascript which developer usually ignore.


Below diagram explains how the Javascript engine works when code is executed.

  1. Parser in engine parse the code in Abstract Syntax tree

  2. Parsed code convert the code to machine language

  3. Finally the machine code is executed.


The code inside a function executed differently then outside javascript function, which are called context of execution in JavaScript.

Everything outside the function is executed in global execution context, when method is called like first(); in last line it is in global context then first function execution context is created stack on top of global then other functions like second and third are invoked which also get stacked up in execution context as log as execution is finished the execution stack is removed.

Hoisting is a conceptually the way the Javascript execution context works as mentioned above. It means function and variable declarations are hoisted means put into memory during the compile phase irrespective of its order in the code, therefore we can execute the function anywhere in code, doesn't matter its order in the code. Thanks to hoisting - Variables are set to undefined in creation phase.


Function expression : // this can’t be hoisted

const fname = function(){

}

Function declaration: // this can be hoisted

function fname (){

}



Execution Context Object

As mentioned in the screenshot above execution context of javascript has three part in creation phase.


Variable Object
  1. The argument object is created, containing all the arguments that were passed into the function.

  2. Code is scanned for function declarations: for each function, a property is created in the Variable Object, pointing to the function (Hoisting).

  3. Code is scanned for variable declarations: for each variable, a property is created in the Variable Object, and set to undefined (Hoisting).

Scope Chain
  1. Scoping answers the question "where can we access a certain variable?"

  2. Each new function created a scope: the space/environment, in which the variables it defines are accessible.

  3. Lexical scoping: a function that is lexically within another function gets access to the scope of the outer function.



"this" variable
  1. Regular function call: the this keyword points at the global object (the window object, in the browser).

  2. Method call: the this variable points to the object that is calling the method.

  3. The this keyword is not assigned a value until a function where it is defined is actually called.





Conclusion


To get better understanding of current context of javascript execution it is very essential to understand the execution context as we discussed here, next blog i will explain more about how this keyword is handled in javascript.



37 views0 comments

Recent Posts

See All

"this" in javascript

Here we will talk about this keyword in javascript and how it is different from any other javascript object. "this" is and current context object in runtime engine, but unlike any other object the pro