JavaScript Variables

A variable is a named box that holds a value. You put a number, a piece of text, or a true/false answer into the box, give the box a name, and use that name whenever you need the value again. Without variables, every program would have to repeat every number by hand — and changing one price would mean hunting through the whole program.

Diagram — see how it fits together

JavaScript has three ways to create a variable: var, let, and const. They look similar, but they behave differently. Modern code uses let and const almost always; var is the old way, kept around so old programs still work.

let — a box you can change

let creates a variable whose value can change later. The number of cups in an order, the marks a student scores, the name typed into a form — all of these change, so they belong in let boxes.

let cups = 2;
cups = 5; // the order grew — the same box now holds 5

const — a box you cannot change

const creates a variable whose value can never change after it is set. The price of a cup of chai, the pass marks for an exam, the name of your academy — fixed facts belong in const boxes. If you try to change a const later, JavaScript stops with an error. That is a feature, not a bug: it catches mistakes where you accidentally overwrite a value that should stay fixed.

const price = 10;
const passMarks = 33;
// price = 15;  // error! A const cannot be changed.

var — the old way

var was the only way to create variables before 2015. It still works, but it has a loose rule — a var declared inside a block can leak out of it — that causes confusing bugs. New code should use let and const. When you read old tutorials and see var, know that it means the same thing as let in most simple cases.

Naming rules — what a variable can be called

A variable name must start with a letter, an underscore _, or a dollar sign $. After that it can contain letters, digits, underscores, and dollar signs. It cannot contain spaces, and it cannot be a reserved word like let or function. The convention is camelCase: the first word lowercase, each following word starting with a capital letter — totalBill, studentName, chaiPrice. Good names describe the value: price is good, x tells nobody anything.

Common mistakes

• Using a variable before creating it — alert(total); let total = 40; is an error with let and const.
• Trying to change a const — that is the whole point of const, and JavaScript will stop you.
• Using the same name twice with let in the same place — let price = 10; let price = 15; is an error. Assign again instead: price = 15;.
• Naming a variable with a space or a number first — let chai price = 10; and let 2cups = 5; are both errors.

Remember

• let — a variable you can change later.
• const — a variable you can never change. Start here by default.
• var — the old way. It works, but prefer let and const.
• Names use camelCase: totalBill, studentName. No spaces, no numbers first.

Example explained

• const price = 10; — the price of one cup never changes during the order, so it goes in a const box.
• let cups = 3; — the number of cups can change (the customer might add more), so it goes in a let box.
• let total = cups * price; — a third variable, calculated from the first two. Change cups or price, and the total changes with them.
• document.getElementById("cups").value — reads the number the visitor typed into the input box. The input's value is always text, so Number(...) turns it into a real number.
• "Total: ₹" + total — the + joins the text with the number, producing one message for the page.