Mastering JavaScript Hoisting: Tips and Tricks for Crushing Your Next Interview

Table of contents

No heading

No headings in the article.

Welcome back to my blog series on answering interview questions!!!!!

In my previous blog, we discussed the differences between the let, const, and var keywords in JavaScript. In this blog, we will explore the concept of hoisting in JavaScript, which is one of the most asked questions in the interviews.

Now, let's start with the most fundamental rule that everyone should follow: listen closely to the question and take a pause to think, gather your thoughts and organize your answer, it's okay to take some seconds to think through.

Reread the question with me, and let's come up with a response together. I am waiting...

Now if you were not able to answer then it's okay we are here to learn. On the other hand, if you already have your answer, congratulations!!

The answer should be clear and concise, let's see what would be the ideal response to this question:

Hoisting is a behavior in JavaScript where variable and function declarations are moved to the top of their respective scopes during the compilation phase. This means that even if a variable or function is declared at the bottom of a scope, it can still be accessed and used before its actual declaration in the code.

To understand this let's consider the following example:

console.log(a);
var a = 10;

Guess what will be the answer...

If we run this code in the browser console, it will output undefined.

You will ask, why is happens? this is because during the compilation phase, the variable declaration var a is moved to the top of the scope, but its value is not yet assigned. Therefore, when we try to log the value of a, it returns undefined.

Now, let's look at another example for a better understanding:

console.log(b); //?
let b = 20;

If you have read my previous blog you should be able to guess the output...

If we run this code in the browser console, it will throw an error: Uncaught ReferenceError: Cannot access 'b' before initialization. This is because the let keyword does not hoist its declarations to the top of the scope. Therefore, when we try to log the value of b, it throws an error because it has not yet been initialized.

Hoisting does not just happens with variable it happens with functions also!!!

let's see an example to understand:

helloWorld(); // Output: "Hello World!"

function helloWorld() {
  console.log("Hello World!");
}

In this example, the function helloWorld() is called before it is defined in the code. However, since function declarations are hoisted, the code still runs without any errors and outputs "Hello World!".

Here's another example and you can guess the output:

helloWorld();

var helloWorld = function() {
  console.log("Hello World!");
}

The output will be.............

Uncaught TypeError: helloWorld is not a function

In this example, a function expression is assigned to the variable helloWorld. When we try to call helloWorld() before it is defined, we get a TypeError because helloWorld is not yet a function. This is because function expressions are not hoisted like function declarations. function declarations are hoisted in JavaScript, meaning they can be called before they are defined in the code. Function expressions, on the other hand, are not hoisted and must be defined before they are called.

It's also important to note that while hoisting can be a useful feature in some cases, it can also lead to unexpected behavior and bugs in code.

Unexpected behavior may include the Redeclaration of variables: For example, if you have two variables with the same name in different scopes, and you use one of them before it is declared, the variable with the same name in the outer scope will be assigned the value, which can lead to unexpected results, Overwriting function declarations: For example, if you have two function declarations with the same name, the function that appears later in the code will overwrite the function that appears earlier, which can lead to unexpected results.

Therefore, it's best practice to always declare variables and functions at the top of their respective scopes, regardless of whether or not they will be hoisted.

When answering an interview question related to hoisting in JavaScript, it's important to first explain what hoisting is and how it works. Then, you can provide the above-given examples of how hoisting affects the behavior of variable and function declarations in JavaScript.

To make your interview more engageable you can ask: "Does that answer your question or is there anything else I can clarify for you?"

To summarize your response you can give a two-line summary: "Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their scope before the code is executed. This allows you to use variables and functions before they are declared in the code."

I have a trivia question for you to solve and discuss in the comments:

What happens when you declare a variable with the same name as a function in JavaScript?

Hint: This has to do with hoisting behavior in JavaScript.

We did it 🤩.

I hope you found this article helpful and that it has given you the confidence to respond effectively to questions during an interview. Thank you for reading.

Until then Happy coding. Stay tuned😉 for the next article.