4.13 — JSON
Your objects have a hidden weakness. Everything you've built this phase — arrays, objects, the arrows connecting them — lives inside the engine's memory, in the heap (4.6). The moment your program needs to send data somewhere else — over a network, into a file — that picture breaks down completely.
A network wire or a file can only carry one thing: text. JSON is the bridge — a way to flatten any object into text and rebuild it back. It's the format every API your future tests will talk to actually speaks.
const order = { id: 7, items: ["mug", "pen"] };
const text = JSON.stringify(order);
console.log(text);
const back = JSON.parse(text);
console.log(back.items[1]);Your order object lives in the heap: an address, with an arrow pointing at its items array — engine internals, not something you can mail anywhere.
The deeper story, with the real names for things — this part is what turns “I saw it” into “I can explain it.”
JSON (JavaScript Object Notation) is a stricter dialect than JS literal syntax. Keys must be double-quoted; strings too. Only objects, arrays, strings, numbers, booleans and null exist.
undefined, functions and dates don't survive the trip (dates become plain strings) — which is exactly why the old JSON.parse(JSON.stringify(x)) deep-copy trick from 4.7 is lossy.
It stopped being "JavaScript's format" long ago: Python, Java, databases, and every REST API speak it. Lesson 9.7 has you fetch an API from a Node script; Phase 11 has you assert on API responses. Both times the payload will be JSON text — and parse/stringify will be the door in and out.
Fun fact: this very notebook runs on it. Your streak, your finished lessons, your journal — one object, JSON.stringify-ed into your browser's localStorage after every change. On a computer, open DevTools → Application → Local Storage and you can read your own progress as JSON, right now.
⌨️ package the report
A test finished. Turn the RESULT — a plain object — into the JSON text a server expects, then read a value back out of it.
requirements:
- Start with
result={ name: "login", passed: true, ms: 320 }. - Turn it into JSON text with
JSON.stringifyand print the text. - Then
JSON.parsethat same text back into an object, and print just itsmsfield.
when you press RUN, the console must show exactly:
✏️ Quick check 1
Type the exact string this prints (every character counts):
console.log(JSON.stringify({ a: 1 }));✏️ Quick check 2
Type exactly what this prints:
const o = JSON.parse('{"n":5}');
console.log(o.n + 1);✏️ Quick check 3
JSON.parse(JSON.stringify(original)) — is the result === original? Type true or false.
🗣️ Now teach it back
Explain to a friend: why can’t you just send a JavaScript object over a network, what do JSON.stringify and JSON.parse actually do, and what gets lost along the way?
Write it as if your friend is sitting next to you. Saved to your journal — future-you will use these notes to teach others.