5. JavaScript Variables

What you will learn

• What a variable is
• How to declare variables with let and const
• Why you should avoid var in new code
• How to name variables well

What is a variable?

A variable is a named container for a value. You store a value once, then use the name whenever you need it. Change the value in one place, and every use of the name changes with it.

let: a value that can change

<p id="demo"></p>

<script>
  let score = 10;
  score = score + 5;
  document.getElementById("demo").textContent = "Score: " + score;
</script>

The keyword let creates the variable. The = sign assigns a value to it. It does not mean “equal to” as in maths. Later, score = score + 5 reads the old value, adds 5, and stores the result.

const: a value that must not change

Use const for values that should never be reassigned. Trying to change one causes an error.

<p id="demo"></p>

<script>
  const siteName = "BeingXpert";
  const year = 2026;
  document.getElementById("demo").textContent = siteName + " " + year;
</script>

var: the old way

Before 2015, var was the only option. It has confusing behaviour: it ignores block boundaries and can be redeclared by accident. You will see it in older code, but use let and const in your own.

Declaring without a value

You can declare a variable now and give it a value later. Until then, its value is undefined.

<p id="demo"></p>

<script>
  let message;
  const before = String(message);
  message = "Now it has a value";
  document.getElementById("demo").textContent = before + " then: " + message;
</script>

A const must be given its value when it is declared.

Declaring several at once

let width = 20, height = 10;

One variable per line is usually easier to read.

Naming variables

• Use camelCase: totalPrice, firstName.
• Choose names that explain the value: userAge is clearer than x.
• Names are case sensitive and cannot start with a digit.
• Avoid reserved words such as let, class, or return.

A worked example

<p id="demo"></p>

<script>
  const price = 20;
  const quantity = 3;
  const taxRate = 0.1;

  const subtotal = price * quantity;
  const total = subtotal + subtotal * taxRate;

  document.getElementById("demo").textContent =
    "Subtotal: " + subtotal + ", Total: " + total;
</script>

Named values make the calculation easy to read, and you can change the price or tax rate in one place.

Common mistakes

• Trying to reassign a const, which causes an error.
• Declaring the same name twice with let in one scope, which is also an error.
• Using a variable before declaring it.
• Misspelling the name later, so JavaScript looks for a variable that does not exist.
• Vague names such as a, data1, or temp.

<p id="demo"></p>

<script>
  const width = 8;
  const height = 5;
  const area = width * height;
  document.getElementById("demo").textContent = "Area: " + area;
</script>

Summary

• Variables store values under a name.
• Use const by default and let when the value must change.
• Choose clear camelCase names.