A beginner-friendly overview of the hoisting concept in means that . Hoisting JavaScript variable and function declarations are moved to the top of their containing scope What does that translate to in my code? https://unsplash.com/ The Declaration Comes Before the Assignment Let’s consider the following snippet of code to understand how hoisting works : Maybe you expected the console.log to print , since the statement (the declaration ) comes after (the assignment ). We assigned a value to the variable it was created in the code. undefined var rockStar = “Mick Jagger” rockStar before After all it is logical to think that all the lines of code written in a JavaScript program are read, interpreted, and executed from top to bottom. There is a truth to that assumption, but the behaviour we just demonstrated tells us otherwise. In real fact, just before the code is executed, it goes through a compiler : during this phase called gets defined and the . If they are defined inside a , they are moved to the top of this function, and if they are outside a function, to the top of the global scope. lexing, scope variable and function declarations are moved to the top of their scope function Consider this other piece of code : This time, although we have the variable declared and assigned, we get an response when we try to print the variable. Why is that ? rockStar undefined The best way to get your head around this is to remember that , and this is equally true for variables and functions. all declarations are processed first , and this is equally true for variables and functions. All declarations are processed first Let’s decode what it means by reading the code just as JavaScript does. When you see , you see it as one statement, but JavaScript sees it otherwise. It actually interprets it as two distinct statements: var rockStar = “Mick Jagger” In our example, JavaScript first interprets the code, sees that the variable exists and moves it to the top of the scope: this is what is called . rockStar hoisting But the second statement, the assignment, is . Then, the code is executed by JavaScript as if it were written like this: left in place In other words, : only variable and function declarations are hoisted, while the assignments are left in place, just where they were written in the code. the declaration comes before the assignment T : only variable and function declarations are hoisted, while the assignments are left in place, just where they were written in the code. he declaration comes before the assignment Function Declarations Are Hoisted, but Function Expressions Are Not We have seen examples of hoisting, now let’s focus on the behavior of . variable functions See the following piece of code : From what we understand now of hoisting, how can we rewrite this code as if it were JavaScript interpreting it ? First keep in mind that , and that here the scope of the variable is the inside of the function . The variable declaration will then be hoisted to hoisting is per-scope name local scope movieStar the top of the function, not of the global scope. However, we also the function in the , and hoisting works the same for variable and function declarations: our function declaration will be moved to the top, before the of the function. declared movieStar global scope execution The code will be interpreted by JavaScript as follows: In this example, the function call works because the function declaration is hoisted, and interpreted as being declared it was called. movieStar before Let’s take another example : What happened here? The function I assigned to the variable , a process that is called , is not hoisted this time : when I call the function, JavaScript throws a TypeError. movieStar function expression That is because functions that are assigned to variables are not hoisted. Functions that are assigned to variables are not hoisted. As a demonstration, if I now write the code as follows it is now printing the expected result : Functions Before Variables We now know that both function declarations and variable declarations are hoisted. But there is another thing to be wary of: functions are hoisted first, and then variables. Functions are hoisted first, and then variables. Consider this code where a variable and a function are declared with the same name: The function has been hoisted before the variable, so when I print the value of it outputs the function itself. businessStar And another example where the variable is assigned a value : This time the output is the value of the variable, because the variable has been assigned a value, which overrides the function declaration. If you now try to call the function , you will get a TypeError: that’s because has been assigned the string “Gary Vaynerchuck” and is no longer a function. businessStar() businessStar Conclusion Hoisting is Javascript’s default behavior of moving declarations to the top. Rather than being available right after their declaration, variables and functions might actually be available beforehand in the code, which might lead to certain behaviors that you wouldn’t expect if you knew nothing about hoisting. That is why as a rule, it is important to make sure, as often as you can, that you: → (at the top of the global scope or at the top of the function scope) Declare all of your variables at the top of their scope → Make sure you . put all your functions, if you can, also at the top of their scope Want to learn more about JavaScript basics? Check out my other articles: Understand JavaScript Variable Scope with ease Wrap your head around “this” How to use JavaScript closures with confidence Grasp “By Value” and “By Reference” in JavaScript A Quick Handbook for Dates in JavaScript Work with JavaScript arrays like a boss I hope you enjoyed this introduction to JavaScript Hoisting. Feel free to comment and like this article so that others can find it easily on Medium !
