Hoisting

Understanding Hoisting and Execution Context in JavaScript

Let's dive into a fundamental yet often confusing concept in JavaScript—Hoisting. By the end of this blog, you'll have a clearer understanding of memory allocation, undefined, and why JavaScript behaves the way it does.

Let's Observe This Code:

getName();  // Hello
console.log(x);  // undefined 

var x = 7;

function getName() {
  console.log("Hello");
}

Why Doesn’t This Throw an Error?

1. In many other programming languages, this code would throw an outright error. Why? Because accessing a variable or function that hasn’t been defined yet is not allowed.
2. But in JavaScript, something magical happens during the Memory Creation Phase of the Execution Context.

The Memory Creation Phase

1. During this phase:
   1. Variables are assigned a placeholder value of undefined.
   2. Function declarations are stored in memory with their entire code.
2. This means that when we execute the code line by line, it can access the undefined value of variables or the complete function in memory.

So, in the example above:

• getName() works because the function was stored in memory during the creation phase.
• console.log(x) outputs undefined because the variable x was also allocated memory but wasn’t assigned a value yet.

What Happens If We Remove var x = 7;?

If you remove the line var x = 7;, the code will throw an error: Uncaught ReferenceError: x is not defined

Why? Because now the variable x is not declared at all, so JavaScript doesn’t allocate memory for it.

What is Hoisting?

Hoisting is a concept in JavaScript that lets us access variables and functions before we initialize or define them. This happens because of the Memory Creation Phase.

Think of it like this:
JavaScript scans through the code before executing it and creates memory space for variables and functions.

Key takeaways about hoisting:

1. Variables declared with var are hoisted but initialized as undefined.
2. Functions are hoisted with their full definitions, so you can call them before they appear in the code.

Here's Another Example:

getName(); // Hello
console.log(x); // undefined
console.log(getName); // Returns the whole function definition

function getName() {
  console.log("Hello");
}

Explanation:

1. The function getName() was already stored in memory, so calling it works perfectly fine.
2. The variable x was also declared but not yet assigned a value, so it logs undefined.
3. When you log getName, you get the entire function definition because it was fully hoisted.

Arrow Functions and Hoisting

Now, let’s observe a different example with arrow functions:

getName2(); 
// Uncaught TypeError: getName2 is not a function
getName3(); 
// Uncaught TypeError: getName3 is not a function
console.log(getName);

var getName2 = function () => {
  // 
}
var getName3 = () => {
  //
}

What’s Happening Here?

• In the case of arrow functions, the function is stored as a value inside a variable.
• During the memory allocation phase, variables like getName2 and getName3 are assigned undefined.
• When you try to execute getName2() or getName3(), JavaScript sees undefined() and throws a TypeError because undefined is not a function.

Key Takeaways :-

1. Variable Declarations: Variables declared with var are hoisted but initialized as undefined.
2. Function Declarations: Functions are fully hoisted and ready to use, even before their definition appears in the code.
3. Arrow Functions: When assigned to a var, they behave like variables and are hoisted as undefined. This means you can’t call them before their definition.

By understanding how JavaScript allocates memory and executes code, you’ll gain deeper insights into debugging and writing error-free code. Remember: Hoisting is your friend—but only if you know how it works.

Happy coding! 🚀