Skip to content

JavaScript Variables

How to declare variables with let, const, and var, and the rules that govern them.

What you'll learn

  • The difference between var, let, and const
  • Variable naming rules and conventions
  • Block scope vs function scope
  • Hoisting and the temporal dead zone
  • When to reassign and when to keep a variable constant

Concept

Three Ways to Declare Variables

Modern JavaScript provides three keywords for declaring variables:

  • let — a variable that can be reassigned. Scoped to the block ({ ... }) where it is declared.
  • const — a variable that cannot be reassigned. Also block-scoped. Use this by default.
  • var — the old way (pre-ES6). Function-scoped, hoisted, and can cause subtle bugs. Avoid in modern code.
let score = 10;
score = 20; // OK — let allows reassignment

const PI = 3.14159;
// PI = 3; // TypeError — const cannot be reassigned

var legacy = "avoid me";

Naming Rules

Variable names (identifiers) must:

  • Start with a letter, $, or _ (not a digit)
  • Contain only letters, digits, $, and _
  • Not be a reserved word (class, return, if, etc.)
  • Be case-sensitive (age and Age are different variables)

Conventions: use camelCase for variables and UPPER_SNAKE_CASE for constants that are truly constant (like MAX_RETRY_COUNT).

Scope

let and const are block-scoped — they only exist inside the { } block where they are declared. var is function-scoped, which means it leaks out of blocks:

if (true) {
  let blockScoped = "only here";
  var functionScoped = "leaks out";
}
console.log(functionScoped); // "leaks out"
// console.log(blockScoped); // ReferenceError

Hoisting and the Temporal Dead Zone

var declarations are hoisted to the top of their scope and initialized as undefined. let and const are also hoisted but live in the temporal dead zone until their declaration is reached — accessing them early throws a ReferenceError. This is a feature: it prevents you from using a variable before it is defined.

Default to const

A good rule of thumb: use const by default, and switch to let only when you need to reassign. This makes your intent clear and helps prevent accidental mutations. Never use var in new code.

Example

              // Good: const by default
const playerName = "Ada";
const maxHealth = 100;

// Use let when you need to reassign
let currentHealth = 100;
currentHealth = currentHealth - 25; // took damage
console.log(`${playerName} has ${currentHealth}/${maxHealth} HP`);

// const objects can still have their properties mutated
const player = { name: "Ada", level: 1 };
player.level = 2; // OK — we are mutating a property, not reassigning
console.log(player);

// Block scope in action
let message = "outside";
if (true) {
  let message = "inside";
  console.log(message); // "inside"
}
console.log(message); // "outside"

const prevents reassignment of the binding, but for objects and arrays the contents can still change. Block scope means a let inside an if-block is a different variable from one with the same name outside.

Try it

  • Case Converter

    Variable naming conventions (camelCase, snake_case) — convert text live.

  • Slugify

    Turning variable-like strings into URL-safe slugs.

Common mistakes

The mistake

Using var instead of let or const

The fix

var is function-scoped and hoisted, which causes subtle bugs. Use const by default and let when you need to reassign. Never use var in modern code.

The mistake

Thinking const makes objects immutable

The fix

const only prevents reassigning the variable itself. You can still mutate object properties and array elements. Use Object.freeze() for true immutability.

Related Resources

Related Cheatsheets

Practice JavaScript Variables

3 exercises

Practice JavaScript Variables

Look up unfamiliar terms

A beginner-friendly glossary explains jargon in plain English — variables, functions, DOM, Promise, and more.

View glossary

Build real projects

Apply what you learned by building guided projects with starter code and solutions.

View projects

Decode error messages

Plain-English explanations of common errors — what they mean, why they happen, and how to fix them.

View errors