To understand hoisting in JavaScript, we need to first understand syntax parser, lexical environment, lexical scoping and execution context.

Syntax Parser

Syntax parser is a program as a part of JavaScript engine and it reads your code character by character and determines what your code does and validate if the grammar is correct.

For the code below,

function myFunc() {
  var myVal = 'Hi there!';
}

the syntax parser reads each character of the code like f u n c t i o n and understands it is function and validate it for example, if a space is following, and translates it to machine readable code.

Lexical environment

According to ECMAScript specification 262 (10.2),

A Lexical Environment is a specification type used to define the association of Identifiers to specific variables and functions based upon the lexical nesting structure of ECMAScript code.

The formal definition means the lexical environment is an internal data structure to keep track of identifiers (variable and function names) and its values.

Simply put, the lexical environment is where the variables, functions, and objects are physically written in your code, and stores all the locally available identifiers and a reference to the parent environment.

From the code below,

function myFunc() {
  var myVal = 'Hi there!';
}

we can say, the myVal variable sits lexically inside the myFunc function.

Lexical scoping

Lexical scoping is a scoping system to make sure the code blocks have access to all identifiers in the outer environment. When an identifier is not defined locally, JS engine will check the parent environment to see if it can find the identifier there. If not, it will look in the grandparent’s environment and so on before looking in the global environment.

Execution context

According to ECMAScript specification 262 (8.3),

An execution context is a specification device that is used to track the runtime evaluation of code by an ECMAScript implementation. At any point in time, there is at most one execution context that is actually executing code. This is known as the running execution context.

So there are many lexical environments in your code and which environment the current code is being executed in is managed via execution contexts. The execution context is like a wrapper so whenever JS code is run, it is run inside an execution context.

When the code is executed, JS engine creates execution contexts which contains two phases:

creation phase
execution phase

Creation phase

In the creation phase of the execution context, syntax parser goes through the code and translate it to the machine readable code. When it sees we have created variables and functions, it allocates memory space for the variables and functions. That means when our code begins to be executed line by line in the Execution phase, the variables and functions already exist in memory and that leads to the phenomenon called ‘Hoisting’. We will take a closer look at it in the Hoisting section below.

During this phase, the entire functions are stored in the memory whereas the default value, undefined, is assigned to the variables.

Execution phase

In the execution phases, JS engine executes our code line by line.

During this phase, it assigns values to the variables and executes the function calls.

Hoisting

During the creation phase, the variables and functions are stored in memory with the entire function body and undefined assigned to the variables.

If we run this code,

myFunc();

function myFunc() {
  console.log('myFunc');
}

console.log(myVal);

var myVal = 'myVal';

console.log(myVal);

we will get:

myFunc
undefined
myVal

During the creation phase, myFunc function body and undefined which is set to myVal will be stored in the memory.

So during the execution phase, we can call myFunc even if it is lexically located above function myFunc() and that’s why myFunc is logged.

For the second log, undefined, is the same story too. Even if we are trying to log myVal before assigning the value to it, we will get undefined.

For the last log, myVal, during the execution phase, myVal value is assigned to myVal variable so myVal is logged.

Misconception

When you search for hoisting online, there are some articles giving you a misconception by saying the functions and variables are (as-if) physically moved up to the top in your code by the JS engine. However, that is not quite true. As we have already talked above, the lines of functions and variables are not physically move to the top of your JS code. It’s actually stored in memory during the creation phase.

That’s what MDN also mentioned here:

Conceptually, for example, a strict definition of hoisting suggests that variable and function declarations are physically moved to the top of your code, but this is not in fact what happens. Instead, the variable and function declarations are put into memory during the compile phase, but stay exactly where you typed them in your code.

undefined !== not defined

From the code above, we now know why we are getting the special value, undefined, even if we console.log(myVal) above myVal declaration/assignment.

However, if we don’t declare the variable at all, we will receive:

Uncaught ReferenceError: myVal is not defined

That’s because during the creation phase, myVal was never stored in the memory space, so when it was executed, it couldn’t find it from the memory and gave the Uncaught ReferenceError.

So it is important to understand the undefined and not defined are NOT the same.

Temporal dead zone (TDZ) – hoisting with let and const

From the code below, what do you think we will receive?

console.log(myVarVal);
console.log(myLetVal);
var myVarVal = 'var';
let myLetVal = 'let';

The outcome will be:

undefined
Uncaught ReferenceError: Cannot access 'myLetVal' before initialization

So why are we not getting undefined for let and const?

That’s because of temporal dead zone (TDZ). MDN explains it very well here, but basically let and const are in the period of TDZ which is from entering scope till being declared.

With the error above, it seems let/const are not hoisted but actually they are hoisted during the creation phase. It’s just myLetVal is in the period of TDZ and that’s why we are getting the error message.

So with the below code now:

let myLetVal;
console.log(myLetVal);
myLetVal = 'let';
console.log(myLetVal);

we will get:

undefined
let

So we are getting undefined because TDZ ends when myLetVal is declared.

Function declarations vs Function expressions

As we have seen the example above, function declarations are hoisted. However, function expressions are not hoisted. From the code example below:

console.log(myFunc);

myFunc();

var myFunc = function() {
  console.log('myFunc');
}

and we will get:

undefined
Uncaught TypeError: myFunc is not a function

We are getting undefined first it’s because the variable name, myFunc is hoisted, but the definition ins’t so we are getting undefined.

For the second log, we are getting the error when we try to invoke the function. It’s because the function expression is not hoisted and it cannot find the function body in the memory so throwing the error. So we cannot call the function expression before it’s created.

Conclusion

I hope this article gives you a good understand of what hoisting is. If you have any questions/feedback, feel free to let me know.