Variables and Declaration

Every program needs to remember things. The current user’s name. The price of a tour. Whether a booking is available. JavaScript stores these values in variables.

What a variable is

A variable is a named container that holds a value. Think of it like a labeled box: you put something in the box, and from then on you can refer to its contents by name rather than by the value itself.

const tourName = 'Cascade Ridge Hike';

Now whenever you write tourName in your code, JavaScript knows you mean 'Cascade Ridge Hike'.

let

let declares a variable that can be reassigned. The value inside can change.

let tourAvailable = true;
console.log(tourAvailable);  // true

tourAvailable = false;
console.log(tourAvailable);  // false

Use let when the value will change over the lifetime of the program — a running total, a status that toggles, a counter.

const

const declares a variable that cannot be reassigned. Once set, the binding is fixed.

const tourPrice = 149;
tourPrice = 99;  // TypeError: Assignment to constant variable.

Use const by default. Only switch to let when you know the value needs to change. This is the const-first rule — it communicates intent and prevents accidental reassignment.

Most variables in a real program end up being const. The fact that something can change does not mean it should change, and const makes that visible.

var

You may encounter var in older code and tutorials:

var siteName = 'Summit Trail Outfitters';  // older style

var is function-scoped rather than block-scoped, which causes confusing behavior that has tripped up JavaScript developers for decades. This course does not use var. When you see it in the wild, you are reading legacy code.

Naming conventions

Variable names in JavaScript follow a few rules and one strong convention:

Rules (the engine enforces these):

• Must start with a letter, $, or _
• Cannot contain spaces
• Cannot be a reserved word (let, const, function, etc.)

Convention (the community follows this):

• Use camelCase: start lowercase, capitalize each subsequent word
• tourName not tour_name or TourName
• Names should be descriptive: tourPrice is better than p

const tourName = 'Cascade Ridge Hike';   // ✓ camelCase, descriptive
const tourPrice = 149;                    // ✓ camelCase, descriptive
let tourAvailable = true;                 // ✓ let because it can toggle

Declaration, assignment, and initialization

These three terms are worth knowing precisely:

Declaration — telling JavaScript the variable exists:

let tourAvailable;

Assignment — giving it a value:

tourAvailable = true;

Initialization — declaration and first assignment in one line:

let tourAvailable = true;

In practice, almost always initialize on the same line as the declaration. Separating them is only necessary when you cannot know the value yet.

Exercise

Create the three core STO variables that will carry through the rest of this module. Add these to main.js:

const tourName = 'Cascade Ridge Hike';
const tourPrice = 149;
let tourAvailable = true;

console.log(tourName);
console.log(tourPrice);
console.log(tourAvailable);

Open the STO site in Chrome, open the Console, and confirm all three values log correctly. Then try reassigning tourName and observe the error.

Recap

• A variable is a named container for a value — reference it by name rather than repeating the value.
• const declares a binding that cannot be reassigned. Use it by default.
• let declares a binding that can be reassigned. Use it when the value will change.
• var is legacy — avoid it in new code.
• Name variables in camelCase and make them descriptive.
• Initialization combines declaration and first assignment on one line.