To understand the title first we have to recap the concept of hoisting in JavaScript.
You may have heard that hoisting is a concept of JavaScript, in which JavaScript moves all the variable of your code at the top level and start executing.
There are statements as well like, only the variable declarations are hoisted and initialisations are not. All these explanations are explained conceptually. Things work different in reality.
How about if we take a deep look how JavaScript work. Then we can have a better understanding of hoisting and the title of this blog.
Everyone may know that JavaScript has a call stack and all the programs executes in a call stack. JavaScript has a global execution context. So whenever you run a piece of code it is run inside global execution context.
Now the fun part is global execution context does not start executing code line by line, instead it has two process before it start the execution of code.
1. The Creation Process
2. The Execution Process
Both process do their job very differently. Let's just discuss the creation process and reveal the secret of this blog.
The Creation Process:
When a program runs, javascript scans the whole program and registers all the variables in the global scope with the special value of 'undefined'. Yeah that's true, every variable is undefined in the creation Process.
In case of functions things work differently. JavaScript registers the function with its actual body. So functions are not undefined, they have their whole body in the creation process.But, if you use arrow functions they will be undefined as well. Let's make it easier with images.
- Step 1: Code starts executing in GEC.
- Step 2: The creation process started. It looks for all the variable and functions register them in global scope with the value of 'undefined' to variable and assigned whole function body to the function name.
- Step 3: The execution process started and actually assigned the value of
a. The value ofais now replaced fromundefinedto a stringEvery variable is undefined
Now let's dive actually into the code. I have used the same code and tried to run it on my browser with a debug point at line no 1.
Inside the highlighted red part you can see that var a is undefined. At this point creation process is already finished and JavaScript has already added the variable a in global scope with a default value of undefined.aFunction is also added in global context with its whole body.
So this is how JavaScript works. Before executing, it kind of scans the whole program and register all the variables and functions in their respective scopes. The creation process is also known as hoisting in JavaScript.
You can also try and debug the code in your browser, try with ES6 arrow functions and check if it is undefined or not. The information is taken from so many videos and articles and shared it here. Share your ideas in comments below.
HAPPY CODING
Top comments (9)
This is not entirely correct. While the described behaviour is valid for
vardeclarations, modernconstandletvariables are limited to the scope and cannot be used before their declaration.You are completely right.Lets make it easier, at the time of execution
letand 'const' variable doesn't register to the global scope. But at the same time they are assigned a value ofundefinedin their scopes at the creation process. Check the attached image.let bandconst care undefined.letandconstvariables are placed in a Temporal dead zone (TDZ). Hence while they are registered in the program, they are not accessible before initialisation and thus in practice you wouldn't know if they are undefined or not defined at all.Quote from MDN:
let variables cannot be read/written until they have been fully initialized, which happens when they are declared (if no initial value is specified on declaration, the variable is initialized with a value of undefined). Accessing the variable before the initialization results in a ReferenceError.
This differs from var variables, which will return a value of undefined if they are accessed before they are declared.
I never discussed about accessing a variable before or after initialization. That is a separate topic. The thing which I highlighted in this article/blog is every variable is
undefinedat first and explained the whole process of hoisting,I appreciate your findings and reference from MDN 👍
I left the comment solely because I believe it's a misleading generalisation to say that everything is undefined. I didn't mean in any way to annoy you or offend in any way. I'm sorry of that happened, that wasn't my intention.
Well that is why, I explained the title of blog in the post. For better understanding I have use images.
I am not offended at all. I really appreciate you took the time and read article
let and const are also hoisted in javascript. If you go deep inside browser you'll see another memory allocation called "Scripts" where these let and const are hoisted.Till the time you didn't put value in let it resides in "Temporal Dead Zone" .
Below link will help more to explain.
stackoverflow.com/questions/331988...
I was really hoping this was a defense of duck typing and a critique of typescript. ;)
I can write separate blog on this as well :)