Variables: let, const and var

Why variables?

Programs need to remember things: a price, a user name, a running total. A variable is a name that refers to a value, so you can use the value later and give it a meaning. total is much clearer than writing 1499 + 250 + 99 again and again.

Declaring and assigning

Declaring means creating the name. Assigning means giving it a value with the = sign. You can do both in one line. = in JavaScript does not mean "is equal to"; it means "put the value on the right into the name on the left".

let cartItems = 0;      // declare and assign
cartItems = cartItems + 1;  // assign a new value
cartItems += 2;             // short form of cartItems = cartItems + 2
console.log(cartItems);     // 3

const GST_RATE = 18;        // never changes
console.log(GST_RATE);      // 18

const: the binding cannot change

const means the NAME is locked to one value; you cannot assign to it again. A binding is the link between a name and a value. If the value is an object or array, its contents can still change. const locks the link, not the object.

const prices = [100, 200];
prices.push(300);       // allowed: the same array, changed inside
console.log(prices);    // [100, 200, 300]

prices = [1, 2];        // TypeError: Assignment to constant variable.

let: when the value must change

Use let for counters, running totals, and values you update in a loop. Both let and const are block-scoped: a block is the code between { and }, and a let or const made inside a block does not exist outside it.

if (true) {
  let message = 'inside';
  console.log(message); // inside
}
console.log(message);   // ReferenceError: message is not defined

Why not var?

var was the only way before 2015. It has three problems. It ignores blocks (it is function-scoped), so a var inside an if leaks out. It can be declared twice without any error. And it is hoisted, which means you can use it before the line that declares it and silently get undefined. You will see old code with var, so you must be able to read it, but do not write it.

if (true) {
  var leaked = 'oops';
}
console.log(leaked);   // 'oops' (var ignores the block)

var count = 1;
var count = 2;         // no error with var
console.log(count);    // 2

Naming rules and style

• Names may use letters, digits, _ and $, but cannot start with a digit (2total is invalid).
• Names are case-sensitive: total and Total are different.
• Reserved words like let, class or return cannot be names.
• Use camelCase for normal variables (orderTotal, isPaid) and UPPER_SNAKE_CASE for fixed settings (MAX_RETRIES).
• Booleans read well with is/has/can: isLoggedIn, hasCoupon.