Free Handbook · Runs in your browser

Data Types

Numbers and Math, strings and their methods, arrays and the methods you use daily, objects as the workhorse, Map and Set, JSON — with the missing-property TypeError, not-a-number and reference-copy bugs each one hands you, and a guide to choosing.

0 / 111 lessons🔥 0 day streak

ShareX LinkedIn

Module 03 · what you'll be able to do

Use Number, Math and know where floats lie to you
Slice, search, split, join and format strings
Build, index, mutate and transform arrays; know which methods mutate
Use objects as records and dictionaries; copy them correctly
Reach for Map and Set when they beat objects and arrays
Serialise with JSON.stringify and parse with JSON.parse safely

Numbers and Math

javascriptEdit it. ⌘/Ctrl + Enter runs.

console.log(0.1 + 0.2, 0.1 + 0.2 === 0.3)          // binary floats
console.log(Math.abs(0.1 + 0.2 - 0.3) < Number.EPSILON)   // compare floats this way
console.log((0.1 + 0.2).toFixed(2), +(0.1 + 0.2).toFixed(2))   // string, then number
console.log(19.99 * 100, Math.round(19.99 * 100))     // money: work in cents

console.log(Math.round(2.5), Math.round(-2.5), Math.floor(-2.5), Math.ceil(2.1), Math.trunc(-2.7))
console.log(Math.max(3, 9, 1), Math.min(...[4, 2, 8]), Math.sqrt(16), Math.PI.toFixed(4), 2 ** 10)
console.log(Math.random() < 1, Math.floor(Math.random() * 6) + 1 <= 6)   // dice: 1–6

console.log(Number.isInteger(5.0), Number.isInteger(5.5), Number.isSafeInteger(2 ** 53))
console.log(parseInt("08"), Number("1e3"), (255).toString(16), (255).toString(2))
console.log((1234567.891).toLocaleString("en-US"), (0.256).toLocaleString("en-US", { style: "percent" }))

You should see

0.30000000000000004 false
true
0.30 0.3
1998.9999999999998 1999
3 -2 -3 3 -2
9 2 4 3.1416 1024
true true
true false false
8 1000 ff 11111111
1,234,567.891 26%

Your turn

Compute compound interest: 1000 at 5% for 10 years, to 2 decimals. Then do it in integer cents and compare.

Error you will hit

NaN: the number that is not a number

javascript

const price = Number("free")
const total = price * 3
console.log(total, total === NaN, typeof total)

NaN false number

Why the engine said that

Any arithmetic on a non-numeric string, undefined, or an invalid operation (0 / 0, Math.sqrt(-1)) gives NaN. It is contagious — every operation on it stays NaN — and it is the only value not equal to itself, so === NaN is always false.

The fix

Check with Number.isNaN(x) (not the global isNaN, which coerces). Validate inputs at the edge: const n = Number(input); if (Number.isNaN(n)) throw ….

javascript

const price = Number("free")
if (Number.isNaN(price)) {
  console.log("not a price")
}

Never store money in a float

19.99 * 100 is 1998.9999999999998. Work in integer cents, or use a decimal library. Interviewers ask about this in every language.

Strings

Strings are immutable: every method returns a new string and the original never changes. That is why s.toUpperCase() on its own does nothing visible — keep the result. Indexing with [i] and .length work like arrays, but you cannot assign to s[0].

javascriptEdit it. ⌘/Ctrl + Enter runs.

const s = "Hello, World"

console.log(s[0], s.at(-1), s.length, s.slice(0, 5), s.slice(7), s.slice(-5))
console.log(s.toUpperCase(), s.toLowerCase())
console.log(s.indexOf("World"), s.indexOf("xyz"), s.includes("World"), s.startsWith("Hell"), s.endsWith("!"))
console.log(s.replace("World", "JS"), "a-b-c".replaceAll("-", "+"))
console.log("  padded  ".trim() + "|", "5".padStart(3, "0"), "ab".repeat(3))
console.log(s.split(", "), "2026-09-20".split("-"), [...s].length)
console.log(["data", "engineering"].join(" "), s.split("").reverse().join(""))
console.log(s.charCodeAt(0), String.fromCharCode(66), "b" > "a", "B" > "a")

