Data Types

All in one: every data type, typeof answer and conversion, side by side

What this example compares

The quotes decide: 25 + 5 vs "25" + 5, and typeof x vs typeof(x)
The eight types: the seven primitives (string, number, bigint, boolean, undefined, null, symbol) vs the object type
Strings: "double" vs 'single' vs `backticks` vs "", and digits kept as text
Numbers: whole vs decimal vs Infinity vs NaN, all one type
Booleans: true vs false vs a comparison vs the string "true"
Nothing, two ways: undefined vs null
Big whole numbers: number vs bigint (25n), and why 10n + 1 is an error
Unique labels: Symbol("id") vs another Symbol("id") vs the string "id"
The object type: object { } vs array [ ] vs function
typeof quirks: typeof null vs === null, typeof [] vs Array.isArray(), and "function"
Dynamic typing: one let holding three types vs a const
Copied or shared: a primitive vs an object or array, and === on objects
+ joins or adds: "5" + 1 vs true + 1, null + 1, undefined + 1
Only maths: - * / % ** with strings
Comparing: "10" > 9 vs "10" > "9", and == vs ===
Converting on purpose: String() vs Number(), with parseInt() and new Number() as look-alikes
Boolean(): the falsy values vs the truthy ones, and how if uses them
Typed by a person: a form box with and without Number() vs prompt()

Point at any word in the code to see what it means (tap on a phone); click a word to keep its meaning on screen. Read the comment above each numbered panel, press Run, then Edit & experiment to try the TRY lines yourself.

The complete code

Loading the example…

What you should see

You should see 18 panels of small cards. Panel 1 shows 30 next to "255"; panel 2 shows one card for each slide value, where null and the array are both tagged object. Panels 3 to 5 show four kinds of string, eight numbers (including Infinity and NaN, all tagged number) and the booleans next to the string "true". Panel 6 shows three ways to get undefined beside null. In panel 7, 9007199254740993 comes out rounded to ...992, while the bigint keeps the 3; the 10n + 1 card is red with a TypeError. One card in panel 11 is red too: the const card, with "Assignment to constant variable". The other panels show the answers predicted in their comments, such as "405" for the classic bug in panel 13, NaN for Number("42px") and true for Boolean("0"). The Console prints one line per card in the form 13. "5" + 1 -> "51" (string), with one extra line, 4 51 2, after panel 13. Panel 18 prints nothing until you press its buttons.

Quick check: in panel 13 the card maths + bonus shows "405". Give two different edits that make it show 45.

Remove the quotes in let maths = "40";, so both sides are numbers and + adds. Or keep the text and convert it on purpose: Number(maths) + bonus (panel 16). The second fix is the one you use for a value typed into a form, because a form box always gives you a string.