Variables: let, const and var

Variables: let, const and var

A variable name gives access to a value. let permits reassignment; const prevents rebinding that name. Prefer const when reassignment is unnecessary and let when a mark must be corrected.

Before this topic, review Browser and Node Environments if its terms are unfamiliar.

What you’ll learn

  • Explain variables: let, const and var through the school example.
  • Trace the shown operations and distinguish their result from displayed output.
  • Make the practice change and explain its consequence: The correction adds 2 to the new starting mark of 60.

Work through the school example

This is JavaScript using language features and the host console. Read the initial values, then follow each operation to its displayed result. A declaration names a value, a function call performs an operation, and console.log displays its arguments.

JavaScript · school.js · complete example

let marks = 70;
marks += 2;
console.log(marks);

Expected output

72
Run in JavaScript compiler →

Introduction to JavaScript Variables

Variables are the building blocks of any programming language. In JavaScript, they act as containers for storing data values — from simple numbers to complex objects. Knowing how to declare, manage, and scope variables is crucial for writing clean and functional code.

Declaring Variables in JavaScript

JavaScript provides three main keywords to declare variables:

  • var – the old-school way
  • let – the modern and preferred approach
  • const – for bindings that must not be reassigned

Using var

var name = "Alice";
console.log(name);
Alice

var has function scope and allows redeclaration. However, it can lead to confusion due to hoisting, which we’ll cover shortly.

Using let

let age = 25;
console.log(age);
25

let supports block-level scoping and prevents redeclaration within the same scope. It is the most commonly used declaration in modern JavaScript.

Using const

const PI = 3.14159;
console.log(PI);
3.14159

const also follows block scoping but, unlike let, it must be initialized during declaration and cannot be reassigned later.

Variable Naming Rules

  • Variable names are case-sensitive.
  • They can include letters, digits, underscores, and dollar signs.
  • They must begin with a letter, underscore, or dollar sign.
  • Keywords like if, function, return cannot be used as variable names.

Scope of Variables

Scope determines the accessibility of variables:

  • Global Scope: Accessible anywhere in the script.
  • Function Scope: Declared with var inside a function – only accessible within that function.
  • Block Scope: Declared with let or const – accessible only within that block { }.

Example of Scope

function testVar() {
  if (true) {
    var a = "I'm using var";
    let b = "I'm using let";
  }
  console.log(a); // Works
  console.log(b); // Error: b is not defined
}
testVar();
I'm using var
ReferenceError: b is not defined

Hoisting in JavaScript

Variables declared with var are hoisted to the top of their scope and initialized with undefined. But variables declared with let and const are hoisted too, yet not initialized — leading to a temporal dead zone.

Variables declared with var

console.log(a);
var a = 10;
undefined

Variables declared with let

console.log(b);
let b = 20;
ReferenceError: Cannot access 'b' before initialization

Re-declaration & Re-assignment

var allows both redeclaration and reassignment:

var x = 5;
var x = 10; // Redeclaration allowed
x = 20;     // Reassignment allowed

let allows reassignment but not redeclaration within the same scope:

let y = 30;
let y = 40; //Error: Identifier 'y' has already been declared
y = 50;
Error: Identifier 'y' has already been declared

const allows neither:

const z = 60;
const z = 70; // Error: Identifier 'z' has already been declared
z = 80;       // Error: Assignment to constant variable
// Error: Identifier 'z' has already been declared

Constants with Objects and Arrays

With const, while reassignment isn’t allowed, you can still mutate the internal values of objects or arrays.

const person = { name: "John" };
person.name = "Jane"; // Allowed
console.log(person.name);
Jane
const nums = [1, 2, 3];
nums.push(4);
console.log(nums);
[1, 2, 3, 4]

Best Practices

  • Always prefer let or const over var.
  • Use const by default — switch to let only if you need reassignment.
  • Choose meaningful variable names that describe the data they hold.
  • Keep variables scoped tightly to where they are needed — this helps in avoiding bugs and improves readability.

Common Mistakes to Avoid

  • Using var and expecting block scoping — it doesn’t behave like let or const.
  • Not initializing const during declaration.
  • Confusing reassignment with mutation in const objects.

Summary

JavaScript variables are flexible, but choosing the right keyword — let or const — and understanding their behavior ensures robust code. While var still works, modern JavaScript avoids it due to scoping quirks. Mastering variables is one of the first steps toward writing clean, predictable, and powerful JavaScript code.

Recognize the important boundary

const does not freeze an object's fields. var has function rather than block scope; the scope and hoisting lessons explain its older behavior.

Try a small variation

JavaScript · original source for practice

let marks = 70;
marks += 2;
console.log(marks);

Your task: Replace 70 with 60. Predict the result before running the edited program.

The source is repeated here. If the edit targets the HTML rather than the script, use the markup repeated below; the worked answer also repeats the changed markup.

Worked answer and reasoning

The correction adds 2 to the new starting mark of 60.

JavaScript · complete worked variation

let marks = 60;
marks += 2;
console.log(marks);

Expected output

62
Run in JavaScript compiler →

Predict the original program

JavaScript · original program for this question

let marks = 70;
marks += 2;
console.log(marks);
What does the original JavaScript program display, in order?
Choose one answer. You can try again.

Answer and explanation

72

A variable name gives access to a value. let permits reassignment; const prevents rebinding that name. Prefer const when reassignment is unnecessary and let when a mark must be corrected. const does not freeze an object's fields. var has function rather than block scope; the scope and hoisting lessons explain its older behavior.

Check the important distinction

Can a const student object have its marks property updated?
Choose one answer. You can try again.

Answer and explanation

Yes. const prevents rebinding the name, not changing ordinary properties.

The binding keeps referring to its object while the field changes.

Keep the useful idea

A variable name gives access to a value. let permits reassignment; const prevents rebinding that name. Prefer const when reassignment is unnecessary and let when a mark must be corrected.

Check your variation against this explanation: The correction adds 2 to the new starting mark of 60.

Use the JavaScript array reference library for individual array operations and boundary tests to check a rule independently.

Reaching the recap and completing the quizzes are separate milestones.

    Next lesson: Values and Data Types →