Variables in JavaScript

Variables are containers that store data. They're one of the most fundamental concepts in programming!

1. What are Variables? 📦

What is it? A variable is a named storage location in your computer's memory. Think of it as a labeled box where you can put a value and retrieve it later.

Why use it? Without variables, you would have to hardcode every value. Variables allow you to write dynamic code where data can change, be reused, and be passed around.

How it works: You declare a variable using a keyword (let, const, or var), give it a name, and assign it a value.

2. let vs const vs var 🔑

JavaScript has three keywords for creating variables. It's crucial to understand the difference.

let - For Values That Change

What is it? A block-scoped variable that can be reassigned.

Why use it? Use let when you know the value will change later (e.g., a counter, a score, user input).

const - For Values That Don't Change

What is it? A block-scoped variable that cannot be reassigned. It must be initialized immediately.

Why use it? Use const by default. It makes your code safer because you (and other developers) know this value won't change unexpectedly.

var - The Old Way (Avoid) ⚠️

What is it? The original way to declare variables. It is function-scoped (not block-scoped) and can be redeclared.

Why avoid it? It has confusing behavior (hoisting, scoping issues) that leads to bugs.

3. Variable Scope & Hoisting 🔭

What is Scope? Scope determines where your variables are accessible.

• Block Scope (let, const): Only accessible inside the {} where they are defined.
• Function Scope (var): Accessible anywhere inside the function.

What is Hoisting? JavaScript moves declarations to the top of their scope before execution.

• var is hoisted and initialized with undefined.
• let and const are hoisted but stay in the Temporal Dead Zone (TDZ) until the line of code is reached.

4. Variable Naming Rules 📝

Rules You MUST Follow:

1. Start with a letter, $, or _.
2. Can contain letters, numbers, $, _.
3. Cannot use reserved words (class, return, if).
4. Case-sensitive (age ≠ Age).

Best Practices (Conventions):

• camelCase: userName, isLoggedIn (Standard for variables)
• PascalCase: UserProfile (Classes and Components)
• UPPER_SNAKE_CASE: MAX_COUNT, API_URL (Constants)

5. Memory Allocation (Advanced) 🧠

How it works:

• Primitives (Number, String, Boolean): Stored in the Stack. The variable holds the actual value.
• Reference Types (Objects, Arrays,function): Stored in the Heap. The variable holds a reference (memory address) to the value.

Why does this matter? const only protects the variable binding (the reference), not the value inside an object.

Practical Example: User Profile 👤

Quiz

Key Takeaways

✅ const is your default choice. Use it for everything that doesn't change.
✅ let is for values that will change (counters, inputs).
✅ var is obsolete. Avoid it to prevent scoping bugs.
✅ Hoisting moves declarations to the top, but let/const stay in the TDZ.
✅ Reference Types (Objects) are mutable even with const.

What's Next?

Now that you know how to store data, let's look at the different Data Types available in JavaScript!

Keep coding! 🚀