JS - What is output Question 1

Understanding Variable Hoisting in JavaScript Functions

In JavaScript, understanding variable hoisting is crucial for writing reliable and predictable code. Let's delve into a common scenario where variable hoisting can impact your code: within functions.

Consider the following code snippet:

function sayHi() {
  console.log(name);
  console.log(age);
  var name = 'Lydia';
  let age = 21;
}

sayHi();

What do you think the output of this code would be?

If you thought it would throw an error, you're partially correct. Let's break it down.

In JavaScript, variable declarations (both var and let/const) are hoisted to the top of their containing scope. However, only the declaration is hoisted, not the initialization.

Here's what happens when sayHi() is invoked:

1. The function sayHi() is called.
2. Within the function scope, var name and let age are hoisted to the top of the function.
3. However, only the declarations are hoisted, not the assignments. This means that JavaScript knows about the existence of name and age within the function, but their values are undefined at this point.

Now, let's analyze each console.log() statement:

• console.log(name): At this point, name is declared with var, so it's hoisted to the top. However, it hasn't been assigned a value yet, so it logs undefined.
• console.log(age): Here, age is declared with let, so it's also hoisted to the top. However, since let variables are not initialized until the line of code where they are declared, accessing age before its declaration throws a ReferenceError.

Therefore, the output of the code would be:

undefined
ReferenceError: age is not defined

To avoid unexpected behavior caused by hoisting, it's a good practice to always declare your variables at the top of their scope and initialize them before using them. This helps in writing clearer and more maintainable code.

Understanding variable hoisting in JavaScript can help you write more predictable code and debug issues effectively. Remembering that only declarations are hoisted, not initializations, will aid you in anticipating how your code will behave.