Values have types
A program works with values: pieces of data such as 42, "hi" or true. Every value has a type. The type says what kind of data it is and what you can do with it. JavaScript has eight types.
One variable, changing types
let x = 42 makes a variable called x and puts the value 42 in it. 42 is a number. JavaScript uses the number type for all ordinary numbers, whole ones like 42 and ones with a decimal point like 3.5.
typeof is an operator: a small word that works on a value. typeof x looks at the value in x and gives its type's name as a string, here "number". console.log prints it in the console.
x = "42" puts new text in x. The quotes make it a string: a piece of text, here the characters 4 and 2. The box is the same, but its value and the value's type both changed.
typeof x now gives "string". The variable did not change type; its value did. In JavaScript the type belongs to the value, not the variable. Languages like this are called dynamically typed.
Types change what + does
What + does depends on the types. If either side is a string, + joins text. So "42" + 1 turns 1 into "1" and gives "421", a string. It does not add up to 43.
Number(x) converts the string "42" into the number 42. Now both sides of + are numbers, so it adds: 42 + 1 is 43. Converting on purpose like this avoids surprises.
More types
x = true stores a boolean. A boolean has only two values, true and false, and answers yes-or-no questions. Programs use booleans to make decisions. typeof x now gives "boolean".
let y; makes a variable but gives it no value. JavaScript fills it with undefined, a value that means "nothing has been put here yet". Its type is also called undefined.
Seven types are primitive: simple single values. Besides number, string, boolean and undefined, there are null (empty on purpose), bigint (very big whole numbers) and symbol (unique labels). Everything else, such as lists, is an object.
What happens
// step 1/10 · values
value a piece of data: 42 "hi" true
type what kind of data a value is
number string boolean undefined
null bigint symbol object
JavaScript has exactly these 8 (ECMA-262 §6.1)
The console shows a string without its quotes, so "421" appears as 421. Many consoles colour numbers differently from strings so you can still tell them apart. typeof null gives "object", not "null". It is a mistake from the first version of JavaScript, kept so old web pages still work. Check for null with x === null.