Hoisting is a very important concept in JavaScript. In many books and articles on
hoisting, they mention that, in hoisting, the variable declarations and
functions are copied to the top of the code. This is completely wrong. We will
understand the actual working of hoisting and how we are able to access
functions and variables before even declaration in this article.
Hoisting in JavaScript is a phenomenon where we can access the variables and
functions before they are initialized. For example,
console.log(sayHello); // whole function copiedconsole.log(name); // undefinedvar name = 'Gaurav Thakur';
functionsayHello() {
console.log('hello');
}
In the above example, we are able to access the variable name and the function
sayHello before they are initialized. In most of the languages, this action
will throw an error. But in JavaScript, things work a bit differently.
I highly recommend you to read this article about the
working of execution context in JavaScript
so that you can relate the concepts better. Let's quickly go through the concept
of execution context.
An execution context is created in two phases:
Memory Creation Phase
Code Execution Phase
In the memory creation phase, JavaScript will parse the code line by line and will
allocate memory for each variable and function. For the variables, it will
assign a special value called undefined as the value of the key. In the case of
functions, the whole function will be copy-pasted in the value of the key.
So, when JavaScript encounters a variable or function before it is initialized,
it will check if the variable or function has been allocated in the memory. If
so it will return the value of the key which is undefined in case of variables
and function code in case of functions.
If memory for a variable is not provided, i.e.,
the variable is not present in the memory component of the execution context,
and we try to access it, it will throw a
ReferenceError because the memory is not allocated for the variable in
phase 1 of the execution context.
console.log(name); // ReferenceError
In many books and articles on Hoisting, they mention that the variable
declarations and functions are copied to the top of the code. This is completely
wrong. The way execution context is created, is only the sole reason why we are
able to access the variables before initialization and why their initial value
is undefined and function code in case of functions.
Quick Recap
Hoisting in JavaScript is a phenomenon where we can access the variables and
functions before they are initialized.
Execution context will allocate memory for variables and functions in
phase 1 of the creation of execution context.
For the variables, it will assign a special value called undefined and for
the functions, whole function will be copied.
The way execution context is created, is only the sole reason why we are able
to access the variables before initialization and why their initial value is
undefined and function code in case of functions.