Hoisting in JavaScript Explained

Having worked across sites raking in over 50 billion website visits annually with Higglo Digital I write about tech topics and teach…

Hoisting in JavaScript Explained

Having worked across sites raking in over 50 billion website visits annually with Higglo Digital I write about tech topics and teach engineers to have solid foundations that will help them get ahead in their career. I also build awesome products for digital nomads — check it out!

JavaScript eBook

I’ve written an eBook on JavaScript that will take you from beginner to professional. Having been in your shoes moving to making over $200,000 per year in just a few years as a software engineer, I know exactly what it takes to get there. Check out the ebook now!

Hoisting is a concept in JavaScript that refers to the behavior of variable declarations and function declarations being moved to the top of their respective scope during the compilation phase. This can lead to some unexpected behaviors and it is important for developers to understand how hoisting works in order to write correct and predictable code.

In JavaScript, variables can be declared using the var keyword, as well as the more recent let and const keywords introduced in ECMAScript 2015. Function declarations can also be made using the function keyword. When a JavaScript program is compiled, declarations using these keywords are automatically moved to the top of their respective scope. This means that, regardless of where a variable or function is declared within the code, it will be treated as if it were declared at the top of its scope.

For example, consider the following code:

console.log(num); // Output: undefined
``` num = 5;As a result, the code will not throw an error and will instead output `undefined`
It’s important to note that hoisting only affects declarations, not assignments. In the example above, the assignment of `5` to `num` is not hoisted and is executed in the original location within the code. This means that the value of `num` will not be defined until the assignment is executed. 
Hoisting also affects function declarations in a similar way. Consider the following code:
 
foo(); // Output: "foo"
 
console.log("foo");
``` }
 
Again, it may seem like this code should throw an error, as the function `foo` is being called before it is declared. However, due to hoisting, the declaration of `foo`
console.log("foo");
}

foo(); // Output: "foo"As a result, the code will not throw an error and will correctly output "foo". It’s important to keep in mind that hoisting can lead to some unexpected behaviors if not understood properly. For example, consider the following code:

var num = 5;
 
 
console.log("foo");
 };In this code, the first `console.log` statement will output `undefined` as expected, due to hoisting of the `num` declaration. However, the second `console.log`
Because function expressions are not hoisted, the second `console.log` statement is actually accessing the value of the `foo` variable before it has been assigned a function. As a result, the output will be `"foo"`, the default value for a function in JavaScript. 
To avoid these types of issues, it is generally a good practice to declare all variables and it is generally a good practice to declare all variables and functions at the top of their respective scope. This ensures that there is no confusion about the value of a variable or the existence of a function, and can help prevent unexpected behaviors caused by hoisting.
 
It’s also important to keep in mind that the `let` and `const` keywords, introduced in ECMAScript 2015, do not behave the same way as the `var` keyword when it comes to hoisting. Declarations made using `let` and `const` are not hoisted to the top of their scope in the same way as `var` declarations. 
Instead, declarations made using `let` and `const` are hoisted to the top of their scope, but their assignment is not. This means that, unlike `var`, attempting to access a `let` or `const` variable before it has been declared will result in a reference error. 
For example, consider the following code:
 
 
 
In summary, hoisting is a fundamental concept in JavaScript that refers to the behavior of declarations being moved to the top of their respective scope during the compilation phase. Understanding hoisting can help developers write correct and predictable code, and avoid unexpected behaviors caused by declarations being accessed before they are defined.
 
#### JavaScript eBook
 
I’ve written an eBook on JavaScript that will take you from beginner to professional. Having been in your shoes moving to making over $200,000 per year in just a few years as a software engineer, I know exactly what it takes to get there. [Check out the ebook now](https://www.mitrakos.com/ebook)!
 
I founded [Higglo Digital](https://higglo.io) and we can help your business crush the web game with an award-winning website and cutting-edge digital strategy. If you want to see a *beautifully designed website*, [check us out](https://higglo.io).
 
I also created [Wanderlust Extension](http://www.wanderlustapp.io/) to discover the most beautiful places across the world with highly curated content. Check it out!

console.log(num); // Output: undefined ``` num = 5;As a result, the code will not throw an error and will instead output `undefined` It’s important to note that hoisting only affects declarations, not assignments. In the example above, the assignment of `5` to `num` is not hoisted and is executed in the original location within the code. This means that the value of `num` will not be defined until the assignment is executed. Hoisting also affects function declarations in a similar way. Consider the following code: foo(); // Output: "foo" console.log("foo"); ``` } Again, it may seem like this code should throw an error, as the function `foo` is being called before it is declared. However, due to hoisting, the declaration of `foo` console.log("foo"); }

var num = 5; console.log("foo"); };In this code, the first `console.log` statement will output `undefined` as expected, due to hoisting of the `num` declaration. However, the second `console.log` Because function expressions are not hoisted, the second `console.log` statement is actually accessing the value of the `foo` variable before it has been assigned a function. As a result, the output will be `"foo"`, the default value for a function in JavaScript. To avoid these types of issues, it is generally a good practice to declare all variables and it is generally a good practice to declare all variables and functions at the top of their respective scope. This ensures that there is no confusion about the value of a variable or the existence of a function, and can help prevent unexpected behaviors caused by hoisting. It’s also important to keep in mind that the `let` and `const` keywords, introduced in ECMAScript 2015, do not behave the same way as the `var` keyword when it comes to hoisting. Declarations made using `let` and `const` are not hoisted to the top of their scope in the same way as `var` declarations. Instead, declarations made using `let` and `const` are hoisted to the top of their scope, but their assignment is not. This means that, unlike `var`, attempting to access a `let` or `const` variable before it has been declared will result in a reference error. For example, consider the following code: In summary, hoisting is a fundamental concept in JavaScript that refers to the behavior of declarations being moved to the top of their respective scope during the compilation phase. Understanding hoisting can help developers write correct and predictable code, and avoid unexpected behaviors caused by declarations being accessed before they are defined. #### JavaScript eBook I’ve written an eBook on JavaScript that will take you from beginner to professional. Having been in your shoes moving to making over $200,000 per year in just a few years as a software engineer, I know exactly what it takes to get there. [Check out the ebook now](https://www.mitrakos.com/ebook)! I founded [Higglo Digital](https://higglo.io) and we can help your business crush the web game with an award-winning website and cutting-edge digital strategy. If you want to see a *beautifully designed website*, [check us out](https://higglo.io). I also created [Wanderlust Extension](http://www.wanderlustapp.io/) to discover the most beautiful places across the world with highly curated content. Check it out!