Hoisting in JS

therealsuhail — Mon, 27 Jun 2022 15:26:06 +0000

Hey geeks, today let's read about hoisting in JS.

Hoisting is one of those fundamentals which i feel every JS developer should know.
In simple terms, hoisting allows you to use functions and variables before they are declared.
Let us look at the code below

console.log(name)
var name = 'hello JS'

In this case, JS will not throw any error rather it outputs 'undefined'. This is what hoisting is all about. It happens since JS allocates memory to variables and functions followed by the execution. In the memory allocation phase, variable name is being initialized with undefined , that is why it does not throw any error. Knowing about execution context will help you understand hoisting in a better way. You can check my article on execution context here

Variable hoisting

Variable hoisting behaves differently depending on how the variables are declared. Let us take a look at the code below

console.log(testVar)
let testVar = 'hello JS'

It is quite surprising that it throws a reference error unlike var. const also exhibits the same behaviour. we get such errors when let and const are in temporal dead zone. Temporal dead zone is nothing but the time between the variable is declared and assigned value.

let and const were introduced in ES5 to avoid using variables before their declaration. It is to be noted that interpreter hoists let and const, but in some other memory space, whereas in case of var it is hoisted in global execution context.

Function hoisting

Functions are also hoisted in the same way like variables. Let us take a look at the following code.

getName()
function getName() {
    console.log("function")
}

Here it outputs 'function' since getName is allocated memory before execution.

let us look at another example

getName()
const getName = () => {
  console.log("Inside function")
}

Here you will be surprised to see that it throws reference error unlike the previous example. It is because 'getName' behaves like a variable here. Only function declarations are hoisted and not function statements.

Behind the scenes in JS

therealsuhail — Wed, 06 Oct 2021 14:20:01 +0000

Hey everyone. Hope you all are doing great. This is my first blog and I hope that you will like and share it among your tech buddies.

Today I am going to walk you through Execution Context in JS.I have been coding in JavaScript for the past few months and I found out that many people miss out on this topic. Especially if you are a beginner, this is a must read.This topic is a base for learning advanced topics like hoisting, closure and scope chain.

Execution context is an environment where everything happens in JS. All your memory allocations and code executions.

There are 3 types of execution contexts:

Global execution context (GEC) – GEC is where all your global variables and functions are stored.There can not be more than one GEC in JS as it is a single threaded language.
Functional execution context (FEC) – FEC is created each time a function is called in JS. There can be ‘n’ number of FECs, since there can be many functions called from a JS file.
Eval : Execution context inside eval function.

Execution context has a stack data structure where it follows a last in first out(LIFO) data structure.Always GEC will be pushed first followed by FECs.Each FEC will be popped once it is fully executed.
You can refer the figure below for more clarity on this.

As each function gets executed , it gets popped out of the stack.

Execution context in JavaScript engine happens in 2 steps:

Creation phase – this is the phase where memory is allocated to all your variables and functions.
Code execution phase – this is the phase where our code logic is executed.

Don’t worry if you did not get what I wrote above, I will help you understand with an example.You just have to keep reading for that😃.

Let's look at this simple program of adding two numbers

let a = 10
let b = 20
function add(a, b){
   let num1 = a
   let num2 = b
   return num1+num2
}
let result = add(a, b)
console.log(result)

We all know that the output is "30".But let's dive in to know what actually happened to get us this output.

First phase is where we allocate memory to all the variables and functions in GEC. It will look something like this:

GEC is then pushed inside the stack.

Second phase is where the code starts to execute and starts assigning values to those variables we created. It is to be noted here that every time a function is called, it creates a new execution context.

As the code starts to execute, variables 'a' and 'b' gets assigned their respective values and when function 'add' is called, it creates a new execution context.This function execution context is then pushed into the stack.

once the code in function "add" gets executed, it returns the value '30' and function execution context is removed and popped out of the stack.

Once JS executes the last line .i.e printing the 'result' global execution context gets removed and hence popped out of the stack.
This is what happens when you execute every JS program. Hope you would remember execution context when you write your next JS program.

Please feel free to give your comments below. I wanted to show you the full flow by using debugger , but it will make this article too long.May be i will include that in the next post😃.

Thank you

DEV Community: therealsuhail

Hoisting in JS

Behind the scenes in JS