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 of a is now replaced from undefined to a string Every 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