Hoisting with let and const in Javascript - Mini Project: Build & Apply

Understanding Hoisting with let and const

📖 Scenario: Imagine you are organizing a small event and you want to keep track of the number of guests and the event name. You will learn how JavaScript handles variable declarations with let and const before they are used in the code, a concept called hoisting.

🎯 Goal: You will create variables using let and const, try to access them before declaration to see what happens, and then correctly use them after declaration.

📋 What You'll Learn

Create variables using let and const with exact names and values

Add a helper variable to control access timing

Use a try...catch block to safely test accessing variables before declaration

Print the final values of the variables after declaration

💡 Why This Matters

🌍 Real World

Understanding hoisting helps avoid bugs when using variables in JavaScript, especially in larger programs where order of code matters.

💼 Career

Many programming jobs require knowledge of JavaScript variable behavior to write clean, error-free code and debug issues efficiently.

1

Add a control variable for access timing

Create a variable called accessBeforeDeclaration using let and set it to true. This will help us decide when to try accessing variables before they are declared.

Javascript

// Create a variable called accessBeforeDeclaration using let and set it to true
// Your code here

Need a hint?

Use let accessBeforeDeclaration = true;

2

Try accessing variables before declaration safely

Write a try...catch block that runs only if accessBeforeDeclaration is true. Inside the try, attempt to print guestCount and eventName before they are declared. In the catch, print the error messages.

Javascript

let accessBeforeDeclaration = true;

if (accessBeforeDeclaration) {
    // Use try...catch to print guestCount and eventName before declaration
    // Your code here
}

Need a hint?

Use if (accessBeforeDeclaration) { try { console.log(guestCount); } catch (error) { console.log(error.message); } } and similarly for eventName.

3

Create variables with let and const

Now create a variable called guestCount using let and set it to 50. Also create a constant called eventName using const and set it to 'Birthday Party'.

Javascript

let accessBeforeDeclaration = true;

if (accessBeforeDeclaration) {
    try {
        console.log(guestCount);
    } catch (error) {
        console.log(error.message);
    }
    try {
        console.log(eventName);
    } catch (error) {
        console.log(error.message);
    }
}

// Create a variable called guestCount using let and set it to 50
// Create a constant called eventName using const and set it to 'Birthday Party'
// Your code here

Need a hint?

Use let guestCount = 50; and const eventName = 'Birthday Party';

4

Print variables after declaration

Print the values of guestCount and eventName after their declarations using console.log.

Javascript

let accessBeforeDeclaration = true;

if (accessBeforeDeclaration) {
    try {
        console.log(guestCount);
    } catch (error) {
        console.log(error.message);
    }
    try {
        console.log(eventName);
    } catch (error) {
        console.log(error.message);
    }
}

let guestCount = 50;
const eventName = 'Birthday Party';

// Print guestCount and eventName after declaration
// Your code here

Need a hint?

Use console.log(guestCount); and console.log(eventName); after the if block.