// Template literals and multi-line
const name = "Ada", n = 3
console.log(`${name} has ${n} item${n === 1 ? "" : "s"}`)

// Case-insensitive compare, and localeCompare for sorting text
console.log("Apple".toLowerCase() === "apple", "b".localeCompare("a"), ["b", "a", "C"].sort((x, y) => x.localeCompare(y)))

You should see

H d 12 Hello World World
HELLO, WORLD hello, world
7 -1 true true false
Hello, JS a+b+c
padded| 005 ababab
[ 'Hello', 'World' ] [ '2026', '09', '20' ] 12
data engineering dlroW ,olleH
72 B true false
Ada has 3 items
true 1 [ 'a', 'b', 'C' ]

Your turn

Check whether "A man, a plan, a canal: Panama" is a palindrome — lowercase it, keep only letters with a regex replace(/[^a-z]/g, ""), compare with its reverse.

Error you will hit

Assigning to a string index does nothing

javascript

"use strict"
let word = "cat"
word[0] = "b"
console.log(word)

Uncaught TypeError: Cannot assign to read only property '0' of string 'cat'
    at your code:3

Why the engine said that

Strings cannot be changed in place. In sloppy mode the assignment silently does nothing and prints cat; in strict mode (modules, classes, this example) it throws.

The fix

Build a new string and rebind the name.

javascript

let word = "cat"
word = "b" + word.slice(1)
console.log(word)   // bat

Immutable: Cannot be changed after creation. All primitives are immutable; objects and arrays are mutable.
slice(start, end): End exclusive, negatives from the end, never throws — clips. Works on strings and arrays. (substring and substr are older; use slice.)

Arrays

An array is an ordered list of anything, and the container you reach for by default. The key thing to learn is which methods mutate the array (push, pop, shift, unshift, splice, sort, reverse) and which return a new one (map, filter, slice, concat, toSorted). Mixing them up is the number-one array bug.

javascriptEdit it. ⌘/Ctrl + Enter runs.

const nums = [4, 1, 3]
nums.push(9)             // add to end (mutates)
nums.unshift(7)          // add to front
console.log(nums, nums.length)
console.log(nums.pop(), nums.shift(), nums)   // remove end, remove front

nums.splice(1, 1, 8, 8)  // at index 1, remove 1, insert 8, 8
console.log(nums)
console.log(nums.indexOf(8), nums.includes(3), nums.at(-1), nums.slice(1, 3))

// sort MUTATES and sorts as STRINGS by default
const a = [10, 9, 1]
console.log([...a].sort(), a.toSorted((x, y) => x - y), a)   // a is untouched by toSorted
a.sort((x, y) => x - y)
console.log(a)
a.reverse()
console.log(a)                                    // reverse mutates too

// Building arrays
console.log(Array.from({ length: 4 }, (_, i) => i * i), new Array(3).fill(0), [..."abc"])
console.log([1, 2].concat([3], 4), [[1, 2], [3, [4]]].flat(Infinity))

// Destructuring and swapping
let [first, second, ...rest] = [1, 2, 3, 4]
;[first, second] = [second, first]
console.log(first, second, rest)

// Copies vs references
const orig = [1, 2, 3]
const alias = orig          // same array, two names
const copy = [...orig]      // a real (shallow) copy
alias.push(4)
console.log(orig, copy)

const nums = [4, 1, 3]
nums.push(9)             // add to end (mutates)
nums.unshift(7)          // add to front
console.log(nums, nums.length)
console.log(nums.pop(), nums.shift(), nums)   // remove end, remove front

nums.splice(1, 1, 8, 8)  // at index 1, remove 1, insert 8, 8
console.log(nums)
console.log(nums.indexOf(8), nums.includes(3), nums.at(-1), nums.slice(1, 3))

// sort MUTATES and sorts as STRINGS by default
const a = [10, 9, 1]
console.log([...a].sort(), a.toSorted((x, y) => x - y), a)   // a is untouched by toSorted
a.sort((x, y) => x - y)
console.log(a)
a.reverse()
console.log(a)                                    // reverse mutates too

