Sai gowtham

Posted on Apr 28, 2018 • Edited on Jun 5, 2018

What is Hoisting😰😰 in JavaScript

#javascript #webdev #hoisting #beginners

Hoisting is not something functions and variables are moving to the top.
Actually, they are not moving technically anywhere.

The thing happens at the time of function declaration the complete function
is sitting in the memory.

For variable declaration, JavaScript engine initializes with the value "undefined" at the time of creation.i used debugger to stop the running code at line 6.

For example

Have you Observed one thing in above image JavaScript is already initialized with value 'undefined'?

Whenever JavaScript engine runs the line 6 then it updates the undefined to 'hoisting'.

For functions, the full function is added to the memory space.

That is the reason we can invoke the functions anywhere in the file but not variables.for variables, we only used once it is declared first.

Have you checked hoisting for the let and var keywords?

for 'let' keyword if you try to access the variable before the declaration javascript engine hits the error.

for 'var' it doesn't show any error.

Hope you guys love these.

Check out My Book On JavaScript

Top comments (8)

Jose Gonzalez • Apr 29 '18 • Edited

Thanks for the write up Sai.

May I just share something that can help a bit more with this topic:

We can be tempted to look at var a = 2; as one statement, but the JavaScript Engine does not see it that way. It sees var a and a = 2 as two separate statements, the first one a compiler-phase task, and the second one an execution-phase task.

What this leads to is that all declarations in a scope, regardless of where they appear, are processed first before the code itself is executed. You can visualize this as declarations (variables and functions) being "moved" to the top of their respective scopes, which we call "hoisting".

Declarations themselves are hoisted, but assignments, even assignments of function expressions, are not hoisted.

From You Don't Know JS

strongly recommend the whole series

Sai gowtham • Apr 29 '18

Yeah sure I have also seen from other books(JavaScript for ninjas). Check out JavaScript weird parts good explanation about hoisting.

Meghan (she/her) • Apr 28 '18 • Edited

It moves the declaration for var up but not the value set

var value;
console.log(value);
console.log('hi hoisting');
value = 'hoisting';
console.log(value);

Jose Gonzalez • Apr 29 '18

Yup!

Variable declaration and assignment are done separately.

rhymes • Apr 28 '18 • Edited

Funny, you and @genta both posted about JS hoisting recently :D

What the... hoisting?

Fabio Russo

#javascript#hoisting#behavior

Comment deleted

rhymes • Apr 28 '18

just a figure of speech :-) I mean it's interesting that you both were "struggling" with this behavior of JS at the same time and wrote about it.

Fabio Russo • Apr 28 '18

That’s something that all Javascript developer should know... so more points of view... are better 💛

DEV Community

What is Hoisting😰😰 in JavaScript

Have you checked hoisting for the let and var keywords?

Check out My Book On JavaScript

Top comments (8)

What the... hoisting?

Fabio Russo

Read next

What is SignalR? A Real-Time Communication Framework for .NET

Building a Collapsible UI Component in Angular: From Concept to Implementation 🚀

Autofac Dependency Injection in ASP .NET Core 8

Why Regular Website Maintenance is Crucial for Your Business