JavaScript Variables

1. What Is a Variable in JavaScript?

A variable is a named container used to store data that your program can use, modify, and reference later.

Think of it as a label attached to a value in memory.

Learn JavaScript Online

let age = 25;

Here:

• age → variable name
• 25 → value stored in memory

2. Why Variables Matter

Learn software development with Codeflare

Variables allow you to:

• Store user input
• Reuse values
• Update data over time
• Write dynamic and readable code

Without variables, programs would be static and useless.

3. Declaring Variables in JavaScript

JavaScript provides three keywords for declaring variables:

1. var (old, mostly avoided)
2. let (modern, recommended)
3. const (modern, preferred when values shouldn’t change)

4. var — The Old Way (Avoid in Modern Code)

var name = "Luke";

Characteristics of var:

• Function-scoped (not block-scoped)
• Can be redeclared
• Can be reassigned
• Hoisted (initialized as undefined)

Example Problem with var:

if (true) {
  var x = 10;
}
console.log(x); // 10 (unexpected!)

⚠️ This behavior caused many bugs, which is why let and const were introduced.

5. let — Modern, Flexible Variables

let score = 50;
score = 60;

Characteristics of let:

• Block-scoped
• Can be reassigned
• Cannot be redeclared in the same scope
• Hoisted but not initialized (Temporal Dead Zone)

Example:

if (true) {
  let y = 20;
}
console.log(y); // ❌ ReferenceError

✔️ Use let when the value will change.

6. const — Constant Variables (Most Preferred)

const pi = 3.14;

Characteristics of const:

• Block-scoped
• Cannot be reassigned
• Must be initialized immediately
• Safe and predictable

Example:

const country = "Nigeria";
country = "Ghana"; // ❌ Error

✔️ Use const by default.

7. const with Objects and Arrays (Important!)

const prevents reassignment, not mutation.

Object Example:

const user = { name: "Luke", age: 30 };
user.age = 31; // ✅ Allowed

Array Example:

const numbers = [1, 2, 3];
numbers.push(4); // ✅ Allowed

❌ But reassignment is not allowed:

numbers = [5, 6]; // Error

8. Variable Scope Explained

1. Global Scope

Accessible everywhere.

let globalVar = "I am global";

2. Function Scope

Accessible only inside the function.

function test() {
  let localVar = "Local";
}

3. Block Scope

Accessible only inside {} blocks (if, for, etc.)

if (true) {
  let blockVar = "Inside block";
}

9. Hoisting in JavaScript

Hoisting means JavaScript moves declarations to the top during compilation.

var hoisting:

console.log(a); // undefined
var a = 5;

let and const hoisting:

console.log(b); // ❌ ReferenceError
let b = 5;

This happens because of the Temporal Dead Zone (TDZ).

10. Variable Naming Rules

Valid Names:

let firstName;
let _count;
let $price;

Invalid Names:

let 1name;     // ❌
let first-name; // ❌

Best Practices:

• Use camelCase
• Use meaningful names
• Avoid single letters (except loops)

let totalAmount;
let isLoggedIn;

11. Dynamic Typing in JavaScript

JavaScript is dynamically typed, meaning variables can change types.

let value = 10;
value = "Ten";
value = true;

⚠️ This is powerful but can cause bugs if not careful.

12. Variable Assignment vs Declaration

Declaration:

let x;

Assignment:

x = 100;

Both together:

let x = 100;

13. Best Practices for Using Variables

✔️ Prefer const
✔️ Use let when reassignment is needed
❌ Avoid var
✔️ Keep scope as small as possible
✔️ Name variables clearly

14. Common Mistakes

1. Using var unintentionally

var count = 0;

2. Forgetting let or const

total = 50; // ❌ Creates a global variable

3. Reassigning const

const x = 5;
x = 6; // ❌ Error

15. Summary Table

Keyword	Scope	Reassign	Redeclare	Recommended
var	Function	✅	✅	❌
let	Block	✅	❌	✅
const	Block	❌	❌	✅✅

Final Rule of Thumb

Use const by default.
Use let only when the value must change.
Avoid var.