Variables & Types

By the end of this lesson you will be able to:

1. Store a value in a variable using let and const.
2. Choose the right one, and explain why you chose it.
3. Name the five everyday types: string, number, boolean, null, undefined.
4. Check any value's type in the console with typeof.

Last lesson you printed a menu with console.log(). Here is Priya's version. The price of teh tarik appears three times.

console.log('Teh tarik    RM', 2.5);
console.log('Two teh tarik RM', 2.5 + 2.5);
console.log('Three for    RM', 2.5 + 2.5 + 2.5);

Predict together

• The stall raises the price to RM 3.00. How many edits must Priya make?
• What could go wrong if she changes two of them and forgets the third?

Think of the labelled tins in a kitchen. One says sugar, another rice. You reach for the label, not the contents — and you can refill a tin without changing its label. A variable works exactly like that.

Making a variable

let drink = 'teh tarik';
const price = 2.5;

console.log(drink, 'costs RM', price);

teh tarik costs RM 2.5

Read it as three parts: the keyword, the name, the value.

let or const?

Starting with const is a habit worth building. If a value never changes, saying so protects you from changing it by accident.

let score = 0;
score = 10;        // fine — let allows this

const shop = 'Warung Aisyah';
shop = 'Kopitiam'; // TypeError: Assignment to constant variable.

The five everyday types

Every value in JavaScript has a type — what kind of thing it is. These five cover almost everything you meet at first.

const name = 'Aisyah';   // string  — text
const age = 14;          // number  — any figure, whole or decimal
const isOpen = true;     // boolean — true or false only
let topping = null;      // null      — deliberately nothing
let chosen;              // undefined — no value given yet

Ask JavaScript what something is with typeof:

console.log(typeof name, typeof age, typeof isOpen);

string number boolean

null and undefined both mean “no value”, but they differ in who decided. You write null on purpose. JavaScript hands you undefined when nothing was set.

Naming rules

• Use camelCase: drinkPrice, not drink_price.
• Start with a letter. No spaces, no dashes.
• Say what it holds: totalCost beats x every time.

Why it matters

Every React component you write in Section D stores its data in variables. Choosing good names now is the difference between code you can read next month and code you cannot.

Let us fix the Warm-Up properly. Work in app.js from last lesson, or start a fresh file.

Step 1 — Name the price once

// menu.js — one price, one place to change it
const tehTarikPrice = 2.5;

console.log('Teh tarik     RM', tehTarikPrice);
console.log('Two teh tarik RM', tehTarikPrice * 2);
console.log('Three for     RM', tehTarikPrice * 3);

Teh tarik     RM 2.5
Two teh tarik RM 5
Three for     RM 7.5

Now the price lives in one line. Change 2.5 to 3 and all three lines update together. Try it.

Step 2 — Add the stall details

Three more constants, three different types:

const stallName = 'Warung Aisyah';   // string
const tablesFree = 4;                // number
const isOpen = true;                 // boolean

console.log(stallName, '· tables free:', tablesFree, '· open:', isOpen);

Warung Aisyah · tables free: 4 · open: true

Step 3 — Something that really does change

Tables fill up during lunch, so tablesFree should be a let. Change its keyword, then take one table:

let tablesFree = 4;

tablesFree = tablesFree - 1;   // a family of four sits down
console.log('Tables free now:', tablesFree);

Tables free now: 3

Read the middle line right to left: work out tablesFree - 1 first, then put the answer back into tablesFree. The = sign means “put into”, not “equals”.

Step 4 — Watch const push back

Now try the same thing on a constant:

const stallName = 'Warung Aisyah';
stallName = 'Warung Priya';

Uncaught TypeError: Assignment to constant variable.

What changed? Nothing broke by accident — JavaScript stopped you. That error is const doing its job. The stall name really should not change halfway through the script.

Work in a file called stall.js. Refresh and check the console after each task.

1. Task 1 — Your own stall

   Create four variables describing a stall you invent: its name (string), the number of items on the menu (number), whether it is open (boolean), and today's special (start it as null).

   Print all four on one console.log() line.

2. Task 2 — const or let?

   Go back through Task 1 and decide for each variable whether it should be const or let. Write a short comment after each line saying why:

   const stallName = 'Kopitiam Wei Jie'; // never changes

   Then give the special a real value and print it again.

3. Task 3 — Type detective

   Use typeof on all four of your variables and print the results. Then predict, before running it, what typeof null gives you. Run it and see if you were right.

   The answer surprises most people. It is a famous quirk of JavaScript that has been left in for compatibility.

Faiz is totalling a lunch order. He expects RM 11 but the console shows something odd. Find two problems.

// faiz-lunch.js — buggy
const nasiLemak = 5.5;
const tehTarik = '2.5';
const kuih = 3;

const total = nasiLemak + tehTarik + kuih;
console.log('Total: RM', total);

total = total + 1;   // add a service charge

It works if: the console prints Total: RM 12 with the service charge included, and no red errors appear.

Total: RM 5.52.53

// faiz-lunch.js — fixed
const nasiLemak = 5.5;
const tehTarik = 2.5;   // a number, not a string
const kuih = 3;

let total = nasiLemak + tehTarik + kuih;   // let: it changes below
console.log('Total: RM', total);

total = total + 1;
console.log('With service charge: RM', total);

Total: RM 11
With service charge: RM 12

• A variable is a named box holding a value.
• const cannot be reassigned; let can. Start with const.
• The five everyday types: string, number, boolean, null, undefined.
• typeof tells you what a value is.
• Quote marks make a number into a string — a classic source of wrong totals.
• Name variables in camelCase, and say what they hold.

New words

• Variable — a name that points at a value.
• Type — what kind of value something is.
• Reassign — put a different value into an existing variable.
• camelCase — naming style where each new word starts with a capital.