// Building arrays
console.log(Array.from({ length: 4 }, (_, i) => i * i), new Array(3).fill(0), [..."abc"])
console.log([1, 2].concat([3], 4), [[1, 2], [3, [4]]].flat(Infinity))

// Destructuring and swapping
let [first, second, ...rest] = [1, 2, 3, 4]
;[first, second] = [second, first]
console.log(first, second, rest)

// Copies vs references
const orig = [1, 2, 3]
const alias = orig          // same array, two names
const copy = [...orig]      // a real (shallow) copy
alias.push(4)
console.log(orig, copy)

You should see

[ 7, 4, 1, 3, 9 ] 5
9 7 [ 4, 1, 3 ]
[ 4, 8, 8, 3 ]
1 true 3 [ 8, 8 ]
[ 1, 10, 9 ] [ 1, 9, 10 ] [ 10, 9, 1 ]
[ 1, 9, 10 ]
[ 10, 9, 1 ]
[ 0, 1, 4, 9 ] [ 0, 0, 0 ] [ 'a', 'b', 'c' ]
[ 1, 2, 3, 4 ] [ 1, 2, 3, 4 ]
2 1 [ 3, 4 ]
[ 1, 2, 3, 4 ] [ 1, 2, 3 ]

Your turn

Given scores = [88, 92, 79, 93, 85], print the top two and the average to one decimal — without mutating scores.

Error you will hit

[10, 9, 1].sort() gives [1, 10, 9]

javascript

const prices = [10, 9, 1, 100]
prices.sort()
console.log(prices)

[ 1, 10, 100, 9 ]

Why the engine said that

No error, wrong order. The default comparison converts elements to strings and compares them character by character: "10" < "9" because "1" < "9".

The fix

Always pass a comparator for numbers: (a, b) => a - b ascending, b - a descending. For objects: (a, b) => a.age - b.age; for strings, a.localeCompare(b).

javascript

const prices = [10, 9, 1, 100]
prices.sort((a, b) => a - b)
console.log(prices)   // [ 1, 9, 10, 100 ]

The 2023 `to…` methods are the non-mutating twins of sort/reverse/splice. Prefer them in React state and anywhere the original must survive.
Mutates the array	Returns a new array
`push pop shift unshift`	`map filter slice concat flat`
`splice sort reverse fill`	`toSorted toReversed toSpliced with`
	`[...arr] Array.from(arr)`

Objects

An object is a collection of key → value pairs. Keys are strings (or symbols); values are anything. Objects play two roles: a record with known fields (user.name) and a dictionary with dynamic keys (counts[word]). For the second role, Map (next lesson) is often better. Objects are compared and copied by reference — the single most important thing to understand about them.

javascriptEdit it. ⌘/Ctrl + Enter runs.

const user = { name: "Ada", age: 36, "home city": "London", tags: ["admin"] }

console.log(user.name, user["home city"], user.tags[0])
user.age = 37                 // change
user.email = "[email protected]"       // add
delete user.tags              // remove
console.log(user)
console.log("email" in user, user.phone, user.phone ?? "n/a", user.address?.city)

// Dynamic keys and shorthand
const field = "role"
const name = "Grace"
const rec = { name, [field]: "ops", greet() { return `hi ${this.name}` } }
console.log(rec.role, typeof rec.greet, rec.greet())

// Iterating
for (const [k, v] of Object.entries(user)) console.log(k, v)
console.log(Object.keys(user).length)

// Counting with an object as a dictionary
const counts = {}
for (const w of "a b a c b a".split(" ")) counts[w] = (counts[w] ?? 0) + 1
console.log(counts)

// Reference semantics
const a = { x: 1 }
const b = a                   // same object
b.x = 2
console.log(a.x, a === b, { x: 2 } === { x: 2 })   // equality is identity, not contents

// Copies: shallow and deep
const shallow = { ...a, y: 3 }
const nested = { inner: { n: 1 } }
const deep = structuredClone(nested)
deep.inner.n = 99
console.log(shallow, nested.inner.n)

