global-design-skill · 🦊 MDN — API Method Block
← Gallery
✓ Baseline 2015

Array.prototype.map()

Creates a new array populated with the results of calling a provided function on every element in the calling array.

Syntax
map(callbackFn)
map(callbackFn, thisArg)
Parameters
callbackFn

A function to execute for each element in the array. Its return value is added as a single element in the new array.

thisArg optional

Value to use as this when executing callbackFn.

Return value
Array

A new array with each element being the result of the callback function. Always the same length as the source array.

Browser support
All major browsers since 2015
Cr Ff Sf Ed No
Skeleton State
Change Log
ChangeBeforeAfterPrinciple
Method name Plain h1 serif text — namespace and method name at equal weight Monospace h2 with namespace muted (--color-text-muted) and method name accented — scannability without reading operating-principles §2 (one focal point per zone — method call is the focal point)
Parameters dl/dt/dd prose list — parameter name and description at same density, hard to skim Two-column grid: name pill left, description right; optional badge below name — structure at a glance operating-principles §3 (label → value pairing); rules/11-data-tables.md → scannable parameter tables
Return value Paragraph under h2 heading — type buried in prose Highlighted row: "Array" type pill + description — return type readable in one fixation operating-principles §1 (focal point); operating-principles §4 (type as label, not prose)
Baseline badge Inline green box — good intent but same block width as content, no pill affordance Compact pill above method name — scoped to what it describes, uses success token operating-principles §5 (colour with purpose); quality-gates Gate 6 (dark mode)
Browser compat Full compatibility table with many rows/columns — accurate but noisy for common APIs 5 browser initials in green support dots — for Baseline-2015 APIs the answer is "all supported" operating-principles §2 (reduce noise; show only what changes the decision)
Dark mode Hardcoded #fff + #1b1b1b — breaks in dark mode; Before kept light-only (faithful) OKLCH tokens + success token for Baseline badge and browser dots quality-gates Gate 6 (dark mode required)
Token Legend
TokenLightDarkUsed for
--color-bgoklch(96% 0.004 258)oklch(13% 0.010 258)Page background, skeleton shimmer midpoint
--color-surfaceoklch(100% 0 0)oklch(17% 0.010 258)Card background
--color-borderoklch(90% 0.006 258)oklch(26% 0.010 258)Card border, syntax block, return row, section dividers
--color-textoklch(17% 0.012 258)oklch(94% 0.004 258)Method name
--color-text-secondaryoklch(42% 0.012 258)oklch(72% 0.008 258)Description, parameter descriptions, return description
--color-text-mutedoklch(60% 0.008 258)oklch(55% 0.006 258)Namespace prefix (Array.prototype.), subsection labels, optional badge
--color-accentoklch(52% 0.20 258)oklch(65% 0.20 258)Method name (.map()), parameter name pills, return type pill, focus rings
--color-successoklch(45% 0.15 145)oklch(70% 0.12 145)Baseline pill text, browser support dot text
--color-success-bgoklch(56% 0.17 145 / 0.12)oklch(56% 0.17 145 / 0.15)Baseline pill background, browser support dot background