DEV Community

Cover image for Hoisting in javascript

Posted on


Hoisting in javascript

Hello, everyone!
In this post, we'll look at the Concept of Hoisting in Javascript. We'll go over everything you need to know about hoisting and why it's crucial to know. Don't forget to bookmark this page so you can come back to it later.

General Meaning

Meaning of the Word In English, hoisting implies "to raise(anything) using ropes and pulleys."

To put it another way, we may say that we are bringing something to the top. Now, let's talk in terms of Javascript: Meaning "lifting variable declarations to the top" refers to the process of bringing variable declarations to the top or before the variable usage.

What then is Hoisting?

Hoisting is JavaScript's default behavior of moving declarations to the top. A variable is created when a declaration is made, i.e: var a; Initializing involves giving it a value, i.e: var a = 2, for example.

var a; // Declaration
a = 2; // Initializing
var a = 2; // Declaration & Initializing
Enter fullscreen mode Exit fullscreen mode

A variable in JavaScript can be used before it has been defined.

Simply said, everytime you declare a variable in javascript, whether after or before it is used, the javascript engine in the browser moves that variable to the top, preventing the browser from returning an undefined error.

This signifies that javascript declarations are hoisted, and hoisting is the act of bringing declarations to the top.

a = 2; // Initailized
console.log(a); //used
var a; // Declared
// output -> 2
Enter fullscreen mode Exit fullscreen mode
var a; // Declared
a = 2; // Initailized
console.log(a); //used
// output -> 2
Enter fullscreen mode Exit fullscreen mode

Because every declaration advances to the top of the current scope, both will provide the same result (to the top of the current script or the current function)

Declarations with let & const:

Let and const variables are hoisted to the top of the block but not initialized.
Meaning: The variable is recognized by the block of code, but it cannot be used until it has been declared.

If a let variable is used before it is defined a ReferenceError is thrown. similarly, using a const variable before it is declared, will return a syntax error, hence the code will not run. for example;


a = 'fotie';
let a;
// this will result in a reference error
Enter fullscreen mode Exit fullscreen mode


a = 'fotie';
const a;
// this code will not run
Enter fullscreen mode Exit fullscreen mode

It's worth noting that: JavaScript only hoists declarations, not initializations.

Thanks for reading.


Originally published on codementor on Mar 05, 2022.

Top comments (0)

11 Tips That Make You a Better Typescript Programmer


1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields


Read the whole post now!