// Destructuring with defaults and renaming
const { name: who, age = 0, missing = "dflt" } = user
console.log(who, age, missing)

const user = { name: "Ada", age: 36, "home city": "London", tags: ["admin"] }

console.log(user.name, user["home city"], user.tags[0])
user.age = 37                 // change
user.email = "ada@x.io"       // add
delete user.tags              // remove
console.log(user)
console.log("email" in user, user.phone, user.phone ?? "n/a", user.address?.city)

// Dynamic keys and shorthand
const field = "role"
const name = "Grace"
const rec = { name, [field]: "ops", greet() { return `hi ${this.name}` } }
console.log(rec.role, typeof rec.greet, rec.greet())

// Iterating
for (const [k, v] of Object.entries(user)) console.log(k, v)
console.log(Object.keys(user).length)

// Counting with an object as a dictionary
const counts = {}
for (const w of "a b a c b a".split(" ")) counts[w] = (counts[w] ?? 0) + 1
console.log(counts)

// Reference semantics
const a = { x: 1 }
const b = a                   // same object
b.x = 2
console.log(a.x, a === b, { x: 2 } === { x: 2 })   // equality is identity, not contents

// Copies: shallow and deep
const shallow = { ...a, y: 3 }
const nested = { inner: { n: 1 } }
const deep = structuredClone(nested)
deep.inner.n = 99
console.log(shallow, nested.inner.n)

// Destructuring with defaults and renaming
const { name: who, age = 0, missing = "dflt" } = user
console.log(who, age, missing)

You should see

Ada London admin
{ name: 'Ada', age: 37, 'home city': 'London', email: '[email protected]' }
true undefined n/a undefined
ops function hi Grace
name Ada
age 37
home city London
email [email protected]
4
{ a: 3, b: 2, c: 1 }
2 true false
{ x: 2, y: 3 } 1
Ada 37 dflt

Your turn

Write invert(obj) that swaps keys and values: {a: 1, b: 2} → {1: "a", 2: "b"}. Use Object.entries and Object.fromEntries.

Error you will hit

TypeError: Cannot read properties of undefined (reading 'city')

javascript

const user = { name: "Ada" }
console.log(user.address.city)

Uncaught TypeError: Cannot read properties of undefined (reading 'city')
    at your code:2

Why the engine said that

The most common error in all of JavaScript. user.address is undefined (the key does not exist — that is not an error), and then .city on undefined is an error. The message names the property you tried to read (city), so the thing that was undefined is whatever came before it.

The fix

Optional chaining when missing is legitimate: user.address?.city. Otherwise, find out why address was not set — usually data that has not loaded yet (Module 06) or a typo in the key.

javascript

const user = { name: "Ada" }
console.log(user.address?.city ?? "unknown")

Aliasing is the second-most common object bug

b = a makes two names for one object; changing one changes "both". { ...a } copies one level; structuredClone(a) copies everything (not functions). React and Redux depend on you knowing this — you always make a new object rather than mutating the old one.

Map and Set

Map is a dictionary done properly: any value can be a key (not just strings), insertion order is kept, .size is a property, and it has no prototype keys to trip over. Set is a collection of unique values with O(1) membership. When the keys are dynamic data — user IDs, words, coordinates — use a Map; when you need "have I seen this", use a Set.

javascriptEdit it. ⌘/Ctrl + Enter runs.

const ages = new Map([["ada", 36], ["bob", 28]])
ages.set("cy", 41).set("ada", 37)         // chainable; set overwrites
console.log(ages.get("ada"), ages.get("zed"), ages.has("bob"), ages.size)
ages.delete("bob")
for (const [name, age] of ages) console.log(name, age)
console.log([...ages.keys()], [...ages.values()], Object.fromEntries(ages))

// Any key type — objects as keys, which plain objects cannot do
const pos = { x: 1, y: 2 }
const visited = new Map([[pos, "start"]])
console.log(visited.get(pos))

// Set: uniqueness and membership
const seen = new Set([1, 2, 2, 3, 3, 3])
seen.add(4)
console.log(seen, seen.has(2), seen.size)
console.log([...new Set("mississippi")].join(""))    // dedupe a string

