Variables

What is a variable?

A variable is a name that points at a value so you can use the value again later. Think of a labelled box: the label is the name, the contents are the value. When your code says loavesLeft, JavaScript looks up the box with that label and uses whatever is inside.

Variables let you write a value once and use it in many places, give a meaningful name to a number that would otherwise be a mystery, and keep track of things that change while the page is open, such as a basket total or how many birds were spotted.

You create a variable with a declaration: a keyword, a name, an equals sign and a starting value. The equals sign means "store this", which is different from equals in maths.

const shopName = 'Rye & Crumb';
let loavesLeft = 24;

When should you use const and when let?

const creates a variable that cannot be pointed at a different value. let creates one that can. Start with const for everything, and switch to let only when you know the value will be replaced, such as a counter, a running total or a flag that flips.

That habit makes code easier to read. When you see const, you know the name means the same thing on every line below. When you see let, you know to look for the places where it changes.

A const must get its value on the same line it is declared. const total; on its own is a SyntaxError. A let can be declared empty and filled later.

const loafPrice = 4.5;     // never changes
let basketTotal = 0;       // grows as items are added
basketTotal = basketTotal + loafPrice;

How do you reassign a let variable?

Write the name, an equals sign and the new value, with no keyword in front. Using let a second time for the same name in the same block is an error, because it tries to create a second box with the same label.

The right-hand side is worked out first, using the current value. In loavesLeft = loavesLeft - 5, JavaScript reads the old value 24, subtracts 5, and then stores 19 in the same box. Run the demo in the Step lens to watch the value change on exactly that line.

Shorter forms exist for common updates: loavesLeft -= 5 and count++. The Operators lesson covers them.

let birdsSeen = 0;
birdsSeen = birdsSeen + 3;
birdsSeen = birdsSeen + 1;
console.log(birdsSeen); // 4

Why can a const object still change?

const locks the name to one value. If that value is an object or an array, the object itself can still be changed: you can add items to a const array or update a property of a const object. What you cannot do is point the name at a different object.

That surprises many people, and it explains why most arrays and objects in modern code use const even though their contents change. The name always refers to the same basket; the loaves inside the basket come and go.

If you need an object whose contents cannot change, Object.freeze() exists, but it is rarely needed in everyday page code.

const basket = ['Rye'];
basket.push('Sourdough');    // fine: same array, new item
// basket = ['Bun'];         // TypeError: Assignment to constant variable.

What are the rules for naming variables?

A name can contain letters, digits, _ and $, and it cannot start with a digit. It cannot contain spaces or hyphens, so loaves-left means "loaves minus left". Names are case sensitive: total and Total are two different variables. Reserved words such as let, const, class and return cannot be used as names.

JavaScript convention is camelCase: start lowercase and capitalise each later word, as in loavesLeft or isMember. Names for true or false values usually start with is, has or can. Constants that are fixed settings for the whole file are sometimes written in capitals, like MAX_LOAVES, though plain camelCase is also common.

Pick names that say what the value means, not what type it is. price beats num, members beats arr. Single letters are fine only for tiny, obvious cases such as a loop counter. When you read AI-generated code, renaming vague variables is often the quickest way to understand it.

const maxLoavesPerOrder = 6;
let isOpen = true;
const memberNames = ['Ada', 'Sam'];

Why must you declare a variable before using it?

The engine knows about every let and const in a block before it runs a single line, but it refuses to let you read them until their declaration line has run. The stretch of code between the start of the block and the declaration is called the temporal dead zone. In plain words: the box exists, but it is sealed until its line runs.

Reading or writing the variable inside that zone throws a ReferenceError that says it cannot access the name before initialization. This is helpful. It catches mistakes where code is in the wrong order instead of silently giving you a wrong value.

Using a name that was never declared anywhere gives a different error: "is not defined". If you see that, look for a typo or a missing declaration.

console.log(club); // ReferenceError: Cannot access 'club' before initialization
const club = 'Heron Watchers';

What does undefined mean for a variable?

A let variable declared without a value holds undefined, which is JavaScript's way of saying "nothing has been put here yet". It is a real value you can log and compare against.

You will meet undefined often: a missing object property, a function that returns nothing, an array position past the end. Seeing undefined on the page usually means some value you expected was never set, and logging the variable just before that line shows where it went missing.

let pickupTime;
console.log(pickupTime); // undefined
pickupTime = '10:30';

Why is var avoided today?

Before 2015 JavaScript had only var. It has two habits that cause bugs. It ignores blocks such as the body of an if or a loop, so a variable made inside one leaks out. And it is hoisted with the value undefined, so using it before its line gives undefined instead of an error, hiding the mistake.

let and const fix both. Every browser has supported them for years, so there is no reason to write var in new code. You will still see it in old tutorials, Stack Overflow answers and some AI output; replacing it with const or let is almost always safe and makes the code easier to follow.

Field notes

• A variable is a name that points at a value you want to use again.
• Start with const, and use let only when the value must change later.
• To reassign a let variable, write the name and the new value with no keyword.
• Names use camelCase and cannot contain spaces or hyphens or start with a digit.

Easy to get wrong

A value that changes needs let. Reassigning a const throws a TypeError and stops the script.

The keyword is only for creating a variable. Declaring the same name twice in one block is a SyntaxError.

A hyphen is the minus operator, so it cannot appear in a name. Use camelCase instead.

Questions people ask

Should I always use const?

Use const by default and let when the value will be reassigned. That covers nearly every case.

Can a variable change type?

Yes. A let holding a number can later hold a string. It is legal but confusing, so keep each variable to one kind of value.

Where can I use a variable after I create it?

Inside the block where it was declared and any blocks nested inside it. The Scope lesson explains the rules in full.

Is there a limit on name length?

No practical limit. Clear names of two or three words are normal and cost nothing at runtime.