Understanding Hoisting requires a good understanding of scopes in JavaScript. So we will be starting with scopes.
Scope
Scope determines the accessibility of variables inside a JavaScript program. JavaScript defines two kinds of scope-
- Functional Scope
- Global Scope
- Block Scope
Functional Scope
In Functional Scope the variables declared inside a function is accessible only inside that function or to other functions which are declared inside the said function. These variables are known as Local Variables.
Here in this example we declared a variable inside the function scope and printed it’s value. Which is successful as it was inside the scope of the function. When the variable is printed outside the scope we get the error that the variable is not defined.
In this example when we create a variable outside the functional scope and print the values of the variables, we get separate values for the same variables on the basis of the scopes they were defined in.
Global Scope
The variables and functions defined outside any functional scope, inside the the global scope are known as global variables/functions.They can be accessed by any member inside that program and can be manipulated.
This is the same example as above, the variable defined in the first line is in the global scope. It can be accesses and changed by any member in the program.
With this example we can also infer that local variables inside a function are given more priority then global variables. This is because both the global and local variable have the same name, but when the variable was printed the local variable’s value was printed due to more priority given to it.
Block Scope
Before ES6 JavaScript did not have the concept of Block Scope. When block scope was introduce 2 new keywords were also introduced with it to enforce the scope behavior. Let’s first discuss about them.
let & const
In brief let and const behave mostly the same, with the main difference being that, const cannot be re-assigned while let can be.
When a variable is defined inside a block {} using the let or const keywords they aren’t accessible outside that block, whereas if the same variable has been defined using var , it still has the global scope(if that block wasn’t inside a function).
{let x = 70;}// x can NOT be used here
{var x = 274;}// x can be used here
P.S. try catch block had block scope way before ES6 was introduced.
So considering the above section about scopes, cleared the basics let’s move on to hoisting.
Hoisting
In-formerly Hoisting is referred as a mechanism where function/variables declarations in the program are moved to the top of their scope before code execution. Meaning that no matter where functions/variables are declared, they are moved to the top of their scope regardless of weather they were globally scoped or locally.
This is what is perceived externally, but internally the process is little different. According to MDN
The variable and function declarations are put into memory during the compile phase, but stay exactly where you typed them in your code.
It’s a bit confusing and not easy to be grasped upon in a single read. Let’s see some examples to know what that actually means.
In any programming language, a function definition and a call like this is pretty standard, no errors here we get our output.
Languages that does not support hoisting or if we disable hoisting this above implementation will throw an error catName is not defined, even though it is.
Error
Again to the definition of hoisting
The variable and function declarations are put into memory during the compile phase, but stay exactly where you typed them in your code.
Here the function declaration is put in memory at compile time, so it really does not matters from where do we call the function as JS knows where exactly is the declaration stored in the memory. Hope that clears, what hoisting actually is.
Let’s know more about Hoisting using examples.
- JavaScript putting function declarations into memory before it executes any code segment is that it allows you to use a function before you declare it in your code. It is the same example above
- Hoisting let’s use initialize and use variables before they are declared.
- JavaScript only hoists declarations not initialization/assignments to that variable.
As only declarations are hoisted, initializing a declared variable after use will give undefined.
- Function expressions are not hoisted.
This was a brief about Hoisting used in JavaScript. If you liked what you read, follow and Clap!