Maps, Sets, and Dates

Maps, Sets, and Dates | JavaScript Course | SovranCode

COMPLETE LESSON · ABOUT 30 MIN OF ACTIVE PRACTICE

Learn Maps, Sets, and Dates step by step

Follow the lesson in order: understand the model, trace worked examples, run a controlled experiment, debug a faulty assumption, build independently, and verify your reasoning.

LESSON MAP

What you will understand and apply

Use Map when keys are dynamic values
Use Set for membership and uniqueness
Format dates with Intl rather than manual strings
Aggregate attempts with Map, deduplicate completions with Set, and format a timestamp for a named locale.

DEEP EXPLANATION

Build the complete mental model

Build the mental model

Map stores key-value pairs and accepts objects, numbers, and other values as keys without converting them to strings. get, set, has, delete, size, and iteration provide a direct collection contract. Object remains excellent for fixed records; Map is stronger for a dynamic dictionary whose keys and entries are manipulated as data. Before writing more syntax, name the values involved in Maps, Sets, and Dates, who creates them, and which result or effect the program promises. Trace the smallest example by hand and identify any browser or runtime API separately from the language feature. A useful mental model should predict a changed input, not merely describe the demonstration after it runs.

Use the API deliberately

Set stores each value once according to SameValueZero equality. It supports add, has, delete, size, and iteration. Converting an array through new Set is a useful primitive-value deduplication technique, but object records are unique by reference. Set operations such as union and intersection express relationships directly in modern runtimes. During implementation, keep the Map rule in a focused function or event boundary with explicit inputs. Choose names that reveal the domain, keep calculation separate from document, console, storage, or network effects, and prefer the narrowest API that expresses the problem. Compare this design with one reasonable alternative and explain why the selected construct makes ownership or control flow clearer.

Handle boundaries and tradeoffs

Date stores a timestamp but its display depends on time zone and locale. Construct or parse only well-defined formats, check validity, and use Intl.DateTimeFormat for user-facing text. A calendar date, local appointment time, and universal instant are different domain types even when older APIs represent all three with Date. Verification for Maps, Sets, and Dates must cover an ordinary case, an empty or missing case, invalid input, and the most important threshold. Predict each result before running it, then locate the first value that violates the contract when reality differs. Record the corrected case as a repeatable check and explain which product behavior should occur instead of allowing undefined, NaN, stale data, or silent failure to spread.

WORKED EXAMPLES

Read the decision before the syntax

Example 1: Primary worked example

Trace this Maps, Sets, and Dates example from validated input to returned value or visible effect before editing it.

const attemptsByLesson = new Map();
for (const slug of ["arrays", "dom", "arrays"]) {
  attemptsByLesson.set(slug, (attemptsByLesson.get(slug) ?? 0) + 1);
}
const completed = new Set(["arrays", "dom", "arrays"]);
console.log({ attempts: [...attemptsByLesson], completed: [...completed] });

Example 2: Second worked example

This variation changes the shape of the problem so you can compare the underlying Map contract instead of copying one solution.

function formatInstant(iso, locale, timeZone) {
  const date = new Date(iso);
  if (Number.isNaN(date.getTime())) throw new TypeError("Valid ISO instant required");
  return new Intl.DateTimeFormat(locale, { dateStyle: "medium", timeStyle: "short", timeZone }).format(date);
}
console.log(formatInstant("2026-09-05T12:00:00Z", "en", "Africa/Casablanca"));

How to trace this lesson

Write down the exact inputs used by Maps, Sets, and Dates.
Predict each returned value and observable effect before running the example.
Mark the first boundary where invalid or missing data could enter.
Verify the ordinary, empty, invalid, and threshold cases independently.

Common mistakes and corrections

Parsing an ambiguous date string assumes rules that may differ across formats, time zones, and runtimes.: Make the Map rule explicit and cover it with a focused example.
Changing several parts of the example before explaining the original result.: Make one change at a time and compare it with a written prediction.
Testing only the demonstration's happy path.: Add missing, invalid, empty, and boundary inputs that exercise the stated contract.

PRACTICE LADDER

Move from recognition to independent work

1
Use Map when keys are dynamic values
2
Use Set for membership and uniqueness
3
Format dates with Intl rather than manual strings
4
Aggregate attempts with Map, deduplicate completions with Set, and format a timestamp for a named locale.

Complete these in order. The final step should work without copying the lesson example; use the runner and lab below to test it.

Core rule

Applied boundary

RUNNABLE EXAMPLE

Change one assumption at a time

Predict the output, run the example, then change one input and one boundary in the Maps, Sets, and Dates example. Explain every changed result before continuing.

const attemptsByLesson = new Map();
for (const slug of ["arrays", "dom", "arrays"]) {
  attemptsByLesson.set(slug, (attemptsByLesson.get(slug) ?? 0) + 1);
}
const completed = new Set(["arrays", "dom", "arrays"]);
console.log({ attempts: [...attemptsByLesson], completed: [...completed] });

const attemptsByLesson = new Map();
for (const slug of ["arrays", "dom", "arrays"]) {
  attemptsByLesson.set(slug, (attemptsByLesson.get(slug) ?? 0) + 1);
}
const completed = new Set(["arrays", "dom", "arrays"]);
console.log({ attempts: [...attemptsByLesson], completed: [...completed] });

Press Run to execute your code.

DEBUGGING CHALLENGE

Locate the first incorrect value

Predict the failure and write your repair before revealing the explanation.

const counts = {};
counts[courseObject] = 1;

Reveal repair and explanation

const counts = new Map();
counts.set(courseObject, 1);

Object property keys are strings or symbols; Map preserves an object itself as the key.

INDEPENDENT LAB

Build without copying the example

Aggregate attempts with Map, deduplicate completions with Set, and format a timestamp for a named locale.

// Define small functions before composing the complete solution.
// Aggregate attempts with Map, deduplicate completions with Set, and format a timestamp for a named locale.

// Define small functions before composing the complete solution.
// Aggregate attempts with Map, deduplicate completions with Set, and format a timestamp for a named locale.

Press Run to execute your code.

Self-review checklist Use Map when keys are dynamic values Use Set for membership and uniqueness Format dates with Intl rather than manual stringsWhat did you predict, observe, and change?

KNOWLEDGE CHECK

Explain the rule, not only the syntax

1. Which collection preserves an object as a key without string conversion? Map Array String

2. Which evidence best demonstrates mastery of Maps, Sets, and Dates? A prediction, boundary tests, and an explained result A copied snippet with no changes One successful happy-path run

Loading saved work…

Code and answers save automatically. Guest work stays on this device; signed-in work syncs to your account. The runner is isolated, blocks network access, and stops long-running console programs.

1. JavaScript Foundations

2. Functions and Collections

3. Objects and Structured Data

4. Browser Interfaces

5. Async and Reliable Applications

6. Application Engineering