JavaScript Under the hood

Scope:

• Scope is like a boundary in a regular terminology, where we are restricting few of the variables to be accessible in that boundary itself.
• We have 3 types of scopes

  Global Scope

• Variables declared in the root of the file and we can use wherever in the document is called Global scope.

Local Scope/ Function Scope :

When a datatype is declared within the parentheses then it is called Function Scope. We can access that variable within a function Scope.

In this below example I tried to access carName variable (console.log(carName)) outside of the local scope it returned error.

Block Scope

If the variables are declared inside if(){} or forloop(){} then it is called as block scope. See the below example for clear understanding.

Here we are trying to access "x" variable inside the if statement.

If we try to access the value of "x" outside of the if block scope then we get an error.

Single threaded programming language

• JavaScript is a synchronous single threaded programming language. Synchronous which mean an event is happening and everyone in the event are participating. Single threaded meaning in the same event there are multiple tasks going to take place and instead of doing all the tasks at a time. Each task is going to happen one after another.
• Same thing in JavaScript as well everything which was written on script page its going to read everything from top to bottom.

Call Stack

• In JavaScript we have two contexts one is global context(global execution phase) and the other is execution context(execution phase) inside the call stack. If you open chrome developer tool (by right clicking on the web page in the bottom we see inspect when we click on inspect) we will see on right side when we direct to source page. Below picture shows how to navigate to source on dev tools.

Here I just declared var a ="name"; When I place debugger at var a and reload the page. we will see the var a is undefined in the global scope because first it creates or scans the whole page and when it goes to global execution phase in the callStack var a="name" is generated in the memory.

So in the below image when the debugger is clicked to next function call an anonymous phase is created which is nothing but the global execution phase.

Call stack helps us to keep the track of functions executed when there are huge number of functions in the codebase. The functions that are invoked gets pushed to the stack and pops off the stack after the function call is completed printing the result. Below example gives a clear picture of call stack.

Call stack Example:

After scanning all the elements that are presented on global scope when the function starts to execute global context execution phase is created and when sum function gets invoked the sum function is pushed to the stack on top of Global context and gets popped out after it returns the result.

After placing the debugger at all the three functions and reload the page. First it will trigger running sum function since JavaScript is a single threaded programming language it runs from line to line. It first creates Anonymous(Global Execution context/phase) and on top of that sum functions gets stacked when the debugger reaches to next function call sum function gets popped off. It happens the same with rest of the functions aswell.

Hoisting

• Here comes the important part in JavaScript which is called Hoisting.
• Hoisting is a JavaScript mechanism where variables declared with var keyword and function declarations are moved to the top regardless of whether their scope is global or local. So let's not get confused with statements Here are some code samples.

• If we try to access without declaring variable then it throws reference error. So we should always declare the elements or datatypes.

• Hoisting only works for global scope keywords. If we try to access the variable prior to their declarations using Let and Const it throws reference error always. Since let and const are not global scope and it does not scan the variables that are not in global scope.

Hoisting in functions

• We can write functions in three types

• Function Declaration :

  Here in Function declaration when the function is invoked on top of the declaration multiplication function is creating a memory in Global scope and global context is created and for every function call execution context is created in the call stack.

Here a is local scope since a has been declared inside the function scope we can only access a inside the scope.

If we try to access the a outside then it will throw error.

Here in this function b can be accessed before declaring with value undefined even inside the function scope only if it is declared with Var keyword.

• Function Expression

  Here we are storing the function to a variable var and if we try to invoke the function before function expression. Firstly it creates result() in the global scope with value undefined. If we try to invoke it in the top. function result is not stored in the memory creation phase and does not create a execution context phase of function result in the call stack and thus gives the error.

• Arrow Functions :

Function reference is created in the global scope when we invoke the function at the bottom.

Function reference is not created in the global scope when we invoke the function at the top.