Structured cloning & URLSearchParams
Deep copy data with structuredClone (keeps Dates/Maps/Sets), and parse/build query strings with URLSearchParams.
Structured cloning & URLSearchParams is a free JavaScript Academy lesson on CoddyKit — lesson 2 of 3. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the JavaScript Academy learning path, one of 3 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Why these tools?
Goal: Copy and serialize URL data safely.
- structuredClone deep-copies data
- Preserves Date/Map/Set
- URLSearchParams parses/builds queries
- Beginner-friendly patterns
Deep copy that keeps types
structuredClone makes a deep copy and keeps Date objects intact.
// Deep copy with structuredClone (Node 17+/modern browsers)
const original = { n: 1, list: [1, 2], when: new Date("2024-01-01") };
const copy = structuredClone(original);
copy.n = 2;
copy.list.push(3);
console.log("original.n:", original.n);
console.log("copy.n:", copy.n);
console.log("dates equal type?", copy.when instanceof Date);
JSON loses types
JSON is data-only; Date/Map/Set turn into plain values or get lost.
// JSON round-trip loses special types (e.g., Date becomes string)
const obj = { when: new Date("2024-01-01"), ok: true };
const round = JSON.parse(JSON.stringify(obj));
console.log("after JSON:", typeof round.when, round.when);
console.log("is Date?", round.when instanceof Date);
Maps/Sets survive
Map and Set survive cloning correctly with structuredClone.
// structuredClone preserves Map and Set
const m1 = new Map([["a", 1]]);
const s1 = new Set([1, 2]);
const cloned = structuredClone({ m1, s1 });
console.log("map has a?", cloned.m1.has("a"));
console.log("set has 2?", cloned.s1.has(2));
Parse query strings
URLSearchParams reads query strings; use get, getAll, has, and iterate if needed.
// Parse a query string with URLSearchParams
const qs = "q=shoes&color=red&color=blue&page=2";
const params = new URLSearchParams(qs);
console.log("q:", params.get("q"));
console.log("first color:", params.get("color"));
console.log("all colors:", params.getAll("color"));
console.log("page:", params.get("page"));
Build query strings
Use set/append then toString() to create safe query strings.
// Build a query string from key/value pairs
const build = new URLSearchParams();
build.set("q", "shoes");
build.append("color", "red");
build.append("color", "blue");
build.set("page", String(2));
console.log("query:", build.toString());
// Example full URL
const url = "https://example.com/search?" + build.toString();
console.log("url:", url);
structuredClone vs JSON quiz
Quick check: Deep copy that preserves types.
Recap
Recap: Use structuredClone for deep copies that keep types like Date/Map/Set. Use URLSearchParams to parse and build query strings safely.
Frequently asked questions
Is the “Structured cloning & URLSearchParams” lesson free?
Yes — the full text of “Structured cloning & URLSearchParams” is free to read here on the web, and the JavaScript Academy course includes 3 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the JavaScript Academy course, upgrade to CoddyKit PRO.
What will I learn in “Structured cloning & URLSearchParams”?
Deep copy data with structuredClone (keeps Dates/Maps/Sets), and parse/build query strings with URLSearchParams. You practise JavaScript Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start JavaScript Academy?
No prior experience is required. JavaScript Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 3, so you can start here or from the beginning and move at your own pace.
How long does the “Structured cloning & URLSearchParams” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this JavaScript Academy lesson?
Yes. Every JavaScript Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- JSON.parse / JSON.stringify basics
- Structured cloning & URLSearchParams
- Safe JSON parsing strategies