How Hoisting Works in JavaScript?
February 2, 2021
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,
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.
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 RecapLink to heading
- 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.