(1) It's nothing but a "setting up memory space before executing a code".
(2) When you write your code in Javascript, and run it, the Javascript engine sets up "MEMORY SPACE" for variables and functions before executing code.
(3) Before executing a real code, the memory space is nothing but a placeholder. There is no value in it!
(4) Let's see by example.
When you run a code, what would it happen?
When it runs, you'll see a undefined.
However, isn't it weird?
When it runs a code (line 1), Javascript engine don't know about a. It's below the line(line 3).
So I think in line 1, you can't see a 'undefined',
it makes sense to see a error message " a is not defined, like this :
But it's not!
As we saw it before, it throw a 'undefined'.
(5) I'll explain why this happens.
When javascript engine see this code, before executing code line by line, actually the first thing it does is that "look entire code(not execute, just look) and, SET UP MEMORY SPACE".
So It'll look entire code, and find there is a variable name 'a'.
And it think this way, "Oh I have to set up a memory space for this variable."
and set up a memory space for variable "a".
Since it is just a memory space, just a placeholder, so there is no value in it before executing a real code "var a = 'Hello World~';
After memory setting is done, Javascript engine do his real work, yes "executing a code line by line."
CODE EXECUTING (Javascript engine) :
- "Oh there is a line 1, I'll execute it. Hmm. this is a console.log function, and the argument is variable 'a' ".
- "Oh there is a memory space for variable 'a' , but there is no value in it. so I'll log a 'undefined'. "
- "Oh there is a line 3, I'll execute it. Oh, it defines a value "Hello World~' for variable a! "
(6) Then, can you imagine what the result of running this code?
Yes,
It is the result.
You've learnt a hosting!
Yes, it's just setting memory before executing code!
(7) However, there is a one more thing you should know about a hoisting.
I told you that when setting up memory for a variable, it's just a placeholder, so there is no value in it.
However, when it comes to "function" (not a variable), the function is placed entirely!
It's not a placeholder, In the memory space , there is a entire function code in it.
It's the difference when hoisting between variable and function.
(8) Let's see the example for it.
What will be the result of this code?
Line 1 : We invoke a function b.
Line 2 : We console.log , the variable "a".
See ?
* the function b is entirely put into a memory space before executing a code.
* the variable "a" is a just placeholder , so there is no value in it, before executing a code.
This is the difference!
(9) Conclusion :
- Hoisting is nothing but a setting memory before executing code!
- When setting memory for a variable : it's just a placeholder, so there is no value in it, before executing a code
- When setting memory for a function : The function is entirely put into a memory space!
댓글 없음:
댓글 쓰기