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.

About the Author

codeflare

Administrator

Latest tech news and coding tips.

Visit Website View All Posts