// Set algebra (ES2025 — polyfilled here with spread)
const a = new Set([1, 2, 3]), b = new Set([2, 3, 4])
console.log([...a].filter(x => b.has(x)), [...new Set([...a, ...b])], [...a].filter(x => !b.has(x)))

// Grouping with a Map
const people = [["ada", "data"], ["bob", "infra"], ["cy", "data"]]
const byTeam = new Map()
for (const [name, team] of people) {
  if (!byTeam.has(team)) byTeam.set(team, [])
  byTeam.get(team).push(name)
}
console.log(byTeam)
console.log(Object.groupBy(["ada", "bob", "cy"], n => n.length > 2 ? "long" : "short"))

const ages = new Map([["ada", 36], ["bob", 28]])
ages.set("cy", 41).set("ada", 37)         // chainable; set overwrites
console.log(ages.get("ada"), ages.get("zed"), ages.has("bob"), ages.size)
ages.delete("bob")
for (const [name, age] of ages) console.log(name, age)
console.log([...ages.keys()], [...ages.values()], Object.fromEntries(ages))

// Any key type — objects as keys, which plain objects cannot do
const pos = { x: 1, y: 2 }
const visited = new Map([[pos, "start"]])
console.log(visited.get(pos))

// Set: uniqueness and membership
const seen = new Set([1, 2, 2, 3, 3, 3])
seen.add(4)
console.log(seen, seen.has(2), seen.size)
console.log([...new Set("mississippi")].join(""))    // dedupe a string

// Set algebra (ES2025 — polyfilled here with spread)
const a = new Set([1, 2, 3]), b = new Set([2, 3, 4])
console.log([...a].filter(x => b.has(x)), [...new Set([...a, ...b])], [...a].filter(x => !b.has(x)))

// Grouping with a Map
const people = [["ada", "data"], ["bob", "infra"], ["cy", "data"]]
const byTeam = new Map()
for (const [name, team] of people) {
  if (!byTeam.has(team)) byTeam.set(team, [])
  byTeam.get(team).push(name)
}
console.log(byTeam)
console.log(Object.groupBy(["ada", "bob", "cy"], n => n.length > 2 ? "long" : "short"))

You should see

37 undefined true 3
ada 37
cy 41
[ 'ada', 'cy' ] [ 37, 41 ] { ada: 37, cy: 41 }
start
Set(4) { 1, 2, 3, 4 } true 4
misp
[ 2, 3 ] [ 1, 2, 3, 4 ] [ 1 ]
Map(2) { 'data' => [ 'ada', 'cy' ], 'infra' => [ 'bob' ] }
{ long: [ 'ada', 'bob' ], short: [ 'cy' ] }

Your turn

Write firstRepeat(items) using a Set — return the first value that appears twice, or null. One pass.

	Object	Map
Key types	string, symbol	anything
Order	insertion (mostly — integer keys first)	insertion, always
Size	`Object.keys(o).length`	`m.size`
Iteration	`Object.entries`	directly iterable
JSON	`JSON.stringify` works	needs `Object.fromEntries` first
Use for	records with known fields; JSON	dictionaries keyed by data

JSON

JSON is a text format that looks like a JavaScript object literal with stricter rules: double-quoted keys, no trailing commas, no comments, no functions, no undefined. It is how every API talks. JSON.stringify turns a value into that text; JSON.parse turns text back. Parsing untrusted text can throw — wrap it.

javascriptEdit it. ⌘/Ctrl + Enter runs.

const user = { name: "Ada", age: 36, tags: ["admin"], nested: { ok: true }, nothing: null, skip: undefined, fn() {} }

const text = JSON.stringify(user)
console.log(text)                                  // undefined and functions are dropped
console.log(JSON.stringify(user, null, 2))         // pretty-printed
console.log(JSON.stringify(user, ["name", "age"])) // only these keys

const back = JSON.parse(text)
console.log(back.name, back.nested.ok, back === user)   // a NEW object

