Understanding Javascript Hoisting with Variables and Functions

Dive into the concept of `Javascript hoisting`. Learn how variable and function hoisting works, and why your variable might return a type you didn't expect.
---

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Javascript hoisting with variable and function

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Understanding Javascript Hoisting with Variables and Functions

JavaScript is a powerful and versatile programming language that comes with its own quirks and behaviors. One such behavior is hoisting. If you've ever encountered unexpected output while dealing with variables and functions in JavaScript, you are not alone. In this guide, we will explore what hoisting is and why it results in seemingly counterintuitive outcomes, using a specific example to illustrate the concept.

The Problem at Hand

Consider the following snippet of JavaScript code:

[[See Video to Reveal this Text or Code Snippet]]

You might ask, "Why does this code return number for typeof(a)?" At first glance, you may wonder whether the function declaration overwrites the variable assignment. Let's dive deeper to uncover the truth behind this behavior and the mystery of hoisting.

What is Hoisting?

Hoisting is a JavaScript mechanism where variables and function declarations are moved (or "hoisted") to the top of their containing scope during the compilation phase. This means that you can use variables and functions before you declare them in your code.

Key Points of Hoisting

Variable Declarations: Only the declarations are hoisted, not the initializations. So, a variable declared with var is available throughout the function or global scope, but is undefined until the line where it is initialized is executed.

Function Declarations: Whole function declarations are hoisted, meaning you can call them before their declaration in the code.

Dissecting the Example

Now, let’s re-evaluate the code step by step:

Initial Declaration Hoisting: Before the execution, the JavaScript engine hoists the variable a and the function a(). The hoisted code would look like this:

[[See Video to Reveal this Text or Code Snippet]]

Final Type Check: When you call typeof(a), the variable a has already been initialized to 2 in the execution context. Thus, typeof(a) returns number because the numeric value assigned to a takes precedence over the function declaration.

An Illustrated Example of Hoisting

To further understand hoisting, let's analyze another example:

[[See Video to Reveal this Text or Code Snippet]]

Breakdown:

Conclusion

Understanding hoisting is essential for any JavaScript developer. It explains a lot about why certain variables or functions behave in unexpected ways. In summary, the variable a shadows the function a() because the variable assignment occurs after the hoisting has taken place. Therefore, when we check the type of a, we see that it is determined by the last assignment to a, which is a number.

Final Takeaway

The JavaScript hoisting mechanism ensures that understanding how and when declarations are processed is key to avoiding confusion in your code. Remember: variable declarations can be confusing, and to avoid pitfalls, it's always a good practice to declare variables and functions at the top of their scope.

Now you're equipped to tackle JavaScript hoisting with confidence! Happy coding!