JavaScript Variable Hoisting Vs Function Hoisting Explained

Variable hoisting refers to how variables are declared in JavaScript. Function hoisting means that functions are defined before they’re called.

This article will explain both concepts and give examples.

What’s Variable Hoisting?

In JavaScript, variables are declared at the top of the scope where they are used. If a variable is not explicitly declared, then it is implicitly declared as global. Global variables are accessible by any other code within the same script.

Consider all possible below examples using var

x = 5; // Assign 5 to x

elem = document.getElementById("demo"); // Find an element
elem.innerHTML = x;                     // Display x in the element

var x; // Declare x

The below code will console undefined, check why and how

console.log(x === undefined); // true
var x = 3;

(function() {
  console.log(x); // undefined
  var x = 'local value';
})();

The above examples will be interpreted the same as:

var x;
console.log(x === undefined); // true
x = 3;

(function() {
  var x;
  console.log(x); // undefined
  x = 'local value';
})();

Hoisting is when variables declared outside of functions are available inside those functions. This is done so that the interpreter knows about these variables before they are used. It’s important to note that hoisting only applies to declarations; not assignments.

Consider the below examples using let, and const

Whether let and const are hoisted is a matter of definition debate. ReferencingError the variable in the block before the variable declaration always results in a ReferenceError, because the variable is in a “temporal dead zone” from the start of the block until the declaration is processed.

console.log(x); // ReferenceError
const x = 3;

console.log(y); // ReferenceError
let y = 3;

What’s Function Hoisting?

Function hoisting is when functions are automatically moved to the top of the execution context. This means that the function will be available to use before it has been defined.

Consider the example below

console.log(addition(5, 20)); // 25

function addition(n, m) {
  return n + m;
}

This code runs without any error, despite the addition() function being called before it’s declared. The JavaScript interpreter hoists the entire function declaration to the top of the current scope, so the code above is equivalent to:

// All function declarations are effectively at the top of the scope
function addition(n, m) {
  return n + m;
}

console.log(square(5, 20)); // 25

Function hoisting only works with function declarations, not with function expressions. As a result, the code below does not work.

console.log(addition); // ReferenceError: Cannot access 'addition' before initialization
const addition = function (n, m) {
  return n + m;
}

Conclusion

In other words, when you declare variables inside functions, they’re available outside of them. That means you can access them without having to pass them as arguments. If you need to use a variable inside a function, you should declare it at the top of the function.

JavaScript Variable Hoisting vs Function Hoisting Explained