Section 1 · First Steps
Values, Types and Variables
17 min3 min readCode playground
Lesson at a glance
Recognise JavaScript’s basic value types, check them with typeof, and store values in variables with const and let, choosing the right one each time.
- 1Values and their types
- 2Naming values with const and let
- 3The value has the type, not the variable
- 4Names: the rules and the habits
No video here — just the real thing: a written lesson, runnable examples, a quiz and practice.
Pocket needs to remember things: the app’s name, how much you have spent today, whether you are over budget. A program remembers by keeping values and giving them names. Before you can do anything interesting, you need to know what kinds of values exist and how to name them.
Values and their types
A value is a single piece of data. Every value has a type, which decides what you can do with it. These five cover almost everything you will touch in your first weeks:
| Type | Examples | Used for |
|---|---|---|
| number | 42, 4.5, -3 |
amounts, counts, measurements |
| string | "Coffee", 'food' |
any text |
| boolean | true, false |
yes/no answers |
| undefined | undefined |
“no value has been given yet” |
| null | null |
“deliberately empty” |
The typeof operator tells you the type of any value. Run this and compare each line with the table:
console.log(typeof 42);
console.log(typeof "Coffee");
console.log(typeof true);
console.log(typeof undefined);
console.log(typeof null);Four answers match the table. The last one says "object", which is a bug from 1995 that can never be fixed because millions of websites depend on it. When you need to know whether something is null, compare it directly: value === null.
There are two more basic types, bigint (for huge whole numbers) and symbol (for unique labels), which you will rarely need as a beginner. Everything else, such as lists and records, is an object, and section 3 is all about those.
Naming values with const and let
A variable is a name that points at a value. You create one with a declaration:
const appName = "Pocket";
let spentToday = 0;
spentToday = spentToday + 4.5;
spentToday = spentToday + 12;
console.log(appName, "spent today:", spentToday);Read line 4 the way the engine does: first it evaluates the right side, spentToday + 4.5, which is 0 + 4.5, so 4.5. Then it points the name spentToday at that new value. The = sign means “point this name at”, not “is equal to”. That is why x = x + 1 makes sense in code even though it is nonsense in maths.
const creates a name that can never be pointed anywhere else. let creates one that can. Use this rule: declare with const by default, and change it to let only when you find you need to reassign. Most names in real programs never change, and a const tells the next reader that they can stop worrying about it.
You will also see a third keyword, var, in older tutorials and Stack Overflow answers. It is the original way to declare variables and has scoping rules that cause bugs (you will see why in the scope lesson). Modern code does not use it.
The value has the type, not the variable
In JavaScript a variable does not have a type of its own. It points at a value, and the value has a type. So a let can point at a number now and a string later:
let note = 12;
console.log(typeof note);
note = "twelve dollars";
console.log(typeof note);This flexibility is called dynamic typing. It is convenient, and it is also how many beginner bugs start: a number quietly becomes a string and your sum turns into "1212". The next two lessons show exactly when that happens.
Names: the rules and the habits
The rules: a name can contain letters, digits, _ and $, cannot start with a digit, and cannot be a reserved word such as const or if. Names are case-sensitive, so total and Total are two different variables.
The habits, which every JavaScript codebase follows: write names in camelCase (spentToday, monthlyBudget), and make them say what the value means, not what type it is. spentToday beats num1; isOverBudget beats flag. Booleans usually start with is, has or can.
Two errors you will meet while practising:
ReferenceError: spent is not definedmeans you used a name that was never declared, often a typo.ReferenceError: Cannot access 'spent' before initializationmeans you used aletorconston a line above its declaration. Declare first, use after.
Next lesson you start doing arithmetic with your numbers, and you will find out why 0.1 + 0.2 is not quite 0.3.
Key takeaways
- Every value has a type; the basic ones are number, string, boolean, undefined and null, and
typeoftells you which one you have. - A variable is a name that points at a value; the value has a type, the variable does not.
- Declare with
constby default and switch toletonly when the name must point at a different value later. - Reassigning a
constthrows a TypeError, and using a name before declaring it throws a ReferenceError.