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

Need a 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

Need a 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!';
}

Need a 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

Need a 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.