The mystery of Hoisting in JavaScript

Photo by Andrey Kremkov on Unsplash

Function Declarations and Expressions

For a JavaScript beginner, this might be the first encounter with hoisting. We were all shown that placement of function declarations does not matter while the place of a function expression is important, let’s see that in an example;

Only Variable Declarations are hoisted ( not variable assignments )

This behaviour is very similar to how function expressions are hoisted. Let’s see it in action;

console.log(x); // undefined
var x = 10;
var x; // x is hoisted and set to undefined at this point
console.log(x);
x = 10;
x = 5;
console.log(x);
var x;
printName();            // output: Morpheus

function printName() {
console.log("Morpheus");
}

var printName = function() {
console.log("Neo");
};
function printName() {   // moved to the top (function declaration)
console.log("Morpheus");
}

var printName; // moved to the top (variable declaration)

printName();

printName = function() { // left in place (variable assignment)
console.log("Neo");
};
var printName = function() {
console.log("Neo");
};

function printName() {
console.log("Morpheus");
}

printName(); // output: Neo
function printName(){    // moved to the top (function declaration)
console.log("Morpheus");
}

var printName; // moved to the top (variable declaration)

printName = function(){ // left in place (variable assignment)
console.log("Neo");
};

printName();
  1. Functions declarations are hoisted first before variable declarations( functions expressions also).
  2. It is not a good idea to make duplicate declarations with the same variable name. Duplicate declarations are ignored by the JavaScript engine and can often lead to confusing results. ( this is not the case with the “let” keyword, since the “let” keyword will allow you to re-declare a variable)

ES6 let and const

What about ES6 variables let and const? Are they hoisted too?

console.log(x) // Uncaught ReferenceError: x is not defined
let x = 2
x = 2; // ReferenceError: Cannot access 'x' before initialization
console.log(x);
let x;

Some examples that will throw you for a loop

Conclusion

Hoisting is one of the concepts of why some people don’t like JavaScript. JS was originally conceived in 1995 as a language to be used by non-expert programmers (i.e. webmasters.) By having function declarations be hoisted, it means that the order is not important, i.e. the call-site for a function can come before the declaration. One of the benefits of hoisting is that it enables us to call functions before they appear in the code, other than that it is just the way how JavaScript interprets your code and every developer should learn how it works in order to write bug-free code.

--

--

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
Ali Erbay

Ali Erbay

7 Followers

Full Stack Developer BDD/TDD || Ruby on Rails || React || React Native || NodeJS || Express https://github.com/kermit-klein