Variables & Constants
Learn how to declare and use variables with var, let, and const — and understand why modern JS prefers let and const.
What is a Variable?
A variable is a named container for storing data. Think of it as a labeled box where you can put a value, read it later, or replace it with something else.
In JavaScript, you declare variables using three keywords: var, let, and const.
var — The Old Way
var has been in JavaScript since the beginning. It works, but it has some quirks that caused a lot of bugs:
var name = "Alice";
console.log(name); // "Alice"
// var can be redeclared (this is usually a mistake)
var name = "Bob";
console.log(name); // "Bob" — no error!
// var is function-scoped, not block-scoped
if (true) {
var age = 30;
}
console.log(age); // 30 — leaks outside the if block!
⚠️Avoid var in modern code
var is function-scoped, can be re-declared, and gets "hoisted" to the top of its function in confusing ways. Use let and const instead.
let — Block-Scoped Variables
let was introduced in ES6 (2015) to fix the problems with var. Use it when you need a variable whose value will change.
let score = 0;
score = 10; // update it
score = 20; // update it again
console.log(score); // 20
// let is block-scoped
if (true) {
let blockVar = "only here";
console.log(blockVar); // "only here"
}
// console.log(blockVar); // Error! blockVar is not defined here
Block scope means the variable only exists inside the {} where it was declared — whether that's an if block, a for loop, or a function body.
const — Constants
const declares a value that cannot be reassigned. Use it whenever you don't intend to change the variable — which is most of the time.
const PI = 3.14159;
// PI = 3; // TypeError: Assignment to constant variable.
const greeting = "Hello!";
console.log(greeting); // "Hello!"
💡const doesn't mean immutable
With const, you can't reassign the variable itself, but if it holds an object or array, you can still modify the object's properties or the array's contents.
const user = { name: "Alice" };
user.name = "Bob"; // This is fine!
console.log(user.name); // "Bob"
// user = {}; // This throws an error
The Golden Rule
A simple rule that covers 95% of cases:
constby default — use it unless you know the value will changeletwhen the value needs to change (loop counters, accumulators, state)- Never
varin new code
const API_URL = "https://api.example.com"; // won't change
const colors = ["red", "green", "blue"]; // const, but array is mutable
let userAge = 25;
userAge += 1; // birthday!
let isLoggedIn = false;
isLoggedIn = true; // after login
Variable Naming
JavaScript variable names are case-sensitive and use camelCase by convention:
const firstName = "Alice"; // ✓ camelCase
const MAX_SIZE = 100; // ✓ SCREAMING_SNAKE for true constants
const UserProfile = {}; // ✓ PascalCase for classes
// Names must start with a letter, _ or $
let _privateVar = "ok";
let $element = "ok";
// let 1stPlace = "nope"; // SyntaxError
Good names make code self-documenting. Prefer descriptive names:
// ✗ Unclear
let d = 7;
let n = "John";
// ✓ Clear
const daysInWeek = 7;
const userName = "John";
Declaring Multiple Variables
// One per line (clearest)
const x = 1;
const y = 2;
const z = 3;
// Destructuring (ES6) — covered in depth later
const [a, b, c] = [1, 2, 3];
const { name, age } = { name: "Alice", age: 30 };
Key Takeaways
constfor values that don't change — use it by defaultletfor values that will be reassignedvaris outdated — skip it- Variable names are case-sensitive and use camelCase
- Variables are block-scoped with
letandconst
Ready to test your knowledge?
Take a quiz on what you just learned.