// Dates become strings; parse them back yourself
const d = JSON.parse(JSON.stringify({ when: new Date(0) }))
console.log(typeof d.when, new Date(d.when).getUTCFullYear())

// Parsing untrusted input
function safeParse(s, fallback) {
  try { return JSON.parse(s) } catch { return fallback }
}
console.log(safeParse('{"a": 1}', {}), safeParse("{bad json", {}), safeParse("42", 0))

// Deep copy via JSON — works for plain data only (loses Dates, Maps, undefined)
const copy = JSON.parse(JSON.stringify({ a: [1, { b: 2 }] }))
console.log(copy)

const user = { name: "Ada", age: 36, tags: ["admin"], nested: { ok: true }, nothing: null, skip: undefined, fn() {} }

const text = JSON.stringify(user)
console.log(text)                                  // undefined and functions are dropped
console.log(JSON.stringify(user, null, 2))         // pretty-printed
console.log(JSON.stringify(user, ["name", "age"])) // only these keys

const back = JSON.parse(text)
console.log(back.name, back.nested.ok, back === user)   // a NEW object

// Dates become strings; parse them back yourself
const d = JSON.parse(JSON.stringify({ when: new Date(0) }))
console.log(typeof d.when, new Date(d.when).getUTCFullYear())

// Parsing untrusted input
function safeParse(s, fallback) {
  try { return JSON.parse(s) } catch { return fallback }
}
console.log(safeParse('{"a": 1}', {}), safeParse("{bad json", {}), safeParse("42", 0))

// Deep copy via JSON — works for plain data only (loses Dates, Maps, undefined)
const copy = JSON.parse(JSON.stringify({ a: [1, { b: 2 }] }))
console.log(copy)

You should see

{"name":"Ada","age":36,"tags":["admin"],"nested":{"ok":true},"nothing":null}
{
  "name": "Ada",
  "age": 36,
  "tags": [
    "admin"
  ],
  "nested": {
    "ok": true
  },
  "nothing": null
}
{"name":"Ada","age":36}
Ada true false
string 1970
{ a: 1 } {} 42
{ a: [ 1, { b: 2 } ] }

Error you will hit

SyntaxError: Unexpected token '}', "{"a": }" is not valid JSON

javascript

const data = JSON.parse('{"a": }')

Uncaught SyntaxError: Unexpected token '}', "{"a": }" is not valid JSON
    at JSON.parse (<anonymous>)
    at your code:1

Why the engine said that

The text is not JSON. In real life this means the API returned an HTML error page, an empty body, or a string with a trailing comma. JSON.parse throws rather than guessing.

The fix

Log the raw text before parsing when debugging. In production, catch the error and treat it as a failed request. Never build JSON by string concatenation — use JSON.stringify.

Choosing the right type

You need…	Use	Why
An ordered list you loop over	Array	Index, iteration, map/filter/reduce
A record with known fields	Object (or a class, Module 08)	Dot access reads like English; JSON-ready
A dictionary keyed by data	Map	Any key type, .size, safe iteration order
Uniqueness or membership	Set	O(1) has(), dedupe with spread
A fixed pair or triple	Array + destructuring	`const [lat, lng] = point`
Text	String + template literal	Immutable, rich methods
Money	Integer cents	Floats cannot represent 0.1
Very large integers	BigInt	Beyond 2⁵³

Quick check

You have 1,000,000 user IDs and need to check 50,000 incoming IDs against them. Best structure for the known IDs?

Mid-levelWhen would you use a Map instead of a plain object?

When keys are dynamic data rather than fixed field names: keys can be any type (objects, numbers without string coercion), iteration order is guaranteed, size is O(1), there are no inherited keys like constructor to collide with, and frequent add/delete performs better. Plain objects stay for records and for anything that must become JSON.

← Module 02Flow Control Module 04 →Functions

Finish the JavaScript handbook, then get hired

Sit the exam for your certificate, run your resume through the ATS checker, and see the jobs that ask for exactly this.

Check my resume

Found this course useful? Share it.

ShareX LinkedIn

Comments

Join the conversation. Sign in to leave a comment — we'd love to hear your thoughts.