Common hoisting pitfalls in Javascript - Mini Project: Build & Apply

Common hoisting pitfalls

📖 Scenario: Imagine you are working on a small JavaScript program that uses variables and functions. You want to understand how JavaScript moves variable and function declarations to the top before running the code. This is called hoisting. Sometimes, hoisting can cause unexpected results if you don't know how it works.

🎯 Goal: You will create a simple JavaScript program that shows how hoisting works with var, let, and function declarations. You will see common mistakes and how to avoid them.

📋 What You'll Learn

Create a variable using var and assign a value after using it

Create a variable using let and try to use it before declaration

Create a function declaration and call it before its definition

Print the results to observe hoisting behavior

💡 Why This Matters

🌍 Real World

Hoisting is a key concept in JavaScript that affects how variables and functions behave when the code runs. Knowing it helps you debug errors and write better code.

💼 Career

Many JavaScript jobs require understanding hoisting to maintain legacy code and avoid common pitfalls in web development.

1

Create a var variable and use it before assignment

Create a variable called message using var. Then write a console.log(message) line before assigning message = 'Hello from var'.

Javascript

console.log(message)
var message;
// Your code here

Need a hint?

Variables declared with var are hoisted but their value is undefined until assigned.

2

Create a let variable and try to use it before declaration

Add a console.log(count) line before declaring a variable called count using let and assigning it the value 10.

Javascript

console.log(count)
let count = 10;
// Your code here

Need a hint?

Variables declared with let are not hoisted like var. Using them before declaration causes an error.

3

Create a function declaration and call it before definition

Write a call to a function named greet before its declaration. Then declare the function greet that prints 'Hello from function' using console.log.

Javascript

greet()
function greet() {
  console.log('Hello from function');
}
// Your code here

Need a hint?

Function declarations are hoisted completely, so you can call them before they appear in the code.

4

Print all outputs to observe hoisting behavior

Run the program and observe the output printed by the console.log statements. The output should show undefined for the var variable before assignment, an error for the let variable, and the greeting message from the function.

Javascript

// Run the code to see the output
// Your code here

Need a hint?

Look carefully at the console output to understand how hoisting affects each case.