A Primer on Javascript Hoisting for Beginners

Javascript is one of the widely used programming languages in web development, and it's important for every web developer to understand and comprehend how it works.

What is Hoisting?

Hoisting is one of the fundamental ideas in JavaScript, and it describes how variables and functions are handled prior to their execution.

In this article, I'll explain what hoisting is, how it works, and why it's important to understand. Read on if you've ever questioned whether calling functions or variables before writing them into your code is possible.

Hoisting is a term used to describe the way JavaScript variables and functions are moved to the top of their respective scopes during the compilation phase. This means that variables and functions can be declared and used before they are actually defined in the code. The benefit of this is that it enables programmers to create more readable and understandable code.

This implies that functions and variables, regardless of where they are declared and whether they have a global or local scope, are always raised(hoisted) to the top of their respective scopes.

JavaScript's default behavior is Hoisting and it takes place automatically in the background. The variable or function declaration is moved to the top of the current scope when it is seen by the JavaScript interpreter. This means that the variable or function, even if it hasn't been defined yet, can be used anywhere within that scope.

However, it's important to keep in mind that the hoisting process just moves the declaration to the top of its respective scope. The assignments and initializations are left in place. Hence if you try to use a variable or function before it’s been declared, you’ll get an error.

Enough of the talks, let's use the following code as an example:

function myFunction() {
  console.log(myVar);
  var myVar = 30;
}

Running this code would result in the value of myVar being displayed on the console. The actual result, however, would be "undefined" due to hoisting. This is because the variable declaration is moved(hoisted) to the top of the function scope, but the initialization of the variable doesn't take place until later in the code.

Here is another example:

console.log(myVar);
var myVar = 25;

In this example, the result is also "undefined". This is the case because the initialization of the variable doesn't occur until later in the code, despite the variable declaration being relocated to the top of the global scope.

Function declarations can also be hoisted. Consider this:

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

This code would run without any errors and output “Hello, world!” to the console. This is because the function declaration is moved to the top of the global scope during the compilation phase, so it can be used anywhere within that scope.

In conclusion, hoisting is a key idea in JavaScript that enables variables and functions to be declared and used prior to being specified in the code. To design better code, developers must be aware of how hoisting functions because it occurs automatically behind the scenes. It's crucial to keep in mind that hoisting does not change assignments or initializations; rather, it just elevates declarations to the top of their respective scopes.

I hope that this article will pique your curiosity in the nuances of the JavaScript language and serve as a useful introduction to the idea of hoisting in JavaScript.

Feel free to leave your thoughts and questions in the comment section.

Further Reading

Understanding hoisting in Javascript

Hoisting in JavaScript - What exactly does this mean?

What is Hoisting in JavaScript?

MDN - Hoisting