Hoisting 🏴‍☠️ ? …is this a Ship? 🤨

Home / Hoisting 🏴‍☠️ ? …is this a Ship? 🤨

Hoisting means that your declarations, i.e. functions and variables, will always be placed in memory at the top of the execution context.

Hoisting was thought up as a general way of thinking about how execution context (specifically the creation and execution phases) work in JavaScript. However, the concept can be a little confusing at first. When the JavaScript engine gets our script, the first thing it does is setting up memory for the data in our code. No code is executed at this point, it’s just preparing everything for execution.

See an Example in action:

// hoisting 🏴‍☠️ is as if your `function fun() {}` was located here.

fun(); // works.

function fun() {}

Notice how the function below can be called before it’s actually declared. That’s hoisting in action.

❗❗ Important point to remember ❗❗

Only declarations are hoisted

JavaScript only hoists declarations, not initializations. If a variable is declared and initialized after using it, the value will be undefined. For Example:

Hoisting with var, let and const 😗

console.log(n); // Returns undefined, as only declaration was hoisted, no initialization has happened at this stage.

var n; // Declaration
n = 5; // Initialization

console.log(n); //Throws an error, although was hoisted, no initialization has happened at this stage. Same is the case with var.

let n; // Declaration
n = 5; // Initialization

Using ‘strict’ 😛

JavaScript in ‘strict’ mode does not allow hoisting.

use 'strict';

fun(); // no longer works.

function fun() {}

Read more about ‘strict’ mode here.

Lets recapitulate 📝:

➡ Functions and variables are stored in memory for an execution context before we execute our code. This is called hoisting.

➡ Functions are stored with a reference to the entire functions, variables with the var keyword with the value of undefined, and variables with the let and const keyword are stored uninitialized.

➡ Using 'strict' mode prevents this unruly 🤒 behaviour of JavaScript.

See the above code here.