Data types and variables

📖 Theory

The site needs to remember things

FestConnect has to track numbers that change (seats left drops as people register), numbers that never change (the entry fee), and text (the student's name). To hold these, JavaScript uses variables: named boxes you put values in and read back later.

Two questions decide how you write one: does this value ever change (pick let or const), and what kind of value is it (its type)?

📖 Theory

Labelled boxes, some sealed

Think of labelled boxes in a store room. A let box you can empty and refill (seats left: 30, then 29, then 28). A const box is sealed after you fill it once (the fee is 200, forever this run). Both have a label (the name) you use to find them. And what is inside, a number, some text, a yes/no, has a type that decides what you can do with it.

📖 Theory

Declaring, and the types

• `let`: a variable you can reassign. let seatsLeft = 30;
• `const`: a value fixed for this run; must be set when declared. const FEE = 200;
• `var`: the old form; avoid it in new code (looser scoping).

The value has a type:

• number (200, 3.5, no separate int/float), string ("Aditi"), boolean (true/false), undefined (declared, no value yet), null (deliberately empty), and object (arrays and objects). typeof x tells you which.

⌨️ Practical

FestConnect state

let seatsLeft = 30;      // number, will change
const FEE = 200;         // number, fixed this run
let studentName = "Aditi";  // string
let isPaid = false;      // boolean
let coupon;              // undefined (declared, no value)

seatsLeft = seatsLeft - 1;   // ok: let can be reassigned  -> 29
// FEE = 250;                // ERROR: const cannot be reassigned

console.log(typeof seatsLeft);  // "number"
console.log(typeof studentName);// "string"
console.log(typeof isPaid);     // "boolean"
console.log(typeof coupon);     // "undefined"

This example runs in Gri-Learn on the web, where you can edit it and see the output.

💭 Think first

let or const?

For each FestConnect value, pick let or const: (a) the fest date '12 March', (b) the running count of registered students, (c) the maximum seats 500. Decide before tapping.

🧩 Quiz

In the console, `typeof null` returns what, surprisingly?

1. "object" (a long-standing quirk in JavaScript)
2. "null"
3. "undefined"
4. "boolean"

⚠️ Watch out

Variable traps

1. const does not mean frozen contents: you cannot reassign a const, but if it holds an object you can still change the object's properties. const locks the box, not what is inside a container.

2. undefined vs null: undefined = never given a value; null = you set it empty on purpose. They are not the same.

3. Reusing var out of habit: prefer let/const; var leaks out of blocks and causes confusing bugs.

📖 Theory

Types decide what operators do

Type matters more than it looks. In the next lesson, "3" + 2 gives "32" (string glue) but 3 + 2 gives 5 (addition), purely because of type. Knowing that seatsLeft is a number and studentName is a string is what lets you predict what the operators in the next lesson will do.

✅ Summary

Key takeaways

• Variables are named boxes: let (reassignable), const (fixed this run, must be initialised), var (old, avoid).
• Prefer const by default; use let only when the value will change.
• Types: number, string, boolean, undefined, null, object; JavaScript picks the type from the value (dynamic typing).
• typeof x reports the type as a string; typeof null is "object" (a famous quirk).
• undefined = no value yet; null = deliberately empty; const locks the box, not an object's contents.
• Memory hook: labelled boxes, some sealed (const).