Variables: var, let, const

Syntax

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

Examples

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

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

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

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

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

At a glance

Purpose

Application logic and interaction

File extension

.js · .mjs

Runs in

Browsers and JavaScript runtimes

Usually used with

HTML, CSS and Web APIs

In plain English

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

What you’ll learn

• Choose const or let.
• Recognise block scope.
• Separate reassignment from object mutation.

Before you start: Data Types

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

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.

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

Related JavaScript documentation