Hoisting in JavaScript

JavaScript Hoisting refers to the process whereby the interpreter appears to move the declaration of functions, variables or classes to the top of their scope, prior to execution of the code. Before execution, code is scanned for variable declaration, and for each variable, a new property is created in the variable environment object. The variable types in JavaScript have different ways in which they are hoisted. For instance, a variable declared with var is hoisted at the start of the function in which it is declared. When you try accessing the variable before its declaration, let's say for instance we console log the variable before declaration, a value of undefined is printed to the console.

function food() {
    console.log(rice);
    const num = 2;
    if (num === 2) {
       var rice = "Rice";
    }
}
food()

From the above, value logged to the console will be undefined. Variable declared with var are function scoped, this means they can be accessed anywhere within the function they are defined.

Variable declared as let and const are block scoped, but they can only be accessed after they have been declared. The points within the block and above the declaration where they cannot be accessed is called the Temporal Dead Zone(TDZ). When you try accessing them within these zones, you will get an Uncaught ReferenceError: Cannot access the variable before initialization. This implies that they are not hoisted but rather can be accessed from the point of declaration to the end of their block.

function food() {
    const num = 2;
    if (num === 2) {
       console.log(rice);
       let rice = "Rice";
    }
}
food()

The output

Uncaught ReferenceError: Cannot access 'rice' before initialization

When rice variable is accessed above and outside the if block, the error will be

Uncaught ReferenceError: rice is not defined

functions declarations are block scoped when using strict mode, but function scoped otherwise. They can be accessed above or below the point where they are declared with their initial value been the actual value of the function.

sum(2, 3);
function sum(a, b) {
    return a + b;
}

From the code above, the function was called before it was declared, the result returned will be 5.

with function expression, when a function is expressed with var keyword, and it is called before its declaration, it will return an Uncaught error. e.g.,

sum(2, 3);
var sum = function (a, b) {
    return a + b;
}

The display in the console will be:

Uncaught TypeError: sum is not a function

The reason being that since sum returns undefined when accessed before declaration, then sum(2, 3) is the same as writing undefined(2, 3) which leads to a TypeError. If you use let instead of var, you will get a ReferenceError.

sum(2, 3);
let sum = function (a, b) {
    return a + b;
}

The display in the console will be:

Uncaught ReferenceError: sum is not defined

The error the function expression returns depends on what variable type you used to assign to the function.