Variables & Data Types
Learn how to store and label information in JavaScript using let and const, and meet the five primitive types your programs will use every day.
Every useful program needs to remember things. A shopping cart has to remember what you added. A login form has to remember your username. A score counter has to remember the current score. In JavaScript, we store those remembered values in variables.
In this lesson you will learn how to create variables the modern way, discover the different kinds of values JavaScript understands, and pick up a handy trick called the template literal that makes building strings a breeze.
#What Is a Variable?
Variables are labelled boxes
Picture a row of cardboard boxes in a storage room. Each box has a sticky-note label on it — "username", "score", "isLoggedIn" — and something stored inside. A variable is exactly that: a named container that holds a value. You can look inside the box, replace what's in it, or read the label to find the right box later.
JavaScript gives you two modern keywords for creating variables: let and const. You will almost never need the older var keyword — we will explain why in a moment.
#let vs const
// let — the value can change later
let score = 0;
score = 10; // reassigning is fine
console.log(score);
// const — the value is fixed (constant)
const siteName = "Quest";
console.log(siteName);The rule of thumb is simple: start with `const`. If you later realise the value needs to change, switch it to let. This habit prevents accidental overwrites and makes your code easier to reason about at a glance.
Why not var?
var is the old way of declaring variables. It has confusing scoping rules — a var declared inside an if block leaks out of that block, which causes hard-to-spot bugs. let and const follow block scoping rules that match what you would expect. Modern JavaScript (ES6+) replaced var with let and const, and you should use those exclusively.
#Primitive Data Types
JavaScript has five primitive types you will work with constantly. "Primitive" just means a single, simple value — not a collection or an object.
// 1. string — text, wrapped in quotes
const greeting = "Hello, world!";
// 2. number — integers and decimals alike
const age = 28;
const price = 9.99;
// 3. boolean — only two possible values
const isOnline = true;
const hasError = false;
// 4. null — intentionally empty
const selectedUser = null;
// 5. undefined — a variable declared but not yet assigned
let pendingValue;
console.log(pendingValue);A quick note on null vs undefined: `null` means "there is nothing here on purpose" — you explicitly set it. `undefined` means "there is nothing here because no value has been assigned yet" — JavaScript sets it automatically. Both represent emptiness, but for different reasons.
#Checking Types with typeof
JavaScript lets you inspect the type of any value at runtime using the typeof operator. It returns a string describing the type. This is useful for debugging and for writing code that behaves differently depending on what it receives.
console.log(typeof "Hello"); // string
console.log(typeof 42); // number
console.log(typeof true); // boolean
console.log(typeof undefined); // undefined
console.log(typeof null); // object ← famous quirk!typeof null is "object" — a 26-year-old bug
You read that right. typeof null returns "object", which is technically wrong — null is a primitive, not an object. This is a well-known bug that dates back to the very first version of JavaScript in 1995. It was never fixed because fixing it would break millions of websites. Just remember: if typeof returns "object" and you're suspicious, double-check whether the value might be null.
#Template Literals — a Better Way to Build Strings
Joining strings and variables together with + works, but it gets messy fast. Template literals (introduced in ES6) use backtick quotes and ${} placeholders to embed values directly inside a string — much cleaner.
const name = "Alice";
const score = 42;
// Old way — hard to read
console.log("Player " + name + " scored " + score + " points.");
// Modern way — template literal
console.log(`Player ${name} scored ${score} points.`);What will the following code print? const x = 5; x = 10; console.log(x);
Key takeaways
- Use const by default and let when you know the value needs to change — avoid var entirely.
- The five primitives are string, number, boolean, null, and undefined — they cover the vast majority of simple values in JavaScript.
- typeof tells you the type of a value at runtime, but remember: typeof null returns "object" due to a historical bug.
- Template literals (backtick strings with ${}) are the clearest way to embed variable values inside text.
What does this code print? Remember the famous typeof quirk from the lesson.
console.log(typeof "Hello");
console.log(typeof 42);
console.log(typeof null);This code has a bug — what's wrong?
const score = 0;
score = 10;
console.log(score);Complete the declarations so each variable holds the correct primitive type. Fill the first blank with the keyword for a value that will stay fixed, and the second blank with the keyword whose value can change later.
siteName = "Quest"; score = 0; score = 10; console.log(siteName, score);
Arrange these lines to declare a user's details and log a sentence like 'Alex is 30 years old and is a premium member: true' using a template literal.
console.log(`${name} is ${age} years old and is a premium member: ${isPremium}`);const age = 30;
const isPremium = true;
const name = "Alex";
Create three variables that describe a user: their name (a string), their age (a number), and whether they are a premium member (a boolean). Then use a template literal to log a sentence like: "Alex is 30 years old and is a premium member: true".
Try it live — edit the code and hit Run to see the output: