Variables: let const var and Scope
Declare variables with let, const, and var. Understand block scope, function scope, and why const is preferred for most values.
Variables: let const var and Scope is a free Frontend Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Frontend Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Why Variables?
Variables store values so you can reuse them, update them, and give them meaningful names. JavaScript has three ways to declare variables: var (old), let (modern, reassignable), and const (modern, constant binding).
const — The Default Choice
Declare with const when you won't reassign the variable. This signals intent and prevents accidental reassignment. Note: const prevents rebinding but doesn't make objects or arrays immutable.
const name = 'Alice'; // can't reassign
const PI = 3.14159;
const user = { age: 25 }; // object is mutable
user.age = 26; // OK — property change, not rebinding
// user = {}; // Error — can't reassign constlet — When You Need to Reassign
Use let when the value will change: loop counters, accumulated sums, state variables. let has block scope — it only exists within the nearest enclosing { }.
let score = 0;
score = score + 10; // OK
for (let i = 0; i < 3; i++) {
console.log(i); // 0, 1, 2
}
// console.log(i); // ReferenceError — i is out of scopevar — The Legacy Declaration
var has function scope (not block scope) and is hoisted to the top of its function. This causes subtle bugs. Avoid var in modern JavaScript; prefer const and let.
function example() {
if (true) {
var x = 5; // function-scoped, not block-scoped
}
console.log(x); // 5 — still accessible here!
}Scope: Where Variables Live
Global scope: declared outside any function or block, accessible everywhere. Function scope: declared inside a function, only accessible inside that function. Block scope: let/const inside { }, only accessible inside that block.
Hoisting
Hoisting moves declarations to the top of their scope at compile time. var declarations are hoisted and initialised to undefined. let and const are hoisted but not initialised — accessing them before the declaration causes a Temporal Dead Zone error.
Naming Variables
Use descriptive names. Use camelCase for variables and functions (userName), UPPER_SNAKE_CASE for constants (MAX_RETRIES), and PascalCase for classes (UserProfile). Avoid single letters except in loops (i, j).
Declaring Multiple Variables
You can declare multiple variables in one statement but it's usually clearer to use one declaration per variable. Avoid the comma form as it can obscure scope and types.
// Less clear:
let a = 1, b = 2, c = 3;
// Preferred:
const MAX = 10;
let count = 0;
const label = 'Score';The Temporal Dead Zone (TDZ)
Accessing a let or const variable before its declaration in the code throws a ReferenceError. This zone between the start of the block and the declaration is called the TDZ.
console.log(value); // ReferenceError: Cannot access 'value' before initialization
const value = 42;const with Arrays and Objects
const prevents reassigning the variable but the referenced value can still be mutated. Use Object.freeze() for a shallow immutable object or immutable patterns for deep immutability.
const items = [1, 2, 3];
items.push(4); // OK — mutates the array
items = []; // Error — can't reassign const
const config = Object.freeze({ maxAge: 30 });
config.maxAge = 99; // Silently fails in non-strict modeWhy Prefer const Over let?
Defaulting to const makes code easier to reason about: you know the variable won't be reassigned somewhere else. Only upgrade to let when you actually need to reassign. This habit reduces bugs and improves readability.
Quick Check
What is the key difference between let and var?
Recap: Variables and Scope
Prefer const for values that won't be reassigned. Use let for mutable values. Avoid var. Block scope (let/const) keeps variables contained. Hoisting: var initialises to undefined, let/const throw a TDZ error if accessed too early.
Frequently asked questions
Is the “Variables: let const var and Scope” lesson free?
Yes — the full text of “Variables: let const var and Scope” is free to read here on the web, and the Frontend Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Frontend Academy course, upgrade to CoddyKit PRO.
What will I learn in “Variables: let const var and Scope”?
Declare variables with let, const, and var. Understand block scope, function scope, and why const is preferred for most values. You practise Frontend Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Frontend Academy?
No prior experience is required. Frontend Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Variables: let const var and Scope” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Frontend Academy lesson?
Yes. Every Frontend Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.