Ever wondered how you’re able to utilize the juicy benefits of functions and variables before even declaring them? Well…, this is due to a concept known as “Hoisting” in Javascript.

Let’s try to understand and experiment with hoisting,

Firstly, What is Hoisting?

Simply put, "hoisting is a mechanism where the javascript engine takes all the variables and functions and puts them on top of their scope before the code execution".

to understand it, I use the analogy as whenever we're cooking something we gather all the ingredients at one place akin to what javascript does with variables and functions before executing the code.

It is worth noting that only the function and variable declarations are hoisted ignoring the assignment.

Hoisting in Functions

In particular, two types are of most singular interest to us:

Function Declarations
Function Expression

Function Declarations

it is probably the most common one in use, as well as in other programming languages.

example

function sayHello(){
console.log("hello");
}

How does the hoisting works? let's look at an example

sayHello();

function sayHello(){
console.log("hello");
}

prints hello to the console.

Under the hood, prior to the code execution, the function declaration is hoisted to the top, thus, sayHello does not throw a reference error and consoles out the expected result.

Function expressions

function expressions are the ones where the variables can store the function definitions.

function expressions do not hoist the definitions to the top and thus shoots undefined on the console, but, why not reference error(reference error is thrown when you are trying to use undefined variable).

let's look at an example to discern it

example:

sayHello();

var sayHello=function (){
console.log("Hello!!!");
}

as we noted previously, only the declarations are hoisted, ignoring the assignments, thus over here, var sayHello is hoisted and initialized with the value undefined, thus rendering it pretty much useless.

Hoisting in variables

ES5

var

generally, we declare and initialize the variable at the same time like so

var g=2;

although, this is the best way to declare and initialize variables.

to understand how hoisting works, let's peek at some strange examples:

console.log(x);
x=5;//undeclared variable
var x;

Rather than producing a Reference error: x is not defined, it works just fine. this above is pretty much akin to saying

var x;
x=5;
console.log(x);

now, you'd ask, how so?

well, as I said before in function declaration, it is due to the fact that before the code execution all the variables are parsed and stored in js, more or less, hoisted to the top of their scope.

Note: only declarations are hoisted ignoring the assignments.

ES6

let and const

let and const are the variables introduced in the ES6 version of javascript which offers some differentiated features than var.

firstly, both let and const are block-scoped rather than function scoped. this means, that they are only accessible in the block they are defined and nowhere else.

secondly, they do not allow the cranky behavior of var.

it means, that

console.log(noway); //Reference Error : noway is not defined

let noway=" you can't do this to me";

the same applies to const as well, but const takes it up a notch, you can not change the value once declared and initialized to the variable.

Wrapping Up

So, yeah that's pretty much it to know about hoisting in javascript. generally,

it's a good practice to declare and initialize the variables at the same place so as to avoid further conflicts.
or you could use the "strict mode" in javascript as it'll flag errors whenever you'll try to use variables before declaring it.

Please let me know your thoughts on this article? anything I did wrong or can improve on?

Arogya's Garden