JavaScript(JS) Hoisting

Variable Hoisting

Variable hoisting is a behavior in JavaScript where variable declarations are moved to the top of their respective scope by the JavaScript engine during the compilation phase, before the code is executed. This means that variables declared using var keyword are hoisted to the top of the function scope, while variables declared using let or const keywords are not hoisted.

Here is an example of variable hoisting with var:

function hoist() {
  console.log(x); // Output: undefined
  var x = 5;
  console.log(x); // Output: 5
}

hoist();

In this example, the variable x is declared using var keyword inside the function hoist. Even though the variable is declared after the console.log statement, the JavaScript engine hoists the declaration to the top of the function, which means that the variable is available throughout the function. However, the value of the variable is not assigned until the line var x = 5; is executed, which is why the first console.log statement outputs undefined.

Here is an example with let keyword:

function hoist() {
  console.log(x); // Throws ReferenceError
  let x = 5;
  console.log(x); // Output: 5
}

hoist();

In this example, the variable x is declared using let keyword inside the function hoist. Unlike the var keyword, the let keyword does not hoist the variable declaration, which means that the first console.log statement throws a ReferenceError because the variable x is not yet defined.

It's important to note that only the variable declaration is hoisted, not the initialization. So if you try to access the variable before it's initialized, it will still be undefined.

To avoid confusion and potential bugs, it's generally a good practice to declare all variables at the top of their respective scope.

Function Hoisting

Function hoisting is similar to variable hoisting in JavaScript, but it applies to function declarations instead of variable declarations. Function declarations are moved to the top of their respective scope by the JavaScript engine during the compilation phase, before the code is executed. This means that you can call a function before it's declared in the code.

Here is an example of function hoisting:

hoist();

function hoist() {
  console.log("Hello, world!");
}

In this example, the hoist function is declared after it's called. However, because of function hoisting, the function is moved to the top of its scope by the JavaScript engine, which means that it can be called before it's declared.

It's important to note that function hoisting only applies to function declarations, not to function expressions. Here's an example:

hoist();

const hoist = function() {
  console.log("Hello, world!");
}

In this example, we're trying to call the hoist function before it's declared, just like in the previous example. However, because the function is declared using a function expression (using the const keyword), rather than a function declaration, function hoisting does not apply. This will result in a ReferenceError.

To avoid confusion and potential bugs, it's generally a good practice to declare all functions at the top of their respective scope, just like with variable declarations.