Hoisting in JavaScript

Introduction

I‘m on a quest to become a JavaScript whiz! I’ve learned a bit about algorithms and frameworks, but I haven’t spent too much time on the under-the-hood aspect of JavaScript. Today, I’ll talk about hoisting and how it relates to our everyday JavaScript use. When you execute a piece of code, the JavaScript engine creates what is called the global execution context. The global execution context has two phases: creation and execution. During the creation phase, the JavaScript engine moves the variable and function declarations to the top of your code.

Variable hoisting

Variable hoisting means the JavaScript engine moves the variable declarations to the top of the script. The following example declares the variable and sets its value to 1:

console.log(counter); // undefined
var counter = 1;

However, the first line of code doesn’t cause an error because the JavaScript engine moves the variable declaration to the top of the script. Technically, the code looks like the following in the execution phase:

var counter;console.log(counter); // undefined
counter = 1;

Technically speaking, during the creation phase of the global execution context, the JavaScript engine places in the memory and initializes its value to undefined.

The keyword

The following declares the variable with the keyword:

console.log(counter);
let counter = 1;

This issues the following error:

"ReferenceError: Cannot access 'counter' before initialization"

The error message explains that is already in the heap memory. However, it hasn’t initialized.

Behind the scenes, the JavaScript engine hoists the variable declarations that use the keyword. However, it doesn’t initialize those variables. Notice that if you access a variable that doesn’t exist, the JavaScript will throw a different error:

console.log(alien);
let counter = 1;

Here is the error:

"ReferenceError: alien is not defined"

Function hoisting

Like variables, the JavaScript engine also hoists the function declarations. It moves the function declarations to the top of the script. For example:

let x = 20,
y = 10;
let result = add(x,y);
console.log(result);
function add(a, b){
return a + b;
}

In this example, we called the function before defining it. The above code is equivalent to the following:

function add(a, b){
return a + b;
}
let x = 20,
y = 10;
let result = add(x,y);
console.log(result);

During the creation phase of the execution context, the JavaScript engine places the function declaration in the heap memory. To be precise, the JavaScript engine creates an object of the type and a function reference called that refers to the function object.

Function expressions

The following example changes the from a regular function to a function expression:

let x = 20,
y = 10;
let result = add(x,y);
console.log(result);
var add = function(x, y) {
return x + y;
}

If you execute the code, the following error will occur:

"TypeError: add is not a function"

During the creation phase of the global execution context, the JavaScript Engine creates the variable in the memory and initializes its value to . When executing the following code, is , hence, it isn’t a function:

let result = add(x,y);

is assigned to an anonymous function only during the execution phase of the global execution context.

Arrow functions

The following example changes the function expression to the arrow function:

let x = 20,
y = 10;
let result = add(x,y);
console.log(result);
var add = (x, y) => x + y;

The code also issues the same error as the function expression example because arrow functions are syntactic sugar for defining function expressions.

"TypeError: add is not a function"

Similar to the functions expressions, the arrow functions aren’t hoisted.

Summary

  • JavaScript hoisting occurs during the creation phase of the execution context that moves the variable and function declarations to the top of the script.
  • The JavaScript engine hoists the variables declared using the keyword, but it doesn’t initialize them as the variables declared with the keyword.
  • Function expressions and arrow functions aren’t hoisted.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store