Variables: var, let, const — JavaScript Reference, Syntax & Examples

Syntax

let name = value;
const name = value;
var name = value;

Breaking down the syntax

const: Declares a block-scoped binding that must be initialised and cannot be reassigned.
let: Declares a block-scoped binding that may be reassigned.
=: Assigns the right-hand value; it is not an equality comparison.

How it works

A variable gives a value a name. const keeps that name bound to the same value; let allows a later assignment.

Declare

Choose a name within a scope.

Initialise

Associate the name with a value.

Use

Read the binding, or reassign it if it was declared with let.

Examples

Name a value

Use a readable name for a value.

const language = "JavaScript";
console.log(language);

const declares the binding.
The string is the initial value.
console.log prints the current value.

Track a changing score

Reassign a value when application state changes.

let score = 0;
score += 10;
console.log(score);

let allows assignment after declaration.
+= adds ten and stores the result.
The output is 10.

Update a profile object

Keep the object binding while changing one property.

const profile = { name: "Ada", completed: 0 };
profile.completed += 1;
console.log(profile);

profile remains bound to the same object.
The completed property is mutable.
const is not a promise of deep immutability.

let vs const

Choosing between let and const based on whether reassignment is needed.

let score = 0;
score = score + 10; // reassignment is fine

const maxPlayers = 4;
// maxPlayers = 5; // TypeError: Assignment to constant variable

// const objects/arrays can still be mutated internally
const user = { name: "Alice" };
user.name = "Bob"; // allowed - the reference itself did not change

Block Scope vs Function Scope

The key difference between var and let/const.

if (true) {
  var x = 1;
  let y = 2;
}
console.log(x); // 1 - var leaked out of the block
console.log(y); // ReferenceError: y is not defined

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0);
}
// Prints 0, 1, 2 - each loop iteration gets its own 'i' with let

Best practices

Default to const, and only use let when you know the variable needs to be reassigned
Avoid var in modern code - its function scoping and hoisting behavior are common sources of bugs
Declare variables as close as possible to where they are first used
Remember that const prevents reassignment, not mutation - objects and arrays declared with const can still have their contents changed

Runtime & versions

Browsers and JavaScript runtimes. Feature availability depends on the language and runtime version used by your project; consult the official reference below.

ECMAScript specification

When should I use this?

Use const by default for bindings you will not reassign. Use let when the binding needs to change; recognise var when maintaining older code.

Common mistakes

Reassigning a constant

A const binding cannot be assigned a second value.

Incorrect

const score = 0;
score = 1;

Corrected

let score = 0;
score = 1;

Compare approaches

const: Block scope, no reassignment.
let: Block scope, reassignment allowed.
var: Function or global scope; different hoisting and redeclaration behaviour.

Accessibility

When a state change affects an interface, communicate the result in visible text and provide an appropriate accessible update. A variable alone does not update the DOM.

Explore deeper

const does not freeze objects

const prevents rebinding a name. It does not prevent changing an object property or appending to an array. Object.freeze is shallow and serves a different purpose.

Temporal dead zone

A let or const binding cannot be read before its declaration has been evaluated in that scope. Attempting it throws a ReferenceError.

Specifications & further reading

ECMAScript: declarations and statements