Skip to content
WANCODE
BM

Variables and Data Types

14 minBeginnerHTML · CSS · JS

In this lesson

  • Create variables with let and const, and choose the right one
  • Recognise strings, numbers, booleans, null and undefined
  • Use typeof to check a value's type

The big idea

A variable is a labelled box that holds a value so you can use it again later. The label is the name; the contents are the value.

Imagine writing a kopitiam's price list where "Kuching" appears fifty times — and then the shop moves. Variables let you write the value once, give it a name, and use the name everywhere.

Each variable is a box with a name on the label and a value inside.
JavaScript
const city = "Kuching";   // a box called city holding "Kuching"
let cupsSold = 0;         // a box called cupsSold holding 0

cupsSold = 5;             // put a new value in the same box (no let!)
console.log(city, cupsSold); // Kuching 5

let or const?

  • const — the box is sealed. You can't put a new value in later. Use it by default: most values never need to change.
  • let — the box can be refilled. Use it when the value will change, like a score or a counter.
  • var — the old way from before 2015. It has confusing rules about where it can be seen, so modern code avoids it. You'll still spot it in older tutorials.

Refilling a const

Giving a const a new value stops your script with TypeError: Assignment to constant variable. That error is a friend: it tells you either the value shouldn't change, or the box should have been a let.

Naming rules: names can use letters, digits, _ and $, but can't start with a digit or contain spaces. They're case-sensitive (city and City are different boxes). JavaScript developers write multi-word names in camelCase: cupsSold, isOpen, shopName.

Five basic data types

string
Text, inside quotes: "Teh tarik", 'Ipoh'. Even "42" is text, not a number.
number
Any number, whole or decimal, no quotes: 12, 4.5, -3.
boolean
Only two values: true or false. Perfect for yes/no facts like isOpen.
undefined
"No value yet." A variable declared without a value holds undefined.
null
"Deliberately empty." You set null yourself to say "nothing here, on purpose".

typeof tells you what kind of value a box holds. It gives back the type's name as a string:

JavaScript
console.log(typeof "Kuching"); // "string"
console.log(typeof 31);        // "number"
console.log(typeof "31");      // "string"  ← quotes make it text!
console.log(typeof true);      // "boolean"
let order;
console.log(typeof order);     // "undefined"
console.log(typeof null);      // "object"  ← a famous old quirk

typeof null gives "object". That's a bug from JavaScript's first version in 1995 that can't be fixed without breaking old websites. null is still its own type — just remember the quirk.

In the afternoon the temperature rises. Remove the // in front of temperature = 33; to switch that line on, then read the red error that appears in the Console. The value needs to change, but its box was sealed. Fix the declaration (not the afternoon line) so the script reaches the end and prints Temperature now: 33°C. The city never changes, so leave it as const.

Checks

  • No "Assignment to constant variable" error
  • temperature ends up as 33
  • city is still a const

Check understanding

Q1

A game keeps track of the player's score, which goes up every round. How should you declare it?

Q2

What does typeof "2025" give?

Q3

let phone; — what does phone hold right now?

What you learned

  • A variable is a named box for a value. Use const by default and let when the value must change; avoid var.
  • Basic types: string (in quotes), number, boolean (true/false), undefined (not set yet) and null (empty on purpose).
  • typeof value tells you the type as a string — with the old quirk that typeof null is "object".
Preview

Console output from your code appears here.

Step 1 of 3