What hoisting is in Javascript - Mini Project: Build & Apply

Understanding What Hoisting Is

📖 Scenario: Imagine you are organizing a party and you want to prepare a list of tasks. But before you start, you want to understand how JavaScript handles variable and function declarations behind the scenes. This will help you avoid surprises when your code runs.

🎯 Goal: You will learn what hoisting is in JavaScript by creating variables and functions, then seeing how JavaScript treats them when you try to use them before declaring.

📋 What You'll Learn

Create a variable using var and assign a value

Create a function declaration

Try to use the variable and function before their declarations

Observe the output to understand hoisting

💡 Why This Matters

🌍 Real World

Hoisting explains why some JavaScript code works even if variables or functions are used before they appear in the code. This helps when reading or debugging code written by others.

💼 Career

Understanding hoisting is essential for JavaScript developers to write bug-free code and to understand how the language executes code behind the scenes.

1

Create a var variable called message and assign it the value 'Hello!'

Create a variable called message using var and set it to the string 'Hello!'.

Javascript

// Create a variable called message using var and assign 'Hello!'
// Your code here

Hint

Use var message = 'Hello!'; to create the variable.

2

Create a function called sayHello that returns 'Hello!'

Create a function declaration called sayHello that returns the string 'Hello!'.

Javascript

var message = 'Hello!';
// Create a function declaration called sayHello that returns 'Hello!'
// Your code here

Hint

Use function sayHello() { return 'Hello!'; } to create the function.

3

Use console.log to print message and the result of sayHello() before their declarations

Write two console.log statements: one to print message and one to print the result of calling sayHello(). Place these lines before the declarations of message and sayHello.

Javascript

// Use console.log to print message and sayHello() before their declarations
// Your code here

var message = 'Hello!';
function sayHello() {
    return 'Hello!';
}

Hint

Write console.log(message); console.log(sayHello()); before the variable and function declarations.

4

Run the code and observe the output to understand hoisting

Run the program and observe the output printed by the two console.log statements. This shows how JavaScript hoists declarations.

Javascript

console.log(message);
console.log(sayHello());

var message = 'Hello!';
function sayHello() {
    return 'Hello!';
}

// Run the code to see the output

Hint

The first console.log prints undefined because message is hoisted but not initialized yet. The second prints Hello! because function declarations are hoisted with their body.

Practice

1. What does hoisting mean in JavaScript?

easy

A. JavaScript converts all variables to global scope automatically.

B. JavaScript moves variable and function declarations to the top before running code.

C. JavaScript delays execution of code until user interaction.

D. JavaScript runs code only after the entire file is loaded.

Solution

1. Step 1: Understand hoisting concept

   Hoisting means JavaScript moves declarations of variables and functions to the top of their scope before running the code.

2. Step 2: Compare options

   Only JavaScript moves variable and function declarations to the top before running code. correctly describes this behavior. Other options describe unrelated behaviors.

3. Final Answer:

   JavaScript moves variable and function declarations to the top before running code. -> Option B

4. Quick Check:

   Hoisting = Moving declarations up [OK]

Hint: Hoisting means declarations move up before code runs [OK]

Common Mistakes:

• Thinking hoisting moves variable assignments, not just declarations
• Confusing hoisting with asynchronous code execution
• Believing hoisting applies to all variable types equally

2. Which of the following variable declarations is hoisted and initialized as undefined?

easy

A. function foo() {}

B. const y = 10;

C. let x = 5;

D. var z = 15;

Solution

1. Step 1: Identify hoisting behavior for variable types

   Variables declared with var are hoisted and initialized as undefined. let and const are hoisted but not initialized, causing a temporal dead zone.

2. Step 2: Match options to behavior

   var z = 15; uses var, so it is hoisted and initialized as undefined. Others do not behave this way.

3. Final Answer:

   var z = 15; -> Option D

4. Quick Check:

   var hoisted as undefined [OK]

Hint: Only var variables are hoisted and set to undefined [OK]

Common Mistakes:

• Assuming let and const behave like var with hoisting
• Confusing function declarations with variable declarations
• Thinking function expressions are hoisted like functions

3. What will be the output of this code?

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

medium

A. undefined

B. 10

C. ReferenceError

D. null

Solution

1. Step 1: Understand var hoisting with initialization

   The declaration var myVar is hoisted to the top, but the assignment = 10 stays in place.

2. Step 2: Evaluate console.log output

   At the time of console.log(myVar), myVar exists but is undefined because assignment hasn't happened yet.

3. Final Answer:

   undefined -> Option A

4. Quick Check:

   var declaration hoisted, value undefined [OK]

Hint: var declaration hoisted, value assigned later [OK]

Common Mistakes:

• Expecting the value 10 to print immediately
• Confusing ReferenceError with undefined for var
• Thinking let or const behave the same way

4. Find the error in this code related to hoisting:

console.log(foo());
var foo = function() { return 'Hello'; };

medium

A. No error, outputs 'Hello'

B. SyntaxError

C. TypeError: foo is not a function

D. ReferenceError: foo is not defined

Solution

1. Step 1: Understand hoisting of function expressions

   Variable foo is hoisted as undefined, but the function assignment is not hoisted.

2. Step 2: Analyze calling foo before assignment

   Calling foo() before assignment tries to call undefined as a function, causing a TypeError.

3. Final Answer:

   TypeError: foo is not a function -> Option C

4. Quick Check:

   Function expressions not hoisted as functions [OK]

Hint: Function expressions hoisted as undefined, not callable [OK]

Common Mistakes:

• Thinking function expressions are fully hoisted
• Expecting no error because of hoisting
• Confusing ReferenceError with TypeError

5. Consider this code:

console.log(greet());

function greet() {
  return 'Hi!';
}

var greet = function() {
  return 'Hello!';
};

console.log(greet());

What will be the output?

hard

A. 'Hi!' then ReferenceError

B. 'Hello!' then 'Hello!'

C. ReferenceError then 'Hello!'

D. 'Hi!' then 'Hello!'

Solution

1. Step 1: Analyze hoisting of function declaration

   The function declaration function greet() is fully hoisted, so the first greet() call returns 'Hi!'.

2. Step 2: Analyze var assignment after first call

   The var greet declaration is hoisted but initialized as undefined. The assignment to a function expression happens after the first call, so the second greet() call uses the new function returning 'Hello!'.

3. Final Answer:

   'Hi!' then ReferenceError -> Option A

4. Quick Check:

   Function declaration hoisted, var assignment overrides later [OK]

Hint: Function declarations hoisted fully; var assignments override later [OK]

Common Mistakes:

• Thinking var assignment overrides before first call
• Expecting ReferenceError due to var redeclaration
• Confusing function declaration and expression hoisting