Hoisting Javascript
- Tram Ho
Written by Luu Hoang Thong
Today I will introduce hoisting in Javascript, a problem is no longer new but for those who are just starting with JS, it will be difficult to not understand the nature of the problem.
What is Hoisting
Basically when Javascript Engine compiles our code, all variables defined by the var operator will be hoisted / bar above the current scope that is defined, namely the function if it is defined. in function, and global scope if defined outside the function without caring about the location we declare.
Simple wallet as follows
1 2 3 | someString = "myString"; console.log (someString); var someString; |
What do you think console.log will print?
- Uncaught ReferenceError: myName is not defined
- Sunil
- undefined
As mentioned above, the console will print the “myString” screen.
Defining someString variables is put on top, we can access and assign values to it.
someString will have undefined value when only being hoisted .
And you should distinguish between null and undefined. Undefined is a variable that was declared but has not been assigned a value, while null is a nonexist value.
Maybe you are interested
Little known feature in JavaScript
JavaScript Tip: Set function names to debugging more easily
Javascript only hoisting variable declaration.
1 2 | console.log (someString); var someString = "myString"; |
The console will print undefined but not “myString” because JS only hoisting the declaration of the variable
Hoisting function
Another simple example of hoisted function is the following
1 2 3 4 5 6 7 8 | var doSomething; doSomething (); function doSomething () { console.log ('Money'); } doSomething = function () { console.log ('Diamond'); } |
The screen output will be Money by: The declaration portion of the doSomething is hoisted on top, the assign value for doSomething (print out diamond) is not hoisted.
Arrow function and funciton expression
Arrow functions and function expressions are not hoisted javascript
1 2 3 4 5 | doSomething () somefunc () const doSomething = function somefunc () { console.log (123) } |
If you run the above code, there will be runtime error somefunc, doSomething is not defined. The reason because the function expression is not Javascript hoisted
Multiple declartion in samescope
We already know what hoisting is, so guess what the result of the following code is
1 2 3 4 5 6 7 8 | function testHoisting () { var test = "someString"; function test () { return "String in function"; } return test (); } console.log (testHoiting ()); |
At first glance it would probably be a good idea to print out “String in function”. But when run, it will print Error test is not function. Because with multiple declarations in the same scope (both varaible and function) the hoisting of the variable is ignored and the above code will be executed by JS engine as follows
1 2 3 4 5 6 7 8 | function testHoisting () { function test () { return "String in function"; } test = "someString"; return test (); } console.log (testHoiting ()); |
Preventing scope problems
To limit the problem of scope problems using the scope of variables, we have several ways:
- Declare all variables at the beginning of each function
- Avoid using var to declare variables
- Use only a let or const statement to declare the variable in a function. Ex:
1 2 3 4 | let one, two, three, four; with let one; let ... |
- Always declare variables before using them
Conclusion
- Hoisting is the JS engine that declares the declaration of the variable and the function on top of the scope they are declared
- Arrow functions and function expressions are not hoisted
- If there are multiple declarations identical to the identifier, then the hoisting of the variable will be ignored
Source : Viblo