Hoisting in JavaScript

Ashutosh K Singh
Sep 2, 2019 · 2 min read
Image for post
Image for post
Photo by Alejandro Barba on Unsplash

In this post, we are going to discuss hoisting. We’ll be discussing what it is and why it’s important for you to know as a Javascript developer or programmer.

This article is the first of many small articles discussing key areas and terms in Javascript, such as call stack, callback, promise, async, etc.

Hoisting

Pretty straightforward: I declared a variable, initialized some value to it, and then logged it in the console.

Now let's look at the definition of hoisting:

Simply put, it means no matter where you declare functions or variables when the code is executed, they’re moved to the top of their scope.

According to the above statement, if I were to move my variable declaration to below the console log statement, it should work just fine. But that’s not the scenario. Let’s see why that is.

Now the question arises: Why I am getting undefined when I should be getting the myName variable? Is hoisting not working?

The simple answer is that hoisting is working just fine. If you go back to the definition of hoisting, it specifically says that only the declaration is moved to the top and not the initialization.

So in the above example, our variable declaration is moved to the top while it’s initialized value is not, and the reason why we are getting undefined is because it’s the default value of the declared variable in JavaScript.

If hoisting was not working, then we would have got an error that the myName variable is not defined.

So because of hoisting, we can use the variables no matter where they are declared in our code. However, using their value is a different scenario.

Hoisting in Function Declaration

Hoisting in function declaration

Here I called the function before I even declared — this is hoisting in the function declaration.

Hoisting in Function Expression

Hoisting in a function expression

So why is it working in the function declaration but not in function expression?

Well, it’s because a function expression is a function that is assigned to a variable, and, in this case, the variable declaration is moved to the top with the default value of undefined rather than the function.

Conclusion

Better Programming

Advice for programmers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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