Skip to main content

JavaScript Hoisting

By

 Hoisting

JavaScript Hoisting refers to the process where the interpreter allocates memory for variables and function declarations prior to the execution of the code.

Declarations that are made using the var keyword are initialized with the default value of undefined

Declarations made using the let and the const keywords are not initialized as a part of the hoisting 

Hoisting takes place during the creation phase of the Execution Context.

consider the following script:


 output: undefined


Steps involved in the execution of the above script:

  1. A new Global Execution Context is created.
  2. num variable is initialized with undefined.
  3. In the execution phase, the code is executed line-by-line.
  4. In the first line it logs undefined to the console.
  5. Line two is skipped as it already defined num in the creation phase.
  6. In line three a value of 6 is assigned to num.

let and const keywords

let and const keywords are hoisted but not initialized

Consider the following script:


 output: ReferenceError: num is not defined


What happened in the above script, as the let is not initialized with any value it throws a reference error. 

Temporal Dead Zone

let and const keywords can't be read/written until they have been fully initialized, which happens when they are declared. If no initial value is specified on the declaration, the variable is initialized with a value of undefined. Accessing the variable before the initialization results in the reference error. 
let and const are hoisted and initialized with undefined. But as they reside in a special memory location called Temporal Dead Zone, they cannot be referenced until and unless they are initialized.

Function Hoisting

Normal Functions

Normal functions are fully defined in the context creation phase and referenced to Function Execution Context.

Normal functions are always fully hoisted. 

Function Expressions 

Functions in JavaScript are first-class citizens. They are treated just similarly to any other variable or data type.

Consider the following scripts:


 output: 7




TypeError: y is not a function



In the second example, at the creation phase, the JS engine sees y as a variable and initializes it with undefined. In the creation phase, it doesn't know it is a function.

Arrow functions

Arrow functions are hoisted in a similar way as function expressions.



TypeError: add is not a function


Labels:

Comments

Post a Comment

Popular posts from this blog

JavaScript Runtime Environment

By
 What is a Runtime Environment? A runtime environment is where your program will be executed. It determines what global objects your program can access and it can also impact how it runs. How does the JavaScript Environment Work? The JavaScript runtime environment provides access to built-in libraries and objects that are available to program so that it can interact with the outside world and make the code work. Different browsers have different JavaScript Runtime Environments. In the context of a browser, JS runtime  is comprised of the following elements: The JavaScript Engine Web APIs The Call Back Queue The Event Loop The JavaScript Engine All the browsers have a JavaScript Engine. But all are not necessarily the same engine. Also, all the engines follow the same standard although their implementation is different. For example, Google Chrome has the V8 engine and Mozilla Firefox has Spyder Monkey as a JavaScript engine. The JavaScript Engine parses the code for us. It has two major
Post a Comment
Read more

JavaScript Scopes

By
 What is a variable scope? The visibility and accessibility of a variable is determined by its scope. JavaScript has three scopes: Global scope Local scope and Block scope Global Scope A variable that can be accessible everywhere in the script.  Local Scope    If you declare a variable inside a function are local to the function. They are called local variables. Output:  I am from say I am from global Scope Chain If interpreter cannot find a variable in its local context, then it looks for it in parent contexts until it's found. This is called scope chain. Output:  Hello I am message In the above script, the JavaScript performs the following: It looks up for the variable message in the current context (Functional Execution Context) of the say(). But it cannot find it. So it goes out of the function and looks in the outer execution context which is the global execution context. It found the message variable there. The way that JavaScript resolves a variable is by looking at in its c
Post a Comment
Read more