JavaScript Variables: let, const and var Explained

A variable is a named container for a value. You create one with a keyword, a name and (usually) a value.

let and const#

let score = 10;
const playerName = "Asha";

console.log(playerName, score);

score = 15;            // let variables can be reassigned
console.log(playerName, score);

Asha 10
Asha 15

Reassigning a const is an error:

const pi = 3.14159;
try {
  pi = 3;
} catch (error) {
  console.log(error.name + ": " + error.message);
}

TypeError: Assignment to constant variable.

(try and catch let the program continue after an error so we can print it; they are covered in Error Handling.)

Default to const. Use let only when you know the value must change. This makes code easier to follow: when you see const, you know the name always refers to the same value.

Declaring without a value#

A let variable declared without a value holds undefined until you assign one. A const must be given its value immediately:

let city;
console.log(city);
city = "Pune";
console.log(city);

undefined
Pune

const does not freeze objects#

const stops the variable from being reassigned, but if it holds an object or array, the object itself can still be changed:

const cart = ["pen"];
cart.push("notebook");     // allowed: changing the array's contents
console.log(cart);

const user = { name: "Ravi" };
user.name = "Ravi Kumar";  // allowed: changing a property
console.log(user);

[ 'pen', 'notebook' ]
{ name: 'Ravi Kumar' }

What is not allowed is cart = ["something else"], which would point the variable at a different array.

Why not var?#

var is the original way to declare variables, and you will see it in older code and tutorials. It has two behaviours that cause bugs:

1. Function scope: a var inside an if or loop block is visible outside the block.
2. Hoisting to undefined: you can use a var before its declaration line and silently get undefined instead of an error.

if (true) {
  var leaked = "visible outside the block";
  let contained = "only inside the block";
}
console.log(leaked);
console.log(typeof contained);

visible outside the block
undefined

let and const are block-scoped: they exist only inside the { } where they are declared. Use them, not var. Scope is covered fully in Scope and Hoisting.

Naming variables#

• Use camelCase: totalPrice, isLoggedIn.
• Make names descriptive: daysUntilExam rather than d.
• Name booleans as yes/no questions: isActive, hasPaid.
• Names cannot start with a digit or be reserved words like class or new.

Several at once#

let x = 1, y = 2, z = 3;
console.log(x + y + z);

6

Most style guides prefer one declaration per line, which is easier to read and change.

Practice#

const product = "Notebook";
const price = 250;
let quantity = 2;

console.log(product, "total:", price * quantity);

quantity = 5;
console.log(product, "total:", price * quantity);

Notebook total: 500
Notebook total: 1250

Key takeaway#