Variables: let, const & var

Variables name the values your program keeps

A variable is a name for a value. When you write let score = 0;, JavaScript creates the name score and stores the number 0 in it. Later, your program can read score instead of remembering where the number came from.

You already met a tiny version in Why JavaScript?: a Like button kept a likes count, used = to store new values, and printed messages with console.log. This lesson slows down that idea until each rule is predictable.

There are three declaration keywords in this lesson: let, const, and var. The first two are modern and should feel natural by the end. The third is older; you must read it when you meet older code, but you should almost never write it.

Declaring a variable has two parts: choose the keyword, then choose the name. Initializing it adds the first value.

• const appName = "CompleteFrontend"; creates a name that should keep pointing at the same value.
• let score = 0; creates a name that may be reassigned later.

Reassignment means giving an existing variable name a new value. Read an assignment from right to left: work out the expression on the right, then store the result in the name on the left.

1let score = 0;Run2score = 10;3score = score + 5;4console.log(score);

In the let version, score starts at 0, becomes 10, then becomes 15. In the const version, line 1 is fine and line 2 throws a real TypeError: the name is already fixed to its first value.

The most common const surprise appears with arrays and objects. const protects the variable name from pointing at a different value. It does not freeze every piece inside the value.

In the next replay, line 2 can either mutate the array with push or try to reassign cart to a brand-new array. Predict which one const allows.

1const cart = ["pen"];Run2cart.push("book");3console.log(cart);4const other = cart;5other.push("ink");6console.log(cart);

Notice the bonus twist: const other = cart; does not copy the array. It makes a second label for the same array. When other.push("ink") runs, cart shows the ink too.

JavaScript variable names are formally called identifiers. A legal identifier can contain letters, digits after the first character, $, and _. Many Unicode letters are allowed too, so café is legal JavaScript.

1const userName = "Ada";2const firstName2 = "Grace";3const $price = 20;4const _count = 3;5const café = "coffee";6console.log(userName, firstName2, $price, _count, café);

Legal does not always mean good style. $price is legal, but many teams reserve $ for framework conventions. Stage 1 introduced camelCase, so prefer names like firstName, uploadCount, and totalAmount.

var is part of JavaScript, and older code uses it everywhere. The problem is not that var cannot store values. It can. The problem is that its rules do not match the braces you see on the page.

Here are the specific traps, each with the real outcome shown.

1if (true) {2  var mood = "visible outside";3}4console.log(mood);

1if (true) {2  let mood = "hidden outside";3}4console.log(mood);

1console.log(score);2var score = 5;

1console.log(score);2let score = 5;

1var count = 1;2var count = 2;3console.log(count);

1let count = 1;2let count = 2;3console.log(count);

• var inside an if block leaks outside that block; the matching let example throws a ReferenceError after the block.
• Reading var score before its assignment prints undefined; reading let score before its declaration throws because it is not initialized yet.
• var allows redeclaration in one scope; let and const catch that duplicate as a SyntaxError.

1var oldGlobal = "window property";2let modernGlobal = "not a window property";3console.log(window.oldGlobal);4console.log(window.modernGlobal);

In a classic browser script, top-level var also creates a property on window. Top-level let and const do not. Modern modules have different top-level rules, but the everyday guidance is unchanged: do not write new var.

Scope, hoisting, and the temporal dead zone all get deeper lessons in Stage 4. If loops with callbacks already sound mysterious, the published Closures lesson shows why old var loops caused famous bugs.

Where you will use variables

Variables are not just a syntax exercise. They let you name the moving pieces in an application: counters, settings, messages, selected items, and temporary results that make longer code readable.

1const appName = "PhotoBox";2let uploadCount = 0;3 4uploadCount = uploadCount + 1;5 6const settings = { theme: "dark" };7settings.theme = "light";8 9console.log(appName, uploadCount, settings.theme);

appName is a stable label, so it is const. uploadCount changes as work happens, so it is let. settings stays pointed at one object, so it can be const even though a property changes.

Common misconceptions

Try each task before opening the hints. The answer check is forgiving about case and extra spaces, but the JavaScript rules are not.

let coins = 1;
coins = coins + 4;
const wallet = ["card"];
wallet.push("receipt");
console.log(coins);
console.log(wallet.length);

const total = 0;
total = total + 5;
console.log(total);

let total = 0;
total = total + 5;
console.log(total);

const appName = "PhotoBox";
let uploadCount = 0;
uploadCount = uploadCount + 1;
const settings = { theme: "dark" };
settings.theme = "light";
console.log(appName, uploadCount, settings.theme);

const fastCar = true;
const totalAmount = 42;
const lessonClass = "variables";
console.log(fastCar, totalAmount, lessonClass);

if (true) {
  var status = "draft";
}
console.log(status);

let status = "published";
if (true) {
  let status = "draft";
  console.log(status);
}
console.log(status);

Your first try counts, but every answer explains the rule. For code questions, trace each line before choosing.

Key takeaways

• A variable is a name that stores or refers to a value.
• const prevents reassignment of the name. It does not freeze object or array contents.
• let is for names you intentionally assign again, such as counters and running totals.
• Legal names can use letters, later digits, $, _, and many Unicode letters, but not spaces, hyphens, starting digits, or reserved words.
• Avoid var in new code because its scope, hoisting, redeclaration, and global behavior are surprising.

Up next: Data types, where you will meet the kinds of values your variables can hold.