Values, Types and Variables

A program spends its whole life handling pieces of information: how many projects there are, what a visitor typed, whether a menu is open. Each piece is a value, and to use a value more than once, the program gives it a name. Three kinds of value, two kinds of nothing and two ways of naming them are enough to start programming.

A name works like a luggage label tied to a value. One kind of name ties the knot for good: that label stays on that value. The other kind can be untied and moved to a different value later. Either way, the label is not the suitcase, and that difference comes back in Chapter 7.

Numbers and Strings

Every value has a type: what kind of value it is. Numbers are written as they are, with no quotes: 42, 3.5, -7. JavaScript has one type for all of them, whole or not.

Text is written inside quotes, and a piece of text is called a string, because it is a string of characters in a row. This book writes strings in double quotes. The quotes are not part of the text; they only mark where it starts and ends. So "42" in quotes is a string that happens to contain two digits, not a number.

The typeof keyword asks JavaScript what type a value is. In the Console below, forty-two and three and a half both answer number, while hello and the quoted forty-two both answer string.

> typeof 42
'number'
> typeof 3.5
'number'
> typeof "hello"
'string'
> typeof "42"
'string'

True, False and Two Kinds of Nothing

A boolean is a value that is either true or false, written without quotes. Booleans are the answers to yes-or-no questions: is the menu open, is this field empty, has the visitor chosen dark mode. The next topic builds every decision in the book out of them.

JavaScript also has two values that mean "nothing", and they mean it in different ways. undefined means nothing was ever set: a name that was made but never given a value holds undefined. null means nothing on purpose: someone looked, and the answer is "there is none". In Chapter 8, asking the page for an element that does not exist gives null.

One oddity to know about: asking typeof about null answers "object", not "null". That was a mistake in the very first version of the language, and it can never be fixed without breaking old pages that depend on it.

Type	Example	What it means
number	42, 3.5	A quantity you can do arithmetic with
string	"Your Name"	Text, marked by quotes
boolean	true, false	The answer to a yes-or-no question
undefined	undefined	Nothing was ever set
null	null	Set to nothing, on purpose

Naming Values: const and let

A variable is a name that points at a value. You make one with the keyword const, a name, an equals sign and a value. Read it as "make the name siteName and point it at this text". That single equals sign means "point this name at this value", which is called assignment. It is not the equals of arithmetic, and the next topic shows how JavaScript compares two values instead.

From then on, the name stands for its value anywhere you write it. In the Console below, the line that makes the name answers undefined, because making a name produces no value to show; that is the Console being literal, not an error. Typing the name alone gives back the text it points at.

> const siteName = "Your Name";
undefined
> siteName
'Your Name'
> siteName = "Someone Else";
Uncaught TypeError: Assignment to constant variable.

The last line tries to point siteName at different text, and the Console answers in red. Read aloud, the message says: type error, assignment to constant variable. const meant what it said: that name stays with that value. Topic 5 is about reading messages like this one.

When a name must move to new values, make it with let instead. The block below counts visits. The line with visits = visits + 1 reads from the right: take the current value of visits, add one, and point the name at the result. The Console shows the new value each time: one, then two.

> let visits = 0;
undefined
> visits = visits + 1;
1
> visits = visits + 1;
2

The rule for choosing is short: start with const, and change to let only when you find the name really has to move. You will also see a third keyword, var, in older code and tutorials. It behaves differently in ways that cause bugs, and this book never uses it. Reloading the page clears every name you made in the Console, so a reload is also a clean start.

Building Text with Template Literals

Pages constantly need text with values inside it: "Your Name has 3 projects". A template literal builds that text. It is a string written between backticks instead of quotes; on many keyboards the backtick key sits at the top left, below Escape. Inside it, a dollar sign followed by curly braces around a name puts that name's value into the text.

> const projectCount = 3;
undefined
> `${siteName} has ${projectCount} projects.`
'Your Name has 3 projects.'
> `Next month: ${projectCount + 1} projects.`
'Next month: 4 projects.'

The first template fills in the site name and the count, and the Console answers "Your Name has 3 projects." The second shows that anything which produces a value can go between the braces, including a small sum, so it answers "Next month: 4 projects." In older code you will see text joined with plus signs instead. That works, but a missing space is a common slip, and the next topic shows a trap in it, so this book builds text with template literals only.

Naming Well

A name can use letters, digits, the underscore and the dollar sign, but it cannot start with a digit or contain a space, and the words JavaScript itself uses, such as const and let, are taken. Capital letters matter: projectCount with a capital C and projectcount all in lowercase are two different names. JavaScript names are written in camelCase: the first word in lowercase and every later word starting with a capital, like the humps of a camel.

Above all, a name should say what its value is. projectCount tells the next reader what they are looking at; x or pc makes them work it out. The next reader is usually you, a few weeks later, having forgotten everything.