JavaScript Variables
2 April 2025 | Category: JavaScript
What is a Variable?
A variable in JavaScript is a container for storing data. It allows you to store, update, and retrieve values in your program.
1️⃣ Declaring Variables in JavaScript
JavaScript provides three ways to declare variables:
Keyword | Scope | Reassignment | Hoisting | Best Practice |
---|---|---|---|---|
var | Function-scoped | ✅ Allowed | ✅ Hoisted but undefined | ❌ Avoid using (old method) |
let | Block-scoped | ✅ Allowed | ❌ Not hoisted | ✅ Preferred for variable values |
const | Block-scoped | ❌ Cannot be changed | ❌ Not hoisted | ✅ Preferred for constants |
2️⃣ Using var
(Old Way – Avoid Using)
🔹 Example:
var name = "Alice";
console.log(name); // Output: Alice
var age = 25;
age = 30; // Reassigning value
console.log(age); // Output: 30
❌ Why Avoid var
?
var
is function-scoped, meaning it can be accessed anywhere inside a function.- It can be redeclared, which can lead to errors in large programs.
3️⃣ Using let
(Recommended for Variables)
🔹 Example:
let city = "New York";
console.log(city); // Output: New York
city = "London"; // ✅ Allowed (Reassignment)
console.log(city); // Output: London
✅ Why Use let
?
let
is block-scoped (only available inside{}
where declared).- It cannot be redeclared in the same scope, preventing accidental overwrites.
4️⃣ Using const
(Recommended for Constants)
🔹 Example:
const PI = 3.14159;
console.log(PI); // Output: 3.14159
// PI = 3.14; ❌ Error: Cannot reassign a constant
✅ Why Use const
?
const
is block-scoped likelet
.- It cannot be reassigned after initialization.
- Best for values that never change (e.g., mathematical constants, API URLs).
5️⃣ Variable Naming Rules
🔹 Valid Names:
✔️ Must start with a letter, $
, or _
✔️ Can contain letters, numbers, _
, and $
✔️ Case-sensitive (myVar
and myvar
are different)
🔹 Invalid Names:
❌ Cannot start with a number (1name
❌)
❌ Cannot use reserved keywords (e.g., let let = 5; ❌
)
🔹 Example:
let firstName = "John"; // ✅ Correct
let $price = 100; // ✅ Correct
let _totalAmount = 500; // ✅ Correct
// let 123user = "Alice"; ❌ Invalid (Cannot start with a number)
6️⃣ JavaScript Data Types in Variables
JavaScript variables can store different types of values.
🔹 Example:
let text = "Hello"; // String
let number = 42; // Number
let isStudent = true; // Boolean
let fruits = ["Apple", "Banana", "Mango"]; // Array
let person = { name: "John", age: 25 }; // Object
let nothing = null; // Null
let notDefined; // Undefined
7️⃣ Variable Scope in JavaScript
Scope defines where the variable can be accessed in your program.
🔹 Global Scope: Variable is accessible everywhere in the script.
🔹 Function Scope: Variable is accessible only inside the function.
🔹 Block Scope: (For let
& const
) Variable is accessible only inside {}
.
🔹 Example:
let globalVar = "I am global"; // Global scope
function testFunction() {
let localVar = "I am inside a function"; // Function scope
console.log(localVar); // ✅ Works
}
console.log(globalVar); // ✅ Works
// console.log(localVar); ❌ Error: localVar is not defined
8️⃣ Hoisting in JavaScript
Hoisting is JavaScript’s behavior where variables and functions are moved to the top of their scope before execution.
🔹 Example (var
is hoisted but undefined):
console.log(x); // Output: undefined (Hoisting works with `var`)
var x = 10;
🔹 Example (let
& const
are NOT hoisted):
console.log(y); // ❌ Error: Cannot access 'y' before initialization
let y = 20;
9️⃣ Best Practices for JavaScript Variables
✅ Use const
by default, and let
when you need to change values.
✅ Avoid var
to prevent unexpected bugs.
✅ Use meaningful names (userAge
instead of x
).
✅ Follow camelCase naming convention (firstName
, totalAmount
).
🚀 Conclusion
✔️ var
is outdated, avoid using it.
✔️ let
is great for variables that change.
✔️ const
is best for constants that don’t change.
✔️ Use meaningful names & follow best practices.