Variable hoisting behavior in Javascript - Mini Project: Build & Apply

Understanding Variable Hoisting Behavior

📖 Scenario: Imagine you are learning how JavaScript handles variables before the code runs. This is called hoisting. It means some variables are moved to the top of their scope automatically.We will explore how var, let, and const behave differently when hoisted.

🎯 Goal: You will write small pieces of code to see how JavaScript treats variables declared with var, let, and const before they are assigned values.By the end, you will understand why some variables can be used before declaration and others cannot.

📋 What You'll Learn

Create variables using var, let, and const with specific names

Assign values after declaration

Try to access variables before declaration to see hoisting effects

Print outputs to observe results

💡 Why This Matters

🌍 Real World

Understanding variable hoisting helps avoid bugs when variables are used before they are declared in JavaScript code.

💼 Career

Many JavaScript jobs require knowledge of hoisting to write clean, bug-free code and debug issues effectively.

1

Create variables with var, let, and const

Create three variables: varVariable using var, letVariable using let, and constVariable using const. Assign the values "I am var", "I am let", and "I am const" respectively.

Javascript

# Your code here

Need a hint?

Use var, let, and const keywords to declare variables with the exact names and values given.

2

Access variables before declaration

Write three console.log statements to print varVariable, letVariable, and constVariable before their declarations. Place these console.log lines above the variable declarations from Step 1.

Javascript

// Your code here
var varVariable = "I am var";
let letVariable = "I am let";
const constVariable = "I am const";

Need a hint?

Place the console.log lines before the variable declarations to see what happens when you access variables before they are declared.

3

Explain hoisting behavior with comments

Add comments above each console.log line explaining what you expect to see when running the code for varVariable, letVariable, and constVariable. Use the exact comments: // undefined due to var hoisting, // ReferenceError due to temporal dead zone, and // ReferenceError due to temporal dead zone respectively.

Javascript

// Your code here
console.log(varVariable);
console.log(letVariable);
console.log(constVariable);

var varVariable = "I am var";
let letVariable = "I am let";
const constVariable = "I am const";

Need a hint?

Write the exact comments above each console.log to describe the expected output for each variable.

4

Print variable values after declaration

Add three console.log statements after the variable declarations to print the values of varVariable, letVariable, and constVariable.

Javascript

// undefined due to var hoisting
console.log(varVariable);
// ReferenceError due to temporal dead zone
console.log(letVariable);
// ReferenceError due to temporal dead zone
console.log(constVariable);

var varVariable = "I am var";
let letVariable = "I am let";
const constVariable = "I am const";

// Your code here

Need a hint?

Print the variables after their declarations to see their assigned values.