JavaScript Variable Declarations

📜 Historical Context

Timeline

Before ES6 (2015): Only _________ was available
ES6/ES2015: Introduced _________ and _________

Why were new declarations needed?

Problems with var:

_________________________________________
_________________________________________
_________________________________________

⚖️ Quick Comparison Table

Fill in the characteristics of each declaration type:

Feature	var	let	const
Scope	___________	___________	___________
Can be reassigned?	___________	___________	___________
Can be redeclared?	___________	___________	___________
Hoisted?	___________	___________	___________
Initialized when hoisted?	___________	___________	___________

📝 Understanding var

Scope of var

var is ___________-scoped or ___________-scoped.

var greeting = "hey hi";

function newFunction() {
    var hello = "hello";
}

console.log(greeting); // Output: ___________
console.log(hello);    // Output: ___________
        

Hoisting with var

Complete the hoisted version:

Original Code:

console.log(greeter);
var greeter = "say hello";

How JavaScript interprets it:

_____________________
console.log(greeter); // ___________
_____________________

⚠️ The Problem with var:

What happens in this code? Fill in the output:

var greeter = "hey hi";
var times = 4;

if (times > 3) {
    var greeter = "say Hello instead";
}

console.log(greeter); // Output: ___________________
            

Why? _________________________________________

🎉 Understanding let

Key Characteristics

Scope: ___________
Can be updated? ___________
Can be re-declared in same scope? ___________

Block Scope Example

let greeting = "say Hi";

if (true) {
    let hello = "say Hello";
    console.log(hello); // Output: ___________
}

console.log(hello); // Output: ___________
        

let vs var - Scope Comparison

Fill in what happens with each declaration:

Scenario	With var	With let
Redeclare in same scope	___________	___________
Update/reassign value	___________	___________
Declare in different scopes	___________	___________

💡 Temporal Dead Zone (TDZ):

Definition: _________________________________________

_________________________________________

🔒 Understanding const

Key Rules

Must be ___________ at declaration
Cannot be ___________
Cannot be ___________
Is ___________-scoped

const with Objects and Arrays

Important Concept: With const, the ___________ is constant, not the ___________!

const person = {
    name: "Alice",
    age: 30
};

// Can we do this? (Yes/No)
person.age = 31;        // _____
person.city = "NYC";    // _____
person = {};            // _____

const numbers = [1, 2, 3];

// Can we do this? (Yes/No)
numbers.push(4);        // _____
numbers[0] = 10;        // _____
numbers = [4, 5, 6];    // _____
            

✨ Best Practices & When to Use Each

Modern JavaScript Guidelines

Default choice: ___________
When value needs to change: ___________
Never use: ___________

Common Use Cases

Choose the best declaration (var/let/const) for each scenario:

Scenario	Best Choice	Why?
Configuration values (API_URL)	_______	_____________________
Loop counter (i)	_______	_____________________
DOM element reference	_______	_____________________
User login status	_______	_____________________
Mathematical constants	_______	_____________________

💪 Practice Exercise

Refactor this code using let and const:

Original Code (using var):

var userAge = 25;
var userName = "Alice";
var scores = [85, 92, 78];
var total = 0;

for (var i = 0; i < scores.length; i++) {
    total = total + scores[i];
}

var average = total / scores.length;
userAge = userAge + 1;
            

Your Refactored Version:

_____ userAge = 25;
_____ userName = "Alice";
_____ scores = [85, 92, 78];
_____ total = 0;

for (_____ i = 0; i < scores.length; i++) {
    total = total + scores[i];
}

_____ average = total / scores.length;
userAge = userAge + 1;
            

🕳️ Common Pitfalls to Avoid

Using var in modern code:
Why avoid? _________________________________________
Using let when const would work:
Why avoid? _________________________________________
Accessing variables before declaration:
What happens? _________________________________________
Confusing const immutability:
Remember: _________________________________________

🎯 Key Takeaways

Complete these summary statements:

The main problem with var is: _________________________________________
Block scope means: _________________________________________
The Temporal Dead Zone exists for: _________________________________________
With const objects/arrays, you can: _________________________________________
The modern best practice is to: _________________________________________

📌 Remember the Golden Rule:

Use _________ by default, _________ when you need to reassign, and never _________!

❓ Review Questions

What will this code output and why?
console.log(x); let x = 5;
Answer: _________________________________________
Is this code valid? Why or why not?
const arr = [1, 2, 3]; arr.push(4);
Answer: _________________________________________
What's the difference between these two loops?
// Loop A for (var i = 0; i < 3; i++) { } // Loop B for (let i = 0; i < 3; i++) { }
Answer: _________________________________________

📝 Additional Notes

Use this space for any additional notes, questions, or examples from class: