| 1 | <!doctype html> |
| 2 | <html lang="en"> |
| 3 | <head> |
| 4 | <meta charset="utf-8"> |
| 5 | <meta name="viewport" content="width=device-width,initial-scale=1"> |
| 6 | <title>JavaScript Cheat Sheet</title> |
| 7 | <style> |
| 8 | :root{--bg:#0a0904;--panel:#15130a;--panel2:#1b180d;--text:#f8f6e9;--muted:#b9b39a;--line:#3a3420;--accent:#f7df1e;--accent2:#fff07a;--blue:#61dafb;--warn:#ffcc66;--shadow:0 16px 42px rgba(0,0,0,.34)} |
| 9 | *{box-sizing:border-box}html{scroll-behavior:smooth} |
| 10 | body{margin:0;background:radial-gradient(circle at 15% 0,rgba(247,223,30,.12),transparent 30rem),radial-gradient(circle at 90% 0,rgba(97,218,251,.08),transparent 30rem),var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif} |
| 11 | .hero{max-width:1500px;margin:auto;padding:48px 24px 26px} |
| 12 | .badge{display:inline-block;border:1px solid rgba(247,223,30,.38);background:rgba(247,223,30,.08);color:var(--accent2);padding:7px 10px;border-radius:999px;font:800 12px ui-monospace,monospace;letter-spacing:.08em} |
| 13 | h1{font-size:clamp(40px,7vw,82px);line-height:.94;letter-spacing:-.055em;margin:18px 0} |
| 14 | .hero p{max-width:980px;color:var(--muted);font-size:18px;line-height:1.6} |
| 15 | .stats{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px} |
| 16 | .stat{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:11px 15px;box-shadow:var(--shadow)}.stat b{color:var(--accent2);font-family:ui-monospace,monospace} |
| 17 | .toolbar{position:sticky;top:0;z-index:20;background:rgba(10,9,4,.9);backdrop-filter:blur(16px);border-block:1px solid var(--line)} |
| 18 | .toolbarin{max-width:1500px;margin:auto;padding:13px 24px;display:flex;gap:10px} |
| 19 | #search{flex:1;min-width:0;background:#121006;border:1px solid #4b4328;border-radius:12px;color:white;padding:13px 15px;font-size:15px;outline:none} |
| 20 | #search:focus{border-color:var(--accent)}.toolbtn{border:1px solid #4b4328;background:#171408;color:var(--text);border-radius:11px;padding:11px 13px;font-weight:800;cursor:pointer} |
| 21 | .note{max-width:1500px;margin:20px auto 0;padding:0 24px}.notebox{border:1px solid rgba(97,218,251,.35);background:rgba(97,218,251,.07);border-radius:14px;padding:13px 15px;color:#d8f4fb;font-size:13px} |
| 22 | .layout{max-width:1500px;margin:auto;padding:22px 24px 42px;display:grid;grid-template-columns:280px 1fr;gap:22px} |
| 23 | nav{position:sticky;top:76px;align-self:start;max-height:calc(100vh - 96px);overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:13px} |
| 24 | nav strong{display:block;color:var(--accent2);font:800 11px ui-monospace,monospace;padding:5px 9px 9px;letter-spacing:.08em} |
| 25 | nav a{display:block;color:var(--muted);text-decoration:none;padding:7px 9px;border-radius:8px;font-size:12px}nav a:hover{background:#211d0e;color:white} |
| 26 | .section{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:rgba(21,19,10,.95);margin-bottom:17px;box-shadow:var(--shadow)} |
| 27 | .sectionhead{width:100%;display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;border:0;background:linear-gradient(#1e1a0f,#151208);color:white;padding:18px 20px;text-align:left;cursor:pointer;font-size:20px;font-weight:900} |
| 28 | .sectionhead small{font:700 11px ui-monospace,monospace;color:var(--muted)}.sectionhead b{transition:.15s}.section.collapsed .sectionhead b{transform:rotate(-90deg)} |
| 29 | .body{padding:15px}.section.collapsed .body{display:none} |
| 30 | .grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px} |
| 31 | .card{background:var(--panel2);border:1px solid #3b3420;border-radius:14px;padding:13px;min-width:0}.card:hover{border-color:#6e6335}.card.warning{border-color:rgba(255,204,102,.35)} |
| 32 | .cmdrow{display:flex;gap:10px;align-items:flex-start}pre{margin:0;flex:1;white-space:pre-wrap;word-break:break-word} |
| 33 | code{color:var(--accent2);font:800 13px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace} |
| 34 | .copy{border:1px solid rgba(247,223,30,.32);background:#211e07;color:var(--accent2);border-radius:8px;padding:5px 8px;font:800 10px ui-monospace,monospace;cursor:pointer} |
| 35 | .card p{margin:8px 0 0;color:var(--muted);font-size:13px;line-height:1.45} |
| 36 | .hidden{display:none!important} |
| 37 | footer{max-width:1500px;margin:auto;padding:0 24px 38px;color:#807a64;font-size:12px} |
| 38 | @media(max-width:1000px){.layout{grid-template-columns:1fr}nav{position:static;max-height:none;display:flex;gap:5px;overflow:auto;white-space:nowrap}nav strong{display:none}nav a{display:inline-block}} |
| 39 | @media(max-width:720px){.grid{grid-template-columns:1fr}.hero,.layout,.toolbarin,.note{padding-left:14px;padding-right:14px}.sectionhead{grid-template-columns:1fr auto}.sectionhead small{display:none}} |
| 40 | @media print{.toolbar,nav,.copy{display:none!important}body{background:white;color:black}.layout{display:block;max-width:none}.card{background:white;border:1px solid #bbb}code{color:black}.card p{color:#333}} |
| 41 | </style> |
| 42 | </head> |
| 43 | <body> |
| 44 | <header class="hero"> |
| 45 | <span class="badge">JAVASCRIPT MEGA REFERENCE</span> |
| 46 | <h1>JavaScript<br>Cheat Sheet</h1> |
| 47 | <p>A massive searchable, copy-ready JavaScript reference covering core syntax, arrays, objects, classes, promises, async/await, DOM, events, browser APIs, Node.js, npm, testing, regex, modules, and more.</p> |
| 48 | <div class="stats"><div class="stat"><b>395</b> commands & snippets</div><div class="stat"><b>42</b> sections</div><div class="stat"><b>1</b> standalone HTML file</div></div> |
| 49 | </header> |
| 50 | |
| 51 | <div class="toolbar"><div class="toolbarin"> |
| 52 | <input id="search" type="search" placeholder="Search JavaScript syntax, APIs, browser topics, Node.js, or npm…"> |
| 53 | <button class="toolbtn" id="expand">Expand All</button> |
| 54 | <button class="toolbtn" id="collapse">Collapse All</button> |
| 55 | </div></div> |
| 56 | |
| 57 | <div class="note"><div class="notebox"><b>JavaScript note:</b> This sheet covers both modern browser JavaScript and Node.js. A few APIs depend on browser or Node version, and commands marked with ⚠ can delete files or data.</div></div> |
| 58 | |
| 59 | <div class="layout"> |
| 60 | <nav><strong>JUMP TO SECTION</strong><a href="#basics---syntax">Basics & Syntax</a><a href="#numbers---operators">Numbers & Operators</a><a href="#strings---template-literals">Strings & Template Literals</a><a href="#arrays">Arrays</a><a href="#array-methods">Array Methods</a><a href="#objects">Objects</a><a href="#destructuring---spread">Destructuring & Spread</a><a href="#conditionals">Conditionals</a><a href="#loops">Loops</a><a href="#functions">Functions</a><a href="#scope---closures">Scope & Closures</a><a href="#classes---oop">Classes & OOP</a><a href="#prototypes">Prototypes</a><a href="#errors---exceptions">Errors & Exceptions</a><a href="#promises">Promises</a><a href="#async---await">Async / Await</a><a href="#fetch-api">Fetch API</a><a href="#json">JSON</a><a href="#dates---time">Dates & Time</a><a href="#regular-expressions">Regular Expressions</a><a href="#sets---maps">Sets & Maps</a><a href="#iterators---generators">Iterators & Generators</a><a href="#modules">Modules</a><a href="#dom-selection">DOM Selection</a><a href="#dom-manipulation">DOM Manipulation</a><a href="#events">Events</a><a href="#forms">Forms</a><a href="#browser-storage">Browser Storage</a><a href="#timers">Timers</a><a href="#browser-apis">Browser APIs</a><a href="#node-js-basics">Node.js Basics</a><a href="#node-js-file-system">Node.js File System</a><a href="#node-js-path---url">Node.js Path & URL</a><a href="#node-js-http">Node.js HTTP</a><a href="#npm">npm</a><a href="#package-json">package.json</a><a href="#testing">Testing</a><a href="#web-components">Web Components</a><a href="#canvas">Canvas</a><a href="#intl-formatting">Intl Formatting</a><a href="#useful-one-liners">Useful One-Liners</a><a href="#common-pitfalls">Common Pitfalls</a></nav> |
| 61 | <main><section class="section" id="basics---syntax"><button class="sectionhead" aria-expanded="true"><span>Basics & Syntax</span><small>17 snippets</small><b>▾</b></button><div class="body"><div class="grid"><article class="card" data-search="basics & syntax console.log('hello, world!'); print to the console."><div class="cmdrow"><pre><code>console.log('Hello, world!');</code></pre><button class="copy" data-copy="console.log('Hello, world!');">COPY</button></div><p>Print to the console.</p></article><article class="card" data-search="basics & syntax let age = 18; declare a block-scoped variable."><div class="cmdrow"><pre><code>let age = 18;</code></pre><button class="copy" data-copy="let age = 18;">COPY</button></div><p>Declare a block-scoped variable.</p></article><article class="card" data-search="basics & syntax const name = 'ada'; declare a block-scoped constant."><div class="cmdrow"><pre><code>const name = 'Ada';</code></pre><button class="copy" data-copy="const name = 'Ada';">COPY</button></div><p>Declare a block-scoped constant.</p></article><article class="card" data-search="basics & syntax var legacy = true; declare a function-scoped variable; generally prefer let/const."><div class="cmdrow"><pre><code>var legacy = true;</code></pre><button class="copy" data-copy="var legacy = true;">COPY</button></div><p>Declare a function-scoped variable; generally prefer let/const.</p></article><article class="card" data-search="basics & syntax let nothing = null; represent an intentional empty value."><div class="cmdrow"><pre><code>let nothing = null;</code></pre><button class="copy" data-copy="let nothing = null;">COPY</button></div><p>Represent an intentional empty value.</p></article><article class="card" data-search="basics & syntax let missing; declare a variable whose value is undefined."><div class="cmdrow"><pre><code>let missing;</code></pre><button class="copy" data-copy="let missing;">COPY</button></div><p>Declare a variable whose value is undefined.</p></article><article class="card" data-search="basics & syntax typeof value return a string describing a value's type."><div class="cmdrow"><pre><code>typeof value</code></pre><button class="copy" data-copy="typeof value">COPY</button></div><p>Return a string describing a value's type.</p></article><article class="card" data-search="basics & syntax number('42') convert text to a number."><div class="cmdrow"><pre><code>Number('42')</code></pre><button class="copy" data-copy="Number('42')">COPY</button></div><p>Convert text to a number.</p></article><article class="card" data-search="basics & syntax string(123) convert a value to text."><div class="cmdrow"><pre><code>String(123)</code></pre><button class="copy" data-copy="String(123)">COPY</button></div><p>Convert a value to text.</p></article><article class="card" data-search="basics & syntax boolean(value) convert a value to true/false."><div class="cmdrow"><pre><code>Boolean(value)</code></pre><button class="copy" data-copy="Boolean(value)">COPY</button></div><p>Convert a value to true/false.</p></article><article class="card" data-search="basics & syntax parseint('42', 10) parse an integer."><div class="cmdrow"><pre><code>parseInt('42', 10)</code></pre><button class="copy" data-copy="parseInt('42', 10)">COPY</button></div><p>Parse an integer.</p></article><article class="card" data-search="basics & syntax parsefloat('3.14') parse a floating-point number."><div class="cmdrow"><pre><code>parseFloat('3.14')</code></pre><button class="copy" data-copy="parseFloat('3.14')">COPY</button></div><p>Parse a floating-point number.</p></article><article class="card" data-search="basics & syntax number.isnan(value) check specifically for nan."><div class="cmdrow"><pre><code>Number.isNaN(value)</code></pre><button class="copy" data-copy="Number.isNaN(value)">COPY</button></div><p>Check specifically for NaN.</p></article><article class="card" data-search="basics & syntax const x = 1, y = 2; declare multiple variables."><div class="cmdrow"><pre><code>const x = 1, y = 2;</code></pre><button class="copy" data-copy="const x = 1, y = 2;">COPY</button></div><p>Declare multiple variables.</p></article><article class="card" data-search="basics & syntax [a, b] = [b, a]; swap two variables using destructuring."><div class="cmdrow"><pre><code>[a, b] = [b, a];</code></pre><button class="copy" data-copy="[a, b] = [b, a];">COPY</button></div><p>Swap two variables using destructuring.</p></article><article class="card" data-search="basics & syntax // comment single-line comment."><div class="cmdrow"><pre><code>// comment</code></pre><button class="copy" data-copy="// comment">COPY</button></div><p>Single-line comment.</p></article><article class="card" data-search="basics & syntax /* multi-line comment */ block comment."><div class="cmdrow"><pre><code>/* multi-line comment */</code></pre><button class="copy" data-copy="/* multi-line comment */">COPY</button></div><p>Block comment.</p></article></div></div></section><section class="section" id="numbers---operators"><button class="sectionhead" aria-expanded="true"><span>Numbers & Operators</span><small>25 snippets</small><b>▾</b></button><div class="body"><div class="grid"><article class="card" data-search="numbers & operators 7 + 3 addition."><div class="cmdrow"><pre><code>7 + 3</code></pre><button class="copy" data-copy="7 + 3">COPY</button></div><p>Addition.</p></article><article class="card" data-search="numbers & operators 7 - 3 subtraction."><div class="cmdrow"><pre><code>7 - 3</code></pre><button class="copy" data-copy="7 - 3">COPY</button></div><p>Subtraction.</p></article><article class="card" data-search="numbers & operators 7 * 3 multiplication."><div class="cmdrow"><pre><code>7 * 3</code></pre><button class="copy" data-copy="7 * 3">COPY</button></div><p>Multiplication.</p></article><article class="card" data-search="numbers & operators 7 / 3 division."><div class="cmdrow"><pre><code>7 / 3</code></pre><button class="copy" data-copy="7 / 3">COPY</button></div><p>Division.</p></article><article class="card" data-search="numbers & operators 7 % 3 remainder."><div class="cmdrow"><pre><code>7 % 3</code></pre><button class="copy" data-copy="7 % 3">COPY</button></div><p>Remainder.</p></article><article class="card" data-search="numbers & operators 2 ** 8 exponentiation."><div class="cmdrow"><pre><code>2 ** 8</code></pre><button class="copy" data-copy="2 ** 8">COPY</button></div><p>Exponentiation.</p></article><article class="card" data-search="numbers & operators x += 1 add using compound assignment."><div class="cmdrow"><pre><code>x += 1</code></pre><button class="copy" data-copy="x += 1">COPY</button></div><p>Add using compound assignment.</p></article><article class="card" data-search="numbers & operators x *= 2 multiply using compound assignment."><div class="cmdrow"><pre><code>x *= 2</code></pre><button class="copy" data-copy="x *= 2">COPY</button></div><p>Multiply using compound assignment.</p></article><article class="card" data-search="numbers & operators a === b strict equality."><div class="cmdrow"><pre><code>a === b</code></pre><button class="copy" data-copy="a === b">COPY</button></div><p>Strict equality.</p></article><article class="card" data-search="numbers & operators a !== b strict inequality."><div class="cmdrow"><pre><code>a !== b</code></pre><button class="copy" data-copy="a !== b">COPY</button></div><p>Strict inequality.</p></article><article class="card" data-search="numbers & operators a == b loose equality with type coercion; usually avoid."><div class="cmdrow"><pre><code>a == b</code></pre><button class="copy" data-copy="a == b">COPY</button></div><p>Loose equality with type coercion; usually avoid.</p></article><article class="card" data-search="numbers & operators a > b greater than."><div class="cmdrow"><pre><code>a > b</code></pre><button class="copy" data-copy="a > b">COPY</button></div><p>Greater than.</p></article><article class="card" data-search="numbers & operators a >= b greater than or equal."><div class="cmdrow"><pre><code>a >= b</code></pre><button class="copy" data-copy="a >= b">COPY</button></div><p>Greater than or equal.</p></article><article class="card" data-search="numbers & operators a && b logical and."><div class="cmdrow"><pre><code>a && b</code></pre><button class="copy" data-copy="a && b">COPY</button></div><p>Logical AND.</p></article><article class="card" data-search="numbers & operators a || b logical or."><div class="cmdrow"><pre><code>a || b</code></pre><button class="copy" data-copy="a || b">COPY</button></div><p>Logical OR.</p></article><article class="card" data-search="numbers & operators !a logical not."><div class="cmdrow"><pre><code>!a</code></pre><button class="copy" data-copy="!a">COPY</button></div><p>Logical NOT.</p></article><article class="card" data-search="numbers & operators a ?? b nullish coalescing."><div class="cmdrow"><pre><code>a ?? b</code></pre><button class="copy" data-copy="a ?? b">COPY</button></div><p>Nullish coalescing.</p></article><article class="card" data-search="numbers & operators condition ? yes : no ternary conditional."><div class="cmdrow"><pre><code>condition ? yes : no</code></pre><button class="copy" data-copy="condition ? yes : no">COPY</button></div><p>Ternary conditional.</p></article><article class="card" data-search="numbers & operators math.abs(-8) absolute value."><div class="cmdrow"><pre><code>Math.abs(-8)</code></pre><button class="copy" data-copy="Math.abs(-8)">COPY</button></div><p>Absolute value.</p></article><article class="card" data-search="numbers & operators math.round(3.6) round to nearest integer."><div class="cmdrow"><pre><code>Math.round(3.6)</code></pre><button class="copy" data-copy="Math.round(3.6)">COPY</button></div><p>Round to nearest integer.</p></article><article class="card" data-search="numbers & operators math.floor(3.9) round down."><div class="cmdrow"><pre><code>Math.floor(3.9)</code></pre><button class="copy" data-copy="Math.floor(3.9)">COPY</button></div><p>Round down.</p></article><article class="card" data-search="numbers & operators math.ceil(3.1) round up."><div class="cmdrow"><pre><code>Math.ceil(3.1)</code></pre><button class="copy" data-copy="Math.ceil(3.1)">COPY</button></div><p>Round up.</p></article><article class="card" data-search="numbers & operators math.max(...nums) maximum value."><div class="cmdrow"><pre><code>Math.max(...nums)</code></pre><button class="copy" data-copy="Math.max(...nums)">COPY</button></div><p>Maximum value.</p></article><article class="card" data-search="numbers & operators math.min(...nums) minimum value."><div class="cmdrow"><pre><code>Math.min(...nums)</code></pre><button class="copy" data-copy="Math.min(...nums)">COPY</button></div><p>Minimum value.</p></article><article class="card" data-search="numbers & operators math.random() pseudo-random number from 0 inclusive to 1 exclusive."><div class="cmdrow"><pre><code>Math.random()</code></pre><button class="copy" data-copy="Math.random()">COPY</button></div><p>Pseudo-random number from 0 inclusive to 1 exclusive.</p></article></div></div></section><section class="section" id="strings---template-literals"><button class="sectionhead" aria-expanded="true"><span>Strings & Template Literals</span><small>23 snippets</small><b>▾</b></button><div class="body"><div class="grid"><article class="card" data-search="strings & template literals const text = 'hello'; create a string."><div class="cmdrow"><pre><code>const text = 'hello';</code></pre><button class="copy" data-copy="const text = 'hello';">COPY</button></div><p>Create a string.</p></article><article class="card" data-search="strings & template literals const text = "hello"; create a string with double quotes."><div class="cmdrow"><pre><code>const text = "hello";</code></pre><button class="copy" data-copy="const text = "hello";">COPY</button></div><p>Create a string with double quotes.</p></article><article class="card" data-search="strings & template literals const text = `hello`; create a template literal."><div class="cmdrow"><pre><code>const text = `hello`;</code></pre><button class="copy" data-copy="const text = `hello`;">COPY</button></div><p>Create a template literal.</p></article><article class="card" data-search="strings & template literals text.length get string length."><div class="cmdrow"><pre><code>text.length</code></pre><button class="copy" data-copy="text.length">COPY</button></div><p>Get string length.</p></article><article class="card" data-search="strings & template literals text[0] get first character."><div class="cmdrow"><pre><code>text[0]</code></pre><button class="copy" data-copy="text[0]">COPY</button></div><p>Get first character.</p></article><article class="card" data-search="strings & template literals text.at(-1) get last character."><div class="cmdrow"><pre><code>text.at(-1)</code></pre><button class="copy" data-copy="text.at(-1)">COPY</button></div><p>Get last character.</p></article><article class="card" data-search="strings & template literals text.slice(1, 4) extract part of a string."><div class="cmdrow"><pre><code>text.slice(1, 4)</code></pre><button class="copy" data-copy="text.slice(1, 4)">COPY</button></div><p>Extract part of a string.</p></article><article class="card" data-search="strings & template literals text.substring(1, 4) extract substring."><div class="cmdrow"><pre><code>text.substring(1, 4)</code></pre><button class="copy" data-copy="text.substring(1, 4)">COPY</button></div><p>Extract substring.</p></article><article class="card" data-search="strings & template literals text.touppercase() convert to uppercase."><div class="cmdrow"><pre><code>text.toUpperCase()</code></pre><button class="copy" data-copy="text.toUpperCase()">COPY</button></div><p>Convert to uppercase.</p></article><article class="card" data-search="strings & template literals text.tolowercase() convert to lowercase."><div class="cmdrow"><pre><code>text.toLowerCase()</code></pre><button class="copy" data-copy="text.toLowerCase()">COPY</button></div><p>Convert to lowercase.</p></article><article class="card" data-search="strings & template literals text.trim() remove leading/trailing whitespace."><div class="cmdrow"><pre><code>text.trim()</code></pre><button class="copy" data-copy="text.trim()">COPY</button></div><p>Remove leading/trailing whitespace.</p></article><article class="card" data-search="strings & template literals text.trimstart() remove leading whitespace."><div class="cmdrow"><pre><code>text.trimStart()</code></pre><button class="copy" data-copy="text.trimStart()">COPY</button></div><p>Remove leading whitespace.</p></article><article class="card" data-search="strings & template literals text.trimend() remove trailing whitespace."><div class="cmdrow"><pre><code>text.trimEnd()</code></pre><button class="copy" data-copy="text.trimEnd()">COPY</button></div><p>Remove trailing whitespace.</p></article><article class="card" data-search="strings & template literals text.includes('cat') check substring presence."><div class="cmdrow"><pre><code>text.includes('cat')</code></pre><button class="copy" data-copy="text.includes('cat')">COPY</button></div><p>Check substring presence.</p></article><article class="card" data-search="strings & template literals text.startswith('pre') check prefix."><div class="cmdrow"><pre><code>text.startsWith('pre')</code></pre><button class="copy" data-copy="text.startsWith('pre')">COPY</button></div><p>Check prefix.</p></article><article class="card" data-search="strings & template literals text.endswith('.txt') check suffix."><div class="cmdrow"><pre><code>text.endsWith('.txt')</code></pre><button class="copy" data-copy="text.endsWith('.txt')">COPY</button></div><p>Check suffix.</p></article><article class="card" data-search="strings & template literals text.indexof('cat') find substring index."><div class="cmdrow"><pre><code>text.indexOf('cat')</code></pre><button class="copy" data-copy="text.indexOf('cat')">COPY</button></div><p>Find substring index.</p></article><article class="card" data-search="strings & template literals text.replace('old', 'new') replace first match."><div class="cmdrow"><pre><code>text.replace('old', 'new')</code></pre><button class="copy" data-copy="text.replace('old', 'new')">COPY</button></div><p>Replace first match.</p></article><article class="card" data-search="strings & template literals text.replaceall('old', 'new') replace all literal matches."><div class="cmdrow"><pre><code>text.replaceAll('old', 'new')</code></pre><button class="copy" data-copy="text.replaceAll('old', 'new')">COPY</button></div><p>Replace all literal matches.</p></article><article class="card" data-search="strings & template literals text.split(',') split into an array."><div class="cmdrow"><pre><code>text.split(',')</code></pre><button class="copy" data-copy="text.split(',')">COPY</button></div><p>Split into an array.</p></article><article class="card" data-search="strings & template literals items.join(', ') join array items into a string."><div class="cmdrow"><pre><code>items.join(', ')</code></pre><button class="copy" data-copy="items.join(', ')">COPY</button></div><p>Join array items into a string.</p></article><article class="card" data-search="strings & template literals `hello ${name}` interpolate values with a template literal."><div class="cmdrow"><pre><code>`Hello ${name}`</code></pre><button class="copy" data-copy="`Hello ${name}`">COPY</button></div><p>Interpolate values with a template literal.</p></article><article class="card" data-search="strings & template literals `${price.tofixed(2)}` format a number inside a template literal."><div class="cmdrow"><pre><code>`${price.toFixed(2)}`</code></pre><button class="copy" data-copy="`${price.toFixed(2)}`">COPY</button></div><p>Format a number inside a template literal.</p></article></div></div></section><section class="section" id="arrays"><button class="sectionhead" aria-expanded="true"><span>Arrays</span><small>22 snippets</small><b>▾</b></button><div class="body"><div class="grid"><article class="card" data-search="arrays const items = [1, 2, 3]; create an array."><div class="cmdrow"><pre><code>const items = [1, 2, 3];</code></pre><button class="copy" data-copy="const items = [1, 2, 3];">COPY</button></div><p>Create an array.</p></article><article class="card" data-search="arrays items[0] get first item."><div class="cmdrow"><pre><code>items[0]</code></pre><button class="copy" data-copy="items[0]">COPY</button></div><p>Get first item.</p></article><article class="card" data-search="arrays items.at(-1) get last item."><div class="cmdrow"><pre><code>items.at(-1)</code></pre><button class="copy" data-copy="items.at(-1)">COPY</button></div><p>Get last item.</p></article><article class="card" data-search="arrays items.length get array length."><div class="cmdrow"><pre><code>items.length</code></pre><button class="copy" data-copy="items.length">COPY</button></div><p>Get array length.</p></article><article class="card" data-search="arrays items.push(4) append an item."><div class="cmdrow"><pre><code>items.push(4)</code></pre><button class="copy" data-copy="items.push(4)">COPY</button></div><p>Append an item.</p></article><article class="card" data-search="arrays items.pop() remove and return the last item."><div class="cmdrow"><pre><code>items.pop()</code></pre><button class="copy" data-copy="items.pop()">COPY</button></div><p>Remove and return the last item.</p></article><article class="card" data-search="arrays items.unshift(0) add an item to the beginning."><div class="cmdrow"><pre><code>items.unshift(0)</code></pre><button class="copy" data-copy="items.unshift(0)">COPY</button></div><p>Add an item to the beginning.</p></article><article class="card" data-search="arrays items.shift() remove and return the first item."><div class="cmdrow"><pre><code>items.shift()</code></pre><button class="copy" data-copy="items.shift()">COPY</button></div><p>Remove and return the first item.</p></article><article class="card" data-search="arrays items.slice(1, 3) copy a section of an array."><div class="cmdrow"><pre><code>items.slice(1, 3)</code></pre><button class="copy" data-copy="items.slice(1, 3)">COPY</button></div><p>Copy a section of an array.</p></article><article class="card" data-search="arrays items.splice(1, 1) remove/replace items in place."><div class="cmdrow"><pre><code>items.splice(1, 1)</code></pre><button class="copy" data-copy="items.splice(1, 1)">COPY</button></div><p>Remove/replace items in place.</p></article><article class="card" data-search="arrays items.includes('x') check membership."><div class="cmdrow"><pre><code>items.includes('x')</code></pre><button class="copy" data-copy="items.includes('x')">COPY</button></div><p>Check membership.</p></article><article class="card" data-search="arrays items.indexof('x') find first matching index."><div class="cmdrow"><pre><code>items.indexOf('x')</code></pre><button class="copy" data-copy="items.indexOf('x')">COPY</button></div><p>Find first matching index.</p></article><article class="card" data-search="arrays items.find(x => x.id === 1) find first matching element."><div class="cmdrow"><pre><code>items.find(x => x.id === 1)</code></pre><button class="copy" data-copy="items.find(x => x.id === 1)">COPY</button></div><p>Find first matching element.</p></article><article class="card" data-search="arrays items.findindex(x => x.id === 1) find first matching index."><div class="cmdrow"><pre><code>items.findIndex(x => x.id === 1)</code></pre><button class="copy" data-copy="items.findIndex(x => x.id === 1)">COPY</button></div><p>Find first matching index.</p></article><article class="card" data-search="arrays items.sort() sort in place lexicographically."><div class="cmdrow"><pre><code>items.sort()</code></pre><button class="copy" data-copy="items.sort()">COPY</button></div><p>Sort in place lexicographically.</p></article><article class="card" data-search="arrays items.sort((a, b) => a - b) sort numbers ascending."><div class="cmdrow"><pre><code>items.sort((a, b) => a - b)</code></pre><button class="copy" data-copy="items.sort((a, b) => a - b)">COPY</button></div><p>Sort numbers ascending.</p></article><article class="card" data-search="arrays items.reverse() reverse in place."><div class="cmdrow"><pre><code>items.reverse()</code></pre><button class="copy" data-copy="items.reverse()">COPY</button></div><p>Reverse in place.</p></article><article class="card" data-search="arrays [...items].sort() sort a shallow copy."><div class="cmdrow"><pre><code>[...items].sort()</code></pre><button class="copy" data-copy="[...items].sort()">COPY</button></div><p>Sort a shallow copy.</p></article><article class="card" data-search="arrays items.concat(other) concatenate arrays."><div class="cmdrow"><pre><code>items.concat(other)</code></pre><button class="copy" data-copy="items.concat(other)">COPY</button></div><p>Concatenate arrays.</p></article><article class="card" data-search="arrays [...items, ...other] concatenate with spread syntax."><div class="cmdrow"><pre><code>[...items, ...other]</code></pre><button class="copy" data-copy="[...items, ...other]">COPY</button></div><p>Concatenate with spread syntax.</p></article><article class="card" data-search="arrays array.from(iterable) create an array from an iterable."><div class="cmdrow"><pre><code>Array.from(iterable)</code></pre><button class="copy" data-copy="Array.from(iterable)">COPY</button></div><p>Create an array from an iterable.</p></article><article class="card" data-search="arrays array.isarray(value) check whether a value is an array."><div class="cmdrow"><pre><code>Array.isArray(value)</code></pre><button class="copy" data-copy="Array.isArray(value)">COPY</button></div><p>Check whether a value is an array.</p></article></div></div></section><section class="section" id="array-methods"><button class="sectionhead" aria-expanded="true"><span>Array Methods</span><small>12 snippets</small><b>▾</b></button><div class="body"><div class="grid"><article class="card" data-search="array methods items.map(x => x * 2) transform each item."><div class="cmdrow"><pre><code>items.map(x => x * 2)</code></pre><button class="copy" data-copy="items.map(x => x * 2)">COPY</button></div><p>Transform each item.</p></article><article class="card" data-search="array methods items.filter(x => x > 0) keep matching items."><div class="cmdrow"><pre><code>items.filter(x => x > 0)</code></pre><button class="copy" data-copy="items.filter(x => x > 0)">COPY</button></div><p>Keep matching items.</p></article><article class="card" data-search="array methods items.reduce((sum, x) => sum + x, 0) reduce to one value."><div class="cmdrow"><pre><code>items.reduce((sum, x) => sum + x, 0)</code></pre><button class="copy" data-copy="items.reduce((sum, x) => sum + x, 0)">COPY</button></div><p>Reduce to one value.</p></article><article class="card" data-search="array methods items.foreach(x => console.log(x)) run a function for each item."><div class="cmdrow"><pre><code>items.forEach(x => console.log(x))</code></pre><button class="copy" data-copy="items.forEach(x => console.log(x))">COPY</button></div><p>Run a function for each item.</p></article><article class="card" data-search="array methods items.some(x => x > 10) check whether any item matches."><div class="cmdrow"><pre><code>items.some(x => x > 10)</code></pre><button class="copy" data-copy="items.some(x => x > 10)">COPY</button></div><p>Check whether any item matches.</p></article><article class="card" data-search="array methods items.every(x => x > 0) check whether all items match."><div class="cmdrow"><pre><code>items.every(x => x > 0)</code></pre><button class="copy" data-copy="items.every(x => x > 0)">COPY</button></div><p>Check whether all items match.</p></article><article class="card" data-search="array methods items.flat() flatten one array level."><div class="cmdrow"><pre><code>items.flat()</code></pre><button class="copy" data-copy="items.flat()">COPY</button></div><p>Flatten one array level.</p></article><article class="card" data-search="array methods items.flat(2) flatten two levels."><div class="cmdrow"><pre><code>items.flat(2)</code></pre><button class="copy" data-copy="items.flat(2)">COPY</button></div><p>Flatten two levels.</p></article><article class="card" data-search="array methods items.flatmap(x => [x, x * 2]) map and flatten one level."><div class="cmdrow"><pre><code>items.flatMap(x => [x, x * 2])</code></pre><button class="copy" data-copy="items.flatMap(x => [x, x * 2])">COPY</button></div><p>Map and flatten one level.</p></article><article class="card" data-search="array methods items.entries() get index/value iterator."><div class="cmdrow"><pre><code>items.entries()</code></pre><button class="copy" data-copy="items.entries()">COPY</button></div><p>Get index/value iterator.</p></article><article class="card" data-search="array methods items.keys() get index iterator."><div class="cmdrow"><pre><code>items.keys()</code></pre><button class="copy" data-copy="items.keys()">COPY</button></div><p>Get index iterator.</p></article><article class="card" data-search="array methods items.values() get value iterator."><div class="cmdrow"><pre><code>items.values()</code></pre><button class="copy" data-copy="items.values()">COPY</button></div><p>Get value iterator.</p></article></div></div></section><section class="section" id="objects"><button class="sectionhead" aria-expanded="true"><span>Objects</span><small>15 snippets</small><b>▾</b></button><div class="body"><div class="grid"><article class="card" data-search="objects const user = { name: 'ada', age: 18 }; create an object."><div class="cmdrow"><pre><code>const user = { name: 'Ada', age: 18 };</code></pre><button class="copy" data-copy="const user = { name: 'Ada', age: 18 };">COPY</button></div><p>Create an object.</p></article><article class="card" data-search="objects user.name read a property with dot syntax."><div class="cmdrow"><pre><code>user.name</code></pre><button class="copy" data-copy="user.name">COPY</button></div><p>Read a property with dot syntax.</p></article><article class="card" data-search="objects user['name'] read a property with bracket syntax."><div class="cmdrow"><pre><code>user['name']</code></pre><button class="copy" data-copy="user['name']">COPY</button></div><p>Read a property with bracket syntax.</p></article><article class="card" data-search="objects user.email = '[email protected]'; add or update a property."><div class="cmdrow"><pre><code>user.email = '[email protected]';</code></pre><button class="copy" data-copy="user.email = '[email protected]';">COPY</button></div><p>Add or update a property.</p></article><article class="card" data-search="objects delete user.age; delete a property."><div class="cmdrow"><pre><code>delete user.age;</code></pre><button class="copy" data-copy="delete user.age;">COPY</button></div><p>Delete a property.</p></article><article class="card" data-search="objects 'name' in user check property existence."><div class="cmdrow"><pre><code>'name' in user</code></pre><button class="copy" data-copy="'name' in user">COPY</button></div><p>Check property existence.</p></article><article class="card" data-search="objects object.keys(user) get own enumerable keys."><div class="cmdrow"><pre><code>Object.keys(user)</code></pre><button class="copy" data-copy="Object.keys(user)">COPY</button></div><p>Get own enumerable keys.</p></article><article class="card" data-search="objects object.values(user) get own enumerable values."><div class="cmdrow"><pre><code>Object.values(user)</code></pre><button class="copy" data-copy="Object.values(user)">COPY</button></div><p>Get own enumerable values.</p></article><article class="card" data-search="objects object.entries(user) get key/value pairs."><div class="cmdrow"><pre><code>Object.entries(user)</code></pre><button class="copy" data-copy="Object.entries(user)">COPY</button></div><p>Get key/value pairs.</p></article><article class="card" data-search="objects object.assign({}, user) shallow-copy properties."><div class="cmdrow"><pre><code>Object.assign({}, user)</code></pre><button class="copy" data-copy="Object.assign({}, user)">COPY</button></div><p>Shallow-copy properties.</p></article><article class="card" data-search="objects const copy = { ...user }; shallow-copy with spread syntax."><div class="cmdrow"><pre><code>const copy = { ...user };</code></pre><button class="copy" data-copy="const copy = { ...user };">COPY</button></div><p>Shallow-copy with spread syntax.</p></article><article class="card" data-search="objects const merged = { ...a, ...b }; merge objects; later properties win."><div class="cmdrow"><pre><code>const merged = { ...a, ...b };</code></pre><button class="copy" data-copy="const merged = { ...a, ...b };">COPY</button></div><p>Merge objects; later properties win.</p></article><article class="card" data-search="objects object.freeze(user) prevent top-level changes."><div class="cmdrow"><pre><code>Object.freeze(user)</code></pre><button class="copy" data-copy="Object.freeze(user)">COPY</button></div><p>Prevent top-level changes.</p></article><article class="card" data-search="objects object.seal(user) prevent adding/removing properties."><div class="cmdrow"><pre><code>Object.seal(user)</code></pre><button class="copy" data-copy="Object.seal(user)">COPY</button></div><p>Prevent adding/removing properties.</p></article><article class="card" data-search="objects object.hasown(user, 'name') check own property."><div class="cmdrow"><pre><code>Object.hasOwn(user, 'name')</code></pre><button class="copy" data-copy="Object.hasOwn(user, 'name')">COPY</button></div><p>Check own property.</p></article></div></div></section><section class="section" id="destructuring---spread"><button class="sectionhead" aria-expanded="true"><span>Destructuring & Spread</span><small>8 snippets</small><b>▾</b></button><div class="body"><div class="grid"><article class="card" data-search="destructuring & spread const [a, b] = items; array destructuring."><div class="cmdrow"><pre><code>const [a, b] = items;</code></pre><button class="copy" data-copy="const [a, b] = items;">COPY</button></div><p>Array destructuring.</p></article><article class="card" data-search="destructuring & spread const [first, ...rest] = items; capture remaining array items."><div class="cmdrow"><pre><code>const [first, ...rest] = items;</code></pre><button class="copy" data-copy="const [first, ...rest] = items;">COPY</button></div><p>Capture remaining array items.</p></article><article class="card" data-search="destructuring & spread const { name, age } = user; object destructuring."><div class="cmdrow"><pre><code>const { name, age } = user;</code></pre><button class="copy" data-copy="const { name, age } = user;">COPY</button></div><p>Object destructuring.</p></article><article class="card" data-search="destructuring & spread const { name: fullname } = user; rename while destructuring."><div class="cmdrow"><pre><code>const { name: fullName } = user;</code></pre><button class="copy" data-copy="const { name: fullName } = user;">COPY</button></div><p>Rename while destructuring.</p></article><article class="card" data-search="destructuring & spread const { role = 'user' } = user; provide a default value."><div class="cmdrow"><pre><code>const { role = 'user' } = user;</code></pre><button class="copy" data-copy="const { role = 'user' } = user;">COPY</button></div><p>Provide a default value.</p></article><article class="card" data-search="destructuring & spread const copy = [...items]; shallow-copy an array."><div class="cmdrow"><pre><code>const copy = [...items];</code></pre><button class="copy" data-copy="const copy = [...items];">COPY</button></div><p>Shallow-copy an array.</p></article><article class="card" data-search="destructuring & spread const copy = { ...user }; shallow-copy an object."><div class="cmdrow"><pre><code>const copy = { ...user };</code></pre><button class="copy" data-copy="const copy = { ...user };">COPY</button></div><p>Shallow-copy an object.</p></article><article class="card" data-search="destructuring & spread func(...items) spread array items into function arguments."><div class="cmdrow"><pre><code>func(...items)</code></pre><button class="copy" data-copy="func(...items)">COPY</button></div><p>Spread array items into function arguments.</p></article></div></div></section><section class="section" id="conditionals"><button class="sectionhead" aria-expanded="true"><span>Conditionals</span><small>7 snippets</small><b>▾</b></button><div class="body"><div class="grid"><article class="card" data-search="conditionals if (x > 0) { console.log('positive'); } basic if statement."><div class="cmdrow"><pre><code>if (x > 0) { console.log('positive'); }</code></pre><button class="copy" data-copy="if (x > 0) { console.log('positive'); }">COPY</button></div><p>Basic if statement.</p></article><article class="card" data-search="conditionals if (x > 0) { } else { } if/else."><div class="cmdrow"><pre><code>if (x > 0) { } else { }</code></pre><button class="copy" data-copy="if (x > 0) { } else { }">COPY</button></div><p>if/else.</p></article><article class="card" data-search="conditionals if (x > 0) { } else if (x === 0) { } else { } if/else-if/else."><div class="cmdrow"><pre><code>if (x > 0) { } else if (x === 0) { } else { }</code></pre><button class="copy" data-copy="if (x > 0) { } else if (x === 0) { } else { }">COPY</button></div><p>if/else-if/else.</p></article><article class="card" data-search="conditionals const status = age >= 18 ? 'adult' : 'minor'; ternary expression."><div class="cmdrow"><pre><code>const status = age >= 18 ? 'adult' : 'minor';</code></pre><button class="copy" data-copy="const status = age >= 18 ? 'adult' : 'minor';">COPY</button></div><p>Ternary expression.</p></article><article class="card" data-search="conditionals switch (value) { case 'a': break; default: break; } switch statement."><div class="cmdrow"><pre><code>switch (value) { case 'a': break; default: break; }</code></pre><button class="copy" data-copy="switch (value) { case 'a': break; default: break; }">COPY</button></div><p>Switch statement.</p></article><article class="card" data-search="conditionals if (value == null) { } match null or undefined with loose null check."><div class="cmdrow"><pre><code>if (value == null) { }</code></pre><button class="copy" data-copy="if (value == null) { }">COPY</button></div><p>Match null or undefined with loose null check.</p></article><article class="card" data-search="conditionals if (!items.length) { } check for an empty array."><div class="cmdrow"><pre><code>if (!items.length) { }</code></pre><button class="copy" data-copy="if (!items.length) { }">COPY</button></div><p>Check for an empty array.</p></article></div></div></section><section class="section" id="loops"><button class="sectionhead" aria-expanded="true"><span>Loops</span><small>8 snippets</small><b>▾</b></button><div class="body"><div class="grid"><article class="card" data-search="loops for (let i = 0; i < 10; i++) { } classic for loop."><div class="cmdrow"><pre><code>for (let i = 0; i < 10; i++) { }</code></pre><button class="copy" data-copy="for (let i = 0; i < 10; i++) { }">COPY</button></div><p>Classic for loop.</p></article><article class="card" data-search="loops for (const item of items) { } loop over iterable values."><div class="cmdrow"><pre><code>for (const item of items) { }</code></pre><button class="copy" data-copy="for (const item of items) { }">COPY</button></div><p>Loop over iterable values.</p></article><article class="card" data-search="loops for (const key in object) { } loop over enumerable object keys."><div class="cmdrow"><pre><code>for (const key in object) { }</code></pre><button class="copy" data-copy="for (const key in object) { }">COPY</button></div><p>Loop over enumerable object keys.</p></article><article class="card" data-search="loops while (condition) { } repeat while condition is true."><div class="cmdrow"><pre><code>while (condition) { }</code></pre><button class="copy" data-copy="while (condition) { }">COPY</button></div><p>Repeat while condition is true.</p></article><article class="card" data-search="loops do { } while (condition); run at least once."><div class="cmdrow"><pre><code>do { } while (condition);</code></pre><button class="copy" data-copy="do { } while (condition);">COPY</button></div><p>Run at least once.</p></article><article class="card" data-search="loops break; exit the nearest loop or switch."><div class="cmdrow"><pre><code>break;</code></pre><button class="copy" data-copy="break;">COPY</button></div><p>Exit the nearest loop or switch.</p></article><article class="card" data-search="loops continue; skip to the next loop iteration."><div class="cmdrow"><pre><code>continue;</code></pre><button class="copy" data-copy="continue;">COPY</button></div><p>Skip to the next loop iteration.</p></article><article class="card" data-search="loops for (const [i, item] of items.entries()) { } loop with indexes."><div class="cmdrow"><pre><code>for (const [i, item] of items.entries()) { }</code></pre><button class="copy" data-copy="for (const [i, item] of items.entries()) { }">COPY</button></div><p>Loop with indexes.</p></article></div></div></section><section class="section" id="functions"><button class="sectionhead" aria-expanded="true"><span>Functions</span><small>8 snippets</small><b>▾</b></button><div class="body"><div class="grid"><article class="card" data-search="functions function greet(name) { return `hello ${name}`; } function declaration."><div class="cmdrow"><pre><code>function greet(name) { return `Hello ${name}`; }</code></pre><button class="copy" data-copy="function greet(name) { return `Hello ${name}`; }">COPY</button></div><p>Function declaration.</p></article><article class="card" data-search="functions const greet = function(name) { return `hello ${name}`; }; function expression."><div class="cmdrow"><pre><code>const greet = function(name) { return `Hello ${name}`; };</code></pre><button class="copy" data-copy="const greet = function(name) { return `Hello ${name}`; };">COPY</button></div><p>Function expression.</p></article><article class="card" data-search="functions const greet = name => `hello ${name}`; arrow function."><div class="cmdrow"><pre><code>const greet = name => `Hello ${name}`;</code></pre><button class="copy" data-copy="const greet = name => `Hello ${name}`;">COPY</button></div><p>Arrow function.</p></article><article class="card" data-search="functions const add = (a, b = 0) => a + b; arrow function with default parameter."><div class="cmdrow"><pre><code>const add = (a, b = 0) => a + b;</code></pre><button class="copy" data-copy="const add = (a, b = 0) => a + b;">COPY</button></div><p>Arrow function with default parameter.</p></article><article class="card" data-search="functions function sum(...nums) { return nums.reduce((a,b) => a+b, 0); } rest parameter."><div class="cmdrow"><pre><code>function sum(...nums) { return nums.reduce((a,b) => a+b, 0); }</code></pre><button class="copy" data-copy="function sum(...nums) { return nums.reduce((a,b) => a+b, 0); }">COPY</button></div><p>Rest parameter.</p></article><article class="card" data-search="functions return value; return a value."><div class="cmdrow"><pre><code>return value;</code></pre><button class="copy" data-copy="return value;">COPY</button></div><p>Return a value.</p></article><article class="card" data-search="functions function outer() { function inner() { } } nested function."><div class="cmdrow"><pre><code>function outer() { function inner() { } }</code></pre><button class="copy" data-copy="function outer() { function inner() { } }">COPY</button></div><p>Nested function.</p></article><article class="card" data-search="functions (() => console.log('run'))(); immediately invoked function expression."><div class="cmdrow"><pre><code>(() => console.log('run'))();</code></pre><button class="copy" data-copy="(() => console.log('run'))();">COPY</button></div><p>Immediately invoked function expression.</p></article></div></div></section><section class="section" id="scope---closures"><button class="sectionhead" aria-expanded="true"><span>Scope & Closures</span><small>5 snippets</small><b>▾</b></button><div class="body"><div class="grid"><article class="card" data-search="scope & closures let x = 1; block-scoped variable."><div class="cmdrow"><pre><code>let x = 1;</code></pre><button class="copy" data-copy="let x = 1;">COPY</button></div><p>Block-scoped variable.</p></article><article class="card" data-search="scope & closures const x = 1; block-scoped constant."><div class="cmdrow"><pre><code>const x = 1;</code></pre><button class="copy" data-copy="const x = 1;">COPY</button></div><p>Block-scoped constant.</p></article><article class="card" data-search="scope & closures var x = 1; function-scoped variable."><div class="cmdrow"><pre><code>var x = 1;</code></pre><button class="copy" data-copy="var x = 1;">COPY</button></div><p>Function-scoped variable.</p></article><article class="card" data-search="scope & closures function makecounter() { let n = 0; return () => ++n; } closure retaining private state."><div class="cmdrow"><pre><code>function makeCounter() { let n = 0; return () => ++n; }</code></pre><button class="copy" data-copy="function makeCounter() { let n = 0; return () => ++n; }">COPY</button></div><p>Closure retaining private state.</p></article><article class="card" data-search="scope & closures globalthis reference the global object across environments."><div class="cmdrow"><pre><code>globalThis</code></pre><button class="copy" data-copy="globalThis">COPY</button></div><p>Reference the global object across environments.</p></article></div></div></section><section class="section" id="classes---oop"><button class="sectionhead" aria-expanded="true"><span>Classes & OOP</span><small>13 snippets</small><b>▾</b></button><div class="body"><div class="grid"><article class="card" data-search="classes & oop class user { } define a class."><div class="cmdrow"><pre><code>class User { }</code></pre><button class="copy" data-copy="class User { }">COPY</button></div><p>Define a class.</p></article><article class="card" data-search="classes & oop const u = new user(); create an instance."><div class="cmdrow"><pre><code>const u = new User();</code></pre><button class="copy" data-copy="const u = new User();">COPY</button></div><p>Create an instance.</p></article><article class="card" data-search="classes & oop class user { constructor(name) { this.name = name; } } define a constructor."><div class="cmdrow"><pre><code>class User { constructor(name) { this.name = name; } }</code></pre><button class="copy" data-copy="class User { constructor(name) { this.name = name; } }">COPY</button></div><p>Define a constructor.</p></article><article class="card" data-search="classes & oop u.name access instance property."><div class="cmdrow"><pre><code>u.name</code></pre><button class="copy" data-copy="u.name">COPY</button></div><p>Access instance property.</p></article><article class="card" data-search="classes & oop class user { greet() { return this.name; } } define an instance method."><div class="cmdrow"><pre><code>class User { greet() { return this.name; } }</code></pre><button class="copy" data-copy="class User { greet() { return this.name; } }">COPY</button></div><p>Define an instance method.</p></article><article class="card" data-search="classes & oop class admin extends user { } create a subclass."><div class="cmdrow"><pre><code>class Admin extends User { }</code></pre><button class="copy" data-copy="class Admin extends User { }">COPY</button></div><p>Create a subclass.</p></article><article class="card" data-search="classes & oop super(name); call parent constructor."><div class="cmdrow"><pre><code>super(name);</code></pre><button class="copy" data-copy="super(name);">COPY</button></div><p>Call parent constructor.</p></article><article class="card" data-search="classes & oop super.greet(); call parent method."><div class="cmdrow"><pre><code>super.greet();</code></pre><button class="copy" data-copy="super.greet();">COPY</button></div><p>Call parent method.</p></article><article class="card" data-search="classes & oop static create() { return new user(); } define a static method."><div class="cmdrow"><pre><code>static create() { return new User(); }</code></pre><button class="copy" data-copy="static create() { return new User(); }">COPY</button></div><p>Define a static method.</p></article><article class="card" data-search="classes & oop get fullname() { return this.name; } define a getter."><div class="cmdrow"><pre><code>get fullName() { return this.name; }</code></pre><button class="copy" data-copy="get fullName() { return this.name; }">COPY</button></div><p>Define a getter.</p></article><article class="card" data-search="classes & oop set fullname(v) { this.name = v; } define a setter."><div class="cmdrow"><pre><code>set fullName(v) { this.name = v; }</code></pre><button class="copy" data-copy="set fullName(v) { this.name = v; }">COPY</button></div><p>Define a setter.</p></article><article class="card" data-search="classes & oop #secret = 123; define a private class field."><div class="cmdrow"><pre><code>#secret = 123;</code></pre><button class="copy" data-copy="#secret = 123;">COPY</button></div><p>Define a private class field.</p></article><article class="card" data-search="classes & oop instanceof user check prototype-based instance relationship."><div class="cmdrow"><pre><code>instanceof User</code></pre><button class="copy" data-copy="instanceof User">COPY</button></div><p>Check prototype-based instance relationship.</p></article></div></div></section><section class="section" id="prototypes"><button class="sectionhead" aria-expanded="true"><span>Prototypes</span><small>4 snippets</small><b>▾</b></button><div class="body"><div class="grid"><article class="card" data-search="prototypes object.getprototypeof(obj) get an object's prototype."><div class="cmdrow"><pre><code>Object.getPrototypeOf(obj)</code></pre><button class="copy" data-copy="Object.getPrototypeOf(obj)">COPY</button></div><p>Get an object's prototype.</p></article><article class="card" data-search="prototypes object.create(proto) create an object with a specified prototype."><div class="cmdrow"><pre><code>Object.create(proto)</code></pre><button class="copy" data-copy="Object.create(proto)">COPY</button></div><p>Create an object with a specified prototype.</p></article><article class="card" data-search="prototypes user.prototype.greet = function() { } add a method to a constructor's prototype."><div class="cmdrow"><pre><code>User.prototype.greet = function() { }</code></pre><button class="copy" data-copy="User.prototype.greet = function() { }">COPY</button></div><p>Add a method to a constructor's prototype.</p></article><article class="card" data-search="prototypes obj.hasownproperty('x') legacy own-property check."><div class="cmdrow"><pre><code>obj.hasOwnProperty('x')</code></pre><button class="copy" data-copy="obj.hasOwnProperty('x')">COPY</button></div><p>Legacy own-property check.</p></article></div></div></section><section class="section" id="errors---exceptions"><button class="sectionhead" aria-expanded="true"><span>Errors & Exceptions</span><small>7 snippets</small><b>▾</b></button><div class="body"><div class="grid"><article class="card" data-search="errors & exceptions try { risky(); } catch (err) { console.error(err); } catch an exception."><div class="cmdrow"><pre><code>try { risky(); } catch (err) { console.error(err); }</code></pre><button class="copy" data-copy="try { risky(); } catch (err) { console.error(err); }">COPY</button></div><p>Catch an exception.</p></article><article class="card" data-search="errors & exceptions try { } catch (err) { } finally { cleanup(); } always run cleanup."><div class="cmdrow"><pre><code>try { } catch (err) { } finally { cleanup(); }</code></pre><button class="copy" data-copy="try { } catch (err) { } finally { cleanup(); }">COPY</button></div><p>Always run cleanup.</p></article><article class="card" data-search="errors & exceptions throw new error('something failed'); throw a generic error."><div class="cmdrow"><pre><code>throw new Error('Something failed');</code></pre><button class="copy" data-copy="throw new Error('Something failed');">COPY</button></div><p>Throw a generic error.</p></article><article class="card" data-search="errors & exceptions throw new typeerror('expected a string'); throw a type-related error."><div class="cmdrow"><pre><code>throw new TypeError('Expected a string');</code></pre><button class="copy" data-copy="throw new TypeError('Expected a string');">COPY</button></div><p>Throw a type-related error.</p></article><article class="card" data-search="errors & exceptions err.message read error message."><div class="cmdrow"><pre><code>err.message</code></pre><button class="copy" data-copy="err.message">COPY</button></div><p>Read error message.</p></article><article class="card" data-search="errors & exceptions err.stack read stack trace when available."><div class="cmdrow"><pre><code>err.stack</code></pre><button class="copy" data-copy="err.stack">COPY</button></div><p>Read stack trace when available.</p></article><article class="card" data-search="errors & exceptions class apperror extends error { } create a custom error type."><div class="cmdrow"><pre><code>class AppError extends Error { }</code></pre><button class="copy" data-copy="class AppError extends Error { }">COPY</button></div><p>Create a custom error type.</p></article></div></div></section><section class="section" id="promises"><button class="sectionhead" aria-expanded="true"><span>Promises</span><small>9 snippets</small><b>▾</b></button><div class="body"><div class="grid"><article class="card" data-search="promises const p = promise.resolve(42); create an already-resolved promise."><div class="cmdrow"><pre><code>const p = Promise.resolve(42);</code></pre><button class="copy" data-copy="const p = Promise.resolve(42);">COPY</button></div><p>Create an already-resolved promise.</p></article><article class="card" data-search="promises const p = promise.reject(new error('fail')); create an already-rejected promise."><div class="cmdrow"><pre><code>const p = Promise.reject(new Error('fail'));</code></pre><button class="copy" data-copy="const p = Promise.reject(new Error('fail'));">COPY</button></div><p>Create an already-rejected promise.</p></article><article class="card" data-search="promises promise.then(value => console.log(value)) handle fulfillment."><div class="cmdrow"><pre><code>promise.then(value => console.log(value))</code></pre><button class="copy" data-copy="promise.then(value => console.log(value))">COPY</button></div><p>Handle fulfillment.</p></article><article class="card" data-search="promises promise.catch(err => console.error(err)) handle rejection."><div class="cmdrow"><pre><code>promise.catch(err => console.error(err))</code></pre><button class="copy" data-copy="promise.catch(err => console.error(err))">COPY</button></div><p>Handle rejection.</p></article><article class="card" data-search="promises promise.finally(() => cleanup()) run code after settle."><div class="cmdrow"><pre><code>promise.finally(() => cleanup())</code></pre><button class="copy" data-copy="promise.finally(() => cleanup())">COPY</button></div><p>Run code after settle.</p></article><article class="card" data-search="promises promise.all([p1, p2]) wait for all promises; rejects on first rejection."><div class="cmdrow"><pre><code>Promise.all([p1, p2])</code></pre><button class="copy" data-copy="Promise.all([p1, p2])">COPY</button></div><p>Wait for all promises; rejects on first rejection.</p></article><article class="card" data-search="promises promise.allsettled([p1, p2]) wait for all promises regardless of result."><div class="cmdrow"><pre><code>Promise.allSettled([p1, p2])</code></pre><button class="copy" data-copy="Promise.allSettled([p1, p2])">COPY</button></div><p>Wait for all promises regardless of result.</p></article><article class="card" data-search="promises promise.race([p1, p2]) settle with the first settled promise."><div class="cmdrow"><pre><code>Promise.race([p1, p2])</code></pre><button class="copy" data-copy="Promise.race([p1, p2])">COPY</button></div><p>Settle with the first settled promise.</p></article><article class="card" data-search="promises promise.any([p1, p2]) fulfill with the first successful promise."><div class="cmdrow"><pre><code>Promise.any([p1, p2])</code></pre><button class="copy" data-copy="Promise.any([p1, p2])">COPY</button></div><p>Fulfill with the first successful promise.</p></article></div></div></section><section class="section" id="async---await"><button class="sectionhead" aria-expanded="true"><span>Async / Await</span><small>5 snippets</small><b>▾</b></button><div class="body"><div class="grid"><article class="card" data-search="async / await async function main() { } define an async function."><div class="cmdrow"><pre><code>async function main() { }</code></pre><button class="copy" data-copy="async function main() { }">COPY</button></div><p>Define an async function.</p></article><article class="card" data-search="async / await const value = await promise; wait for a promise inside async context."><div class="cmdrow"><pre><code>const value = await promise;</code></pre><button class="copy" data-copy="const value = await promise;">COPY</button></div><p>Wait for a promise inside async context.</p></article><article class="card" data-search="async / await await fetch('/api/data'); await a network request."><div class="cmdrow"><pre><code>await fetch('/api/data');</code></pre><button class="copy" data-copy="await fetch('/api/data');">COPY</button></div><p>Await a network request.</p></article><article class="card" data-search="async / await try { await task(); } catch (err) { } handle async errors."><div class="cmdrow"><pre><code>try { await task(); } catch (err) { }</code></pre><button class="copy" data-copy="try { await task(); } catch (err) { }">COPY</button></div><p>Handle async errors.</p></article><article class="card" data-search="async / await const [a, b] = await promise.all([taska(), taskb()]); run async tasks concurrently."><div class="cmdrow"><pre><code>const [a, b] = await Promise.all([taskA(), taskB()]);</code></pre><button class="copy" data-copy="const [a, b] = await Promise.all([taskA(), taskB()]);">COPY</button></div><p>Run async tasks concurrently.</p></article></div></div></section><section class="section" id="fetch-api"><button class="sectionhead" aria-expanded="true"><span>Fetch API</span><small>10 snippets</small><b>▾</b></button><div class="body"><div class="grid"><article class="card" data-search="fetch api const res = await fetch('/api/data'); send a get request."><div class="cmdrow"><pre><code>const res = await fetch('/api/data');</code></pre><button class="copy" data-copy="const res = await fetch('/api/data');">COPY</button></div><p>Send a GET request.</p></article><article class="card" data-search="fetch api const data = await res.json(); parse json response."><div class="cmdrow"><pre><code>const data = await res.json();</code></pre><button class="copy" data-copy="const data = await res.json();">COPY</button></div><p>Parse JSON response.</p></article><article class="card" data-search="fetch api const text = await res.text(); read response as text."><div class="cmdrow"><pre><code>const text = await res.text();</code></pre><button class="copy" data-copy="const text = await res.text();">COPY</button></div><p>Read response as text.</p></article><article class="card" data-search="fetch api res.ok check 2xx response status."><div class="cmdrow"><pre><code>res.ok</code></pre><button class="copy" data-copy="res.ok">COPY</button></div><p>Check 2xx response status.</p></article><article class="card" data-search="fetch api res.status read http status code."><div class="cmdrow"><pre><code>res.status</code></pre><button class="copy" data-copy="res.status">COPY</button></div><p>Read HTTP status code.</p></article><article class="card" data-search="fetch api await fetch('/api/items', { method: 'post', headers: {'content-type':'application/json'}, body: json.stringify(data) }); post json data."><div class="cmdrow"><pre><code>await fetch('/api/items', { method: 'POST', headers: {'Content-Type':'application/json'}, body: JSON.stringify(data) });</code></pre><button class="copy" data-copy="await fetch('/api/items', { method: 'POST', headers: {'Content-Type':'application/json'}, body: JSON.stringify(data) });">COPY</button></div><p>POST JSON data.</p></article><article class="card" data-search="fetch api await fetch(url, { method: 'delete' }); send a delete request."><div class="cmdrow"><pre><code>await fetch(url, { method: 'DELETE' });</code></pre><button class="copy" data-copy="await fetch(url, { method: 'DELETE' });">COPY</button></div><p>Send a DELETE request.</p></article><article class="card" data-search="fetch api const controller = new abortcontroller(); create an abort controller."><div class="cmdrow"><pre><code>const controller = new AbortController();</code></pre><button class="copy" data-copy="const controller = new AbortController();">COPY</button></div><p>Create an abort controller.</p></article><article class="card" data-search="fetch api fetch(url, { signal: controller.signal }); attach abort signal."><div class="cmdrow"><pre><code>fetch(url, { signal: controller.signal });</code></pre><button class="copy" data-copy="fetch(url, { signal: controller.signal });">COPY</button></div><p>Attach abort signal.</p></article><article class="card" data-search="fetch api controller.abort(); cancel an in-flight fetch."><div class="cmdrow"><pre><code>controller.abort();</code></pre><button class="copy" data-copy="controller.abort();">COPY</button></div><p>Cancel an in-flight fetch.</p></article></div></div></section><section class="section" id="json"><button class="sectionhead" aria-expanded="true"><span>JSON</span><small>5 snippets</small><b>▾</b></button><div class="body"><div class="grid"><article class="card" data-search="json json.stringify(obj) convert a value to json text."><div class="cmdrow"><pre><code>JSON.stringify(obj)</code></pre><button class="copy" data-copy="JSON.stringify(obj)">COPY</button></div><p>Convert a value to JSON text.</p></article><article class="card" data-search="json json.stringify(obj, null, 2) pretty-print json."><div class="cmdrow"><pre><code>JSON.stringify(obj, null, 2)</code></pre><button class="copy" data-copy="JSON.stringify(obj, null, 2)">COPY</button></div><p>Pretty-print JSON.</p></article><article class="card" data-search="json json.parse(text) parse json text."><div class="cmdrow"><pre><code>JSON.parse(text)</code></pre><button class="copy" data-copy="JSON.parse(text)">COPY</button></div><p>Parse JSON text.</p></article><article class="card" data-search="json json.parse(text, reviver) parse json with a reviver."><div class="cmdrow"><pre><code>JSON.parse(text, reviver)</code></pre><button class="copy" data-copy="JSON.parse(text, reviver)">COPY</button></div><p>Parse JSON with a reviver.</p></article><article class="card" data-search="json json.stringify(obj, replacer) customize serialization."><div class="cmdrow"><pre><code>JSON.stringify(obj, replacer)</code></pre><button class="copy" data-copy="JSON.stringify(obj, replacer)">COPY</button></div><p>Customize serialization.</p></article></div></div></section><section class="section" id="dates---time"><button class="sectionhead" aria-expanded="true"><span>Dates & Time</span><small>10 snippets</small><b>▾</b></button><div class="body"><div class="grid"><article class="card" data-search="dates & time new date() create a date for the current time."><div class="cmdrow"><pre><code>new Date()</code></pre><button class="copy" data-copy="new Date()">COPY</button></div><p>Create a Date for the current time.</p></article><article class="card" data-search="dates & time new date('2026-09-18t12:00:00z') parse an iso-style timestamp."><div class="cmdrow"><pre><code>new Date('2026-09-18T12:00:00Z')</code></pre><button class="copy" data-copy="new Date('2026-09-18T12:00:00Z')">COPY</button></div><p>Parse an ISO-style timestamp.</p></article><article class="card" data-search="dates & time date.now() current epoch time in milliseconds."><div class="cmdrow"><pre><code>Date.now()</code></pre><button class="copy" data-copy="Date.now()">COPY</button></div><p>Current epoch time in milliseconds.</p></article><article class="card" data-search="dates & time date.getfullyear() get local year."><div class="cmdrow"><pre><code>date.getFullYear()</code></pre><button class="copy" data-copy="date.getFullYear()">COPY</button></div><p>Get local year.</p></article><article class="card" data-search="dates & time date.getmonth() get local zero-based month."><div class="cmdrow"><pre><code>date.getMonth()</code></pre><button class="copy" data-copy="date.getMonth()">COPY</button></div><p>Get local zero-based month.</p></article><article class="card" data-search="dates & time date.getdate() get local day of month."><div class="cmdrow"><pre><code>date.getDate()</code></pre><button class="copy" data-copy="date.getDate()">COPY</button></div><p>Get local day of month.</p></article><article class="card" data-search="dates & time date.toisostring() format as iso 8601 utc."><div class="cmdrow"><pre><code>date.toISOString()</code></pre><button class="copy" data-copy="date.toISOString()">COPY</button></div><p>Format as ISO 8601 UTC.</p></article><article class="card" data-search="dates & time date.tolocalestring() format using local conventions."><div class="cmdrow"><pre><code>date.toLocaleString()</code></pre><button class="copy" data-copy="date.toLocaleString()">COPY</button></div><p>Format using local conventions.</p></article><article class="card" data-search="dates & time new intl.datetimeformat('en-us').format(date) format with intl."><div class="cmdrow"><pre><code>new Intl.DateTimeFormat('en-US').format(date)</code></pre><button class="copy" data-copy="new Intl.DateTimeFormat('en-US').format(date)">COPY</button></div><p>Format with Intl.</p></article><article class="card" data-search="dates & time new intl.relativetimeformat('en').format(-1, 'day') format relative time."><div class="cmdrow"><pre><code>new Intl.RelativeTimeFormat('en').format(-1, 'day')</code></pre><button class="copy" data-copy="new Intl.RelativeTimeFormat('en').format(-1, 'day')">COPY</button></div><p>Format relative time.</p></article></div></div></section><section class="section" id="regular-expressions"><button class="sectionhead" aria-expanded="true"><span>Regular Expressions</span><small>8 snippets</small><b>▾</b></button><div class="body"><div class="grid"><article class="card" data-search="regular expressions const re = /\d+/; create a regex literal."><div class="cmdrow"><pre><code>const re = /\d+/;</code></pre><button class="copy" data-copy="const re = /\d+/;">COPY</button></div><p>Create a regex literal.</p></article><article class="card" data-search="regular expressions new regexp('\\d+') create a regex dynamically."><div class="cmdrow"><pre><code>new RegExp('\\d+')</code></pre><button class="copy" data-copy="new RegExp('\\d+')">COPY</button></div><p>Create a regex dynamically.</p></article><article class="card" data-search="regular expressions re.test(text) test whether regex matches."><div class="cmdrow"><pre><code>re.test(text)</code></pre><button class="copy" data-copy="re.test(text)">COPY</button></div><p>Test whether regex matches.</p></article><article class="card" data-search="regular expressions text.match(/\d+/g) return regex matches."><div class="cmdrow"><pre><code>text.match(/\d+/g)</code></pre><button class="copy" data-copy="text.match(/\d+/g)">COPY</button></div><p>Return regex matches.</p></article><article class="card" data-search="regular expressions text.matchall(/(\w+)/g) iterate over matches and groups."><div class="cmdrow"><pre><code>text.matchAll(/(\w+)/g)</code></pre><button class="copy" data-copy="text.matchAll(/(\w+)/g)">COPY</button></div><p>Iterate over matches and groups.</p></article><article class="card" data-search="regular expressions text.replace(/\s+/g, ' ') regex replacement."><div class="cmdrow"><pre><code>text.replace(/\s+/g, ' ')</code></pre><button class="copy" data-copy="text.replace(/\s+/g, ' ')">COPY</button></div><p>Regex replacement.</p></article><article class="card" data-search="regular expressions text.split(/[,;]/) regex split."><div class="cmdrow"><pre><code>text.split(/[,;]/)</code></pre><button class="copy" data-copy="text.split(/[,;]/)">COPY</button></div><p>Regex split.</p></article><article class="card" data-search="regular expressions re.exec(text) execute regex and return match data."><div class="cmdrow"><pre><code>re.exec(text)</code></pre><button class="copy" data-copy="re.exec(text)">COPY</button></div><p>Execute regex and return match data.</p></article></div></div></section><section class="section" id="sets---maps"><button class="sectionhead" aria-expanded="true"><span>Sets & Maps</span><small>12 snippets</small><b>▾</b></button><div class="body"><div class="grid"><article class="card" data-search="sets & maps const set = new set([1, 2, 2]); create a set with unique values."><div class="cmdrow"><pre><code>const set = new Set([1, 2, 2]);</code></pre><button class="copy" data-copy="const set = new Set([1, 2, 2]);">COPY</button></div><p>Create a set with unique values.</p></article><article class="card" data-search="sets & maps set.add(3) add a value."><div class="cmdrow"><pre><code>set.add(3)</code></pre><button class="copy" data-copy="set.add(3)">COPY</button></div><p>Add a value.</p></article><article class="card" data-search="sets & maps set.has(2) check membership."><div class="cmdrow"><pre><code>set.has(2)</code></pre><button class="copy" data-copy="set.has(2)">COPY</button></div><p>Check membership.</p></article><article class="card" data-search="sets & maps set.delete(2) delete a value."><div class="cmdrow"><pre><code>set.delete(2)</code></pre><button class="copy" data-copy="set.delete(2)">COPY</button></div><p>Delete a value.</p></article><article class="card" data-search="sets & maps set.size get set size."><div class="cmdrow"><pre><code>set.size</code></pre><button class="copy" data-copy="set.size">COPY</button></div><p>Get set size.</p></article><article class="card" data-search="sets & maps const map = new map(); create a map."><div class="cmdrow"><pre><code>const map = new Map();</code></pre><button class="copy" data-copy="const map = new Map();">COPY</button></div><p>Create a Map.</p></article><article class="card" data-search="sets & maps map.set('name', 'ada') set a key/value pair."><div class="cmdrow"><pre><code>map.set('name', 'Ada')</code></pre><button class="copy" data-copy="map.set('name', 'Ada')">COPY</button></div><p>Set a key/value pair.</p></article><article class="card" data-search="sets & maps map.get('name') read a value."><div class="cmdrow"><pre><code>map.get('name')</code></pre><button class="copy" data-copy="map.get('name')">COPY</button></div><p>Read a value.</p></article><article class="card" data-search="sets & maps map.has('name') check for a key."><div class="cmdrow"><pre><code>map.has('name')</code></pre><button class="copy" data-copy="map.has('name')">COPY</button></div><p>Check for a key.</p></article><article class="card" data-search="sets & maps map.delete('name') delete a key."><div class="cmdrow"><pre><code>map.delete('name')</code></pre><button class="copy" data-copy="map.delete('name')">COPY</button></div><p>Delete a key.</p></article><article class="card" data-search="sets & maps map.size get map size."><div class="cmdrow"><pre><code>map.size</code></pre><button class="copy" data-copy="map.size">COPY</button></div><p>Get map size.</p></article><article class="card" data-search="sets & maps object.fromentries(map) convert map entries into a plain object."><div class="cmdrow"><pre><code>Object.fromEntries(map)</code></pre><button class="copy" data-copy="Object.fromEntries(map)">COPY</button></div><p>Convert Map entries into a plain object.</p></article></div></div></section><section class="section" id="iterators---generators"><button class="sectionhead" aria-expanded="true"><span>Iterators & Generators</span><small>6 snippets</small><b>▾</b></button><div class="body"><div class="grid"><article class="card" data-search="iterators & generators items[symbol.iterator]() get an iterator."><div class="cmdrow"><pre><code>items[Symbol.iterator]()</code></pre><button class="copy" data-copy="items[Symbol.iterator]()">COPY</button></div><p>Get an iterator.</p></article><article class="card" data-search="iterators & generators iterator.next() get the next iterator result."><div class="cmdrow"><pre><code>iterator.next()</code></pre><button class="copy" data-copy="iterator.next()">COPY</button></div><p>Get the next iterator result.</p></article><article class="card" data-search="iterators & generators function* numbers() { yield 1; yield 2; } define a generator."><div class="cmdrow"><pre><code>function* numbers() { yield 1; yield 2; }</code></pre><button class="copy" data-copy="function* numbers() { yield 1; yield 2; }">COPY</button></div><p>Define a generator.</p></article><article class="card" data-search="iterators & generators yield value; yield one value from a generator."><div class="cmdrow"><pre><code>yield value;</code></pre><button class="copy" data-copy="yield value;">COPY</button></div><p>Yield one value from a generator.</p></article><article class="card" data-search="iterators & generators yield* iterable; delegate to another iterable."><div class="cmdrow"><pre><code>yield* iterable;</code></pre><button class="copy" data-copy="yield* iterable;">COPY</button></div><p>Delegate to another iterable.</p></article><article class="card" data-search="iterators & generators for (const x of numbers()) { } iterate over generator output."><div class="cmdrow"><pre><code>for (const x of numbers()) { }</code></pre><button class="copy" data-copy="for (const x of numbers()) { }">COPY</button></div><p>Iterate over generator output.</p></article></div></div></section><section class="section" id="modules"><button class="sectionhead" aria-expanded="true"><span>Modules</span><small>6 snippets</small><b>▾</b></button><div class="body"><div class="grid"><article class="card" data-search="modules export const value = 42; export a named value."><div class="cmdrow"><pre><code>export const value = 42;</code></pre><button class="copy" data-copy="export const value = 42;">COPY</button></div><p>Export a named value.</p></article><article class="card" data-search="modules export default function main() { } export a default value."><div class="cmdrow"><pre><code>export default function main() { }</code></pre><button class="copy" data-copy="export default function main() { }">COPY</button></div><p>Export a default value.</p></article><article class="card" data-search="modules import { value } from './module.js'; import a named export."><div class="cmdrow"><pre><code>import { value } from './module.js';</code></pre><button class="copy" data-copy="import { value } from './module.js';">COPY</button></div><p>Import a named export.</p></article><article class="card" data-search="modules import main from './module.js'; import a default export."><div class="cmdrow"><pre><code>import main from './module.js';</code></pre><button class="copy" data-copy="import main from './module.js';">COPY</button></div><p>Import a default export.</p></article><article class="card" data-search="modules import * as utils from './utils.js'; import all named exports as an object."><div class="cmdrow"><pre><code>import * as utils from './utils.js';</code></pre><button class="copy" data-copy="import * as utils from './utils.js';">COPY</button></div><p>Import all named exports as an object.</p></article><article class="card" data-search="modules const module = await import('./module.js'); dynamically import a module."><div class="cmdrow"><pre><code>const module = await import('./module.js');</code></pre><button class="copy" data-copy="const module = await import('./module.js');">COPY</button></div><p>Dynamically import a module.</p></article></div></div></section><section class="section" id="dom-selection"><button class="sectionhead" aria-expanded="true"><span>DOM Selection</span><small>8 snippets</small><b>▾</b></button><div class="body"><div class="grid"><article class="card" data-search="dom selection document.getelementbyid('app') select an element by id."><div class="cmdrow"><pre><code>document.getElementById('app')</code></pre><button class="copy" data-copy="document.getElementById('app')">COPY</button></div><p>Select an element by ID.</p></article><article class="card" data-search="dom selection document.queryselector('.card') select the first matching element."><div class="cmdrow"><pre><code>document.querySelector('.card')</code></pre><button class="copy" data-copy="document.querySelector('.card')">COPY</button></div><p>Select the first matching element.</p></article><article class="card" data-search="dom selection document.queryselectorall('.card') select all matching elements."><div class="cmdrow"><pre><code>document.querySelectorAll('.card')</code></pre><button class="copy" data-copy="document.querySelectorAll('.card')">COPY</button></div><p>Select all matching elements.</p></article><article class="card" data-search="dom selection element.closest('.panel') find nearest matching ancestor."><div class="cmdrow"><pre><code>element.closest('.panel')</code></pre><button class="copy" data-copy="element.closest('.panel')">COPY</button></div><p>Find nearest matching ancestor.</p></article><article class="card" data-search="dom selection element.matches('.active') check whether an element matches a selector."><div class="cmdrow"><pre><code>element.matches('.active')</code></pre><button class="copy" data-copy="element.matches('.active')">COPY</button></div><p>Check whether an element matches a selector.</p></article><article class="card" data-search="dom selection element.parentelement get parent element."><div class="cmdrow"><pre><code>element.parentElement</code></pre><button class="copy" data-copy="element.parentElement">COPY</button></div><p>Get parent element.</p></article><article class="card" data-search="dom selection element.children get child elements."><div class="cmdrow"><pre><code>element.children</code></pre><button class="copy" data-copy="element.children">COPY</button></div><p>Get child elements.</p></article><article class="card" data-search="dom selection element.firstelementchild get first child element."><div class="cmdrow"><pre><code>element.firstElementChild</code></pre><button class="copy" data-copy="element.firstElementChild">COPY</button></div><p>Get first child element.</p></article></div></div></section><section class="section" id="dom-manipulation"><button class="sectionhead" aria-expanded="true"><span>DOM Manipulation</span><small>14 snippets</small><b>▾</b></button><div class="body"><div class="grid"><article class="card" data-search="dom manipulation document.createelement('div') create an element."><div class="cmdrow"><pre><code>document.createElement('div')</code></pre><button class="copy" data-copy="document.createElement('div')">COPY</button></div><p>Create an element.</p></article><article class="card" data-search="dom manipulation element.textcontent = 'hello'; set text safely."><div class="cmdrow"><pre><code>element.textContent = 'Hello';</code></pre><button class="copy" data-copy="element.textContent = 'Hello';">COPY</button></div><p>Set text safely.</p></article><article class="card" data-search="dom manipulation element.innerhtml = '<b>hello</b>'; set html markup; avoid with untrusted content."><div class="cmdrow"><pre><code>element.innerHTML = '<b>Hello</b>';</code></pre><button class="copy" data-copy="element.innerHTML = '<b>Hello</b>';">COPY</button></div><p>Set HTML markup; avoid with untrusted content.</p></article><article class="card" data-search="dom manipulation element.append(child) append nodes or text."><div class="cmdrow"><pre><code>element.append(child)</code></pre><button class="copy" data-copy="element.append(child)">COPY</button></div><p>Append nodes or text.</p></article><article class="card" data-search="dom manipulation element.prepend(child) prepend nodes or text."><div class="cmdrow"><pre><code>element.prepend(child)</code></pre><button class="copy" data-copy="element.prepend(child)">COPY</button></div><p>Prepend nodes or text.</p></article><article class="card" data-search="dom manipulation element.remove() remove an element."><div class="cmdrow"><pre><code>element.remove()</code></pre><button class="copy" data-copy="element.remove()">COPY</button></div><p>Remove an element.</p></article><article class="card" data-search="dom manipulation element.replacewith(newelement) replace an element."><div class="cmdrow"><pre><code>element.replaceWith(newElement)</code></pre><button class="copy" data-copy="element.replaceWith(newElement)">COPY</button></div><p>Replace an element.</p></article><article class="card" data-search="dom manipulation element.setattribute('title', 'info') set an attribute."><div class="cmdrow"><pre><code>element.setAttribute('title', 'Info')</code></pre><button class="copy" data-copy="element.setAttribute('title', 'Info')">COPY</button></div><p>Set an attribute.</p></article><article class="card" data-search="dom manipulation element.getattribute('title') read an attribute."><div class="cmdrow"><pre><code>element.getAttribute('title')</code></pre><button class="copy" data-copy="element.getAttribute('title')">COPY</button></div><p>Read an attribute.</p></article><article class="card" data-search="dom manipulation element.removeattribute('title') remove an attribute."><div class="cmdrow"><pre><code>element.removeAttribute('title')</code></pre><button class="copy" data-copy="element.removeAttribute('title')">COPY</button></div><p>Remove an attribute.</p></article><article class="card" data-search="dom manipulation element.classlist.add('active') add a class."><div class="cmdrow"><pre><code>element.classList.add('active')</code></pre><button class="copy" data-copy="element.classList.add('active')">COPY</button></div><p>Add a class.</p></article><article class="card" data-search="dom manipulation element.classlist.remove('active') remove a class."><div class="cmdrow"><pre><code>element.classList.remove('active')</code></pre><button class="copy" data-copy="element.classList.remove('active')">COPY</button></div><p>Remove a class.</p></article><article class="card" data-search="dom manipulation element.classlist.toggle('active') toggle a class."><div class="cmdrow"><pre><code>element.classList.toggle('active')</code></pre><button class="copy" data-copy="element.classList.toggle('active')">COPY</button></div><p>Toggle a class.</p></article><article class="card" data-search="dom manipulation element.style.display = 'none'; set an inline style."><div class="cmdrow"><pre><code>element.style.display = 'none';</code></pre><button class="copy" data-copy="element.style.display = 'none';">COPY</button></div><p>Set an inline style.</p></article></div></div></section><section class="section" id="events"><button class="sectionhead" aria-expanded="true"><span>Events</span><small>9 snippets</small><b>▾</b></button><div class="body"><div class="grid"><article class="card" data-search="events button.addeventlistener('click', handler); listen for click events."><div class="cmdrow"><pre><code>button.addEventListener('click', handler);</code></pre><button class="copy" data-copy="button.addEventListener('click', handler);">COPY</button></div><p>Listen for click events.</p></article><article class="card" data-search="events element.removeeventlistener('click', handler); remove an event listener."><div class="cmdrow"><pre><code>element.removeEventListener('click', handler);</code></pre><button class="copy" data-copy="element.removeEventListener('click', handler);">COPY</button></div><p>Remove an event listener.</p></article><article class="card" data-search="events event.preventdefault(); prevent default browser behavior."><div class="cmdrow"><pre><code>event.preventDefault();</code></pre><button class="copy" data-copy="event.preventDefault();">COPY</button></div><p>Prevent default browser behavior.</p></article><article class="card" data-search="events event.stoppropagation(); stop event bubbling."><div class="cmdrow"><pre><code>event.stopPropagation();</code></pre><button class="copy" data-copy="event.stopPropagation();">COPY</button></div><p>Stop event bubbling.</p></article><article class="card" data-search="events event.target element that originally triggered the event."><div class="cmdrow"><pre><code>event.target</code></pre><button class="copy" data-copy="event.target">COPY</button></div><p>Element that originally triggered the event.</p></article><article class="card" data-search="events event.currenttarget element whose handler is currently running."><div class="cmdrow"><pre><code>event.currentTarget</code></pre><button class="copy" data-copy="event.currentTarget">COPY</button></div><p>Element whose handler is currently running.</p></article><article class="card" data-search="events document.addeventlistener('domcontentloaded', () => { }); run when the dom is ready."><div class="cmdrow"><pre><code>document.addEventListener('DOMContentLoaded', () => { });</code></pre><button class="copy" data-copy="document.addEventListener('DOMContentLoaded', () => { });">COPY</button></div><p>Run when the DOM is ready.</p></article><article class="card" data-search="events form.addeventlistener('submit', event => { event.preventdefault(); }); handle form submission."><div class="cmdrow"><pre><code>form.addEventListener('submit', event => { event.preventDefault(); });</code></pre><button class="copy" data-copy="form.addEventListener('submit', event => { event.preventDefault(); });">COPY</button></div><p>Handle form submission.</p></article><article class="card" data-search="events input.addeventlistener('input', event => console.log(event.target.value)); react to text input."><div class="cmdrow"><pre><code>input.addEventListener('input', event => console.log(event.target.value));</code></pre><button class="copy" data-copy="input.addEventListener('input', event => console.log(event.target.value));">COPY</button></div><p>React to text input.</p></article></div></div></section><section class="section" id="forms"><button class="sectionhead" aria-expanded="true"><span>Forms</span><small>8 snippets</small><b>▾</b></button><div class="body"><div class="grid"><article class="card" data-search="forms input.value read an input's value."><div class="cmdrow"><pre><code>input.value</code></pre><button class="copy" data-copy="input.value">COPY</button></div><p>Read an input's value.</p></article><article class="card" data-search="forms checkbox.checked read checkbox state."><div class="cmdrow"><pre><code>checkbox.checked</code></pre><button class="copy" data-copy="checkbox.checked">COPY</button></div><p>Read checkbox state.</p></article><article class="card" data-search="forms select.value read selected option value."><div class="cmdrow"><pre><code>select.value</code></pre><button class="copy" data-copy="select.value">COPY</button></div><p>Read selected option value.</p></article><article class="card" data-search="forms new formdata(form) collect form fields."><div class="cmdrow"><pre><code>new FormData(form)</code></pre><button class="copy" data-copy="new FormData(form)">COPY</button></div><p>Collect form fields.</p></article><article class="card" data-search="forms object.fromentries(new formdata(form)) convert form fields to a plain object."><div class="cmdrow"><pre><code>Object.fromEntries(new FormData(form))</code></pre><button class="copy" data-copy="Object.fromEntries(new FormData(form))">COPY</button></div><p>Convert form fields to a plain object.</p></article><article class="card" data-search="forms form.reset() reset form controls."><div class="cmdrow"><pre><code>form.reset()</code></pre><button class="copy" data-copy="form.reset()">COPY</button></div><p>Reset form controls.</p></article><article class="card" data-search="forms input.setcustomvalidity('invalid value') set custom validation message."><div class="cmdrow"><pre><code>input.setCustomValidity('Invalid value')</code></pre><button class="copy" data-copy="input.setCustomValidity('Invalid value')">COPY</button></div><p>Set custom validation message.</p></article><article class="card" data-search="forms form.checkvalidity() check html form validity."><div class="cmdrow"><pre><code>form.checkValidity()</code></pre><button class="copy" data-copy="form.checkValidity()">COPY</button></div><p>Check HTML form validity.</p></article></div></div></section><section class="section" id="browser-storage"><button class="sectionhead" aria-expanded="true"><span>Browser Storage</span><small>8 snippets</small><b>▾</b></button><div class="body"><div class="grid"><article class="card" data-search="browser storage localstorage.setitem('theme', 'dark') store persistent string data."><div class="cmdrow"><pre><code>localStorage.setItem('theme', 'dark')</code></pre><button class="copy" data-copy="localStorage.setItem('theme', 'dark')">COPY</button></div><p>Store persistent string data.</p></article><article class="card" data-search="browser storage localstorage.getitem('theme') read persistent data."><div class="cmdrow"><pre><code>localStorage.getItem('theme')</code></pre><button class="copy" data-copy="localStorage.getItem('theme')">COPY</button></div><p>Read persistent data.</p></article><article class="card" data-search="browser storage localstorage.removeitem('theme') remove one item."><div class="cmdrow"><pre><code>localStorage.removeItem('theme')</code></pre><button class="copy" data-copy="localStorage.removeItem('theme')">COPY</button></div><p>Remove one item.</p></article><article class="card" data-search="browser storage localstorage.clear() clear all local storage for the origin."><div class="cmdrow"><pre><code>localStorage.clear()</code></pre><button class="copy" data-copy="localStorage.clear()">COPY</button></div><p>Clear all local storage for the origin.</p></article><article class="card" data-search="browser storage sessionstorage.setitem('token', 'x') store session-only string data."><div class="cmdrow"><pre><code>sessionStorage.setItem('token', 'x')</code></pre><button class="copy" data-copy="sessionStorage.setItem('token', 'x')">COPY</button></div><p>Store session-only string data.</p></article><article class="card" data-search="browser storage sessionstorage.getitem('token') read session data."><div class="cmdrow"><pre><code>sessionStorage.getItem('token')</code></pre><button class="copy" data-copy="sessionStorage.getItem('token')">COPY</button></div><p>Read session data.</p></article><article class="card" data-search="browser storage json.parse(localstorage.getitem('settings') || '{}') load json-like settings."><div class="cmdrow"><pre><code>JSON.parse(localStorage.getItem('settings') || '{}')</code></pre><button class="copy" data-copy="JSON.parse(localStorage.getItem('settings') || '{}')">COPY</button></div><p>Load JSON-like settings.</p></article><article class="card" data-search="browser storage localstorage.setitem('settings', json.stringify(settings)) store structured data as json."><div class="cmdrow"><pre><code>localStorage.setItem('settings', JSON.stringify(settings))</code></pre><button class="copy" data-copy="localStorage.setItem('settings', JSON.stringify(settings))">COPY</button></div><p>Store structured data as JSON.</p></article></div></div></section><section class="section" id="timers"><button class="sectionhead" aria-expanded="true"><span>Timers</span><small>6 snippets</small><b>▾</b></button><div class="body"><div class="grid"><article class="card" data-search="timers settimeout(() => console.log('later'), 1000) run once after a delay."><div class="cmdrow"><pre><code>setTimeout(() => console.log('later'), 1000)</code></pre><button class="copy" data-copy="setTimeout(() => console.log('later'), 1000)">COPY</button></div><p>Run once after a delay.</p></article><article class="card" data-search="timers cleartimeout(id) cancel a timeout."><div class="cmdrow"><pre><code>clearTimeout(id)</code></pre><button class="copy" data-copy="clearTimeout(id)">COPY</button></div><p>Cancel a timeout.</p></article><article class="card" data-search="timers setinterval(() => tick(), 1000) run repeatedly."><div class="cmdrow"><pre><code>setInterval(() => tick(), 1000)</code></pre><button class="copy" data-copy="setInterval(() => tick(), 1000)">COPY</button></div><p>Run repeatedly.</p></article><article class="card" data-search="timers clearinterval(id) cancel an interval."><div class="cmdrow"><pre><code>clearInterval(id)</code></pre><button class="copy" data-copy="clearInterval(id)">COPY</button></div><p>Cancel an interval.</p></article><article class="card" data-search="timers queuemicrotask(() => task()) queue a microtask."><div class="cmdrow"><pre><code>queueMicrotask(() => task())</code></pre><button class="copy" data-copy="queueMicrotask(() => task())">COPY</button></div><p>Queue a microtask.</p></article><article class="card" data-search="timers requestanimationframe(() => draw()) schedule browser animation work."><div class="cmdrow"><pre><code>requestAnimationFrame(() => draw())</code></pre><button class="copy" data-copy="requestAnimationFrame(() => draw())">COPY</button></div><p>Schedule browser animation work.</p></article></div></div></section><section class="section" id="browser-apis"><button class="sectionhead" aria-expanded="true"><span>Browser APIs</span><small>8 snippets</small><b>▾</b></button><div class="body"><div class="grid"><article class="card" data-search="browser apis navigator.useragent read browser user-agent string."><div class="cmdrow"><pre><code>navigator.userAgent</code></pre><button class="copy" data-copy="navigator.userAgent">COPY</button></div><p>Read browser user-agent string.</p></article><article class="card" data-search="browser apis navigator.clipboard.writetext('hello') copy text to clipboard with permission."><div class="cmdrow"><pre><code>navigator.clipboard.writeText('hello')</code></pre><button class="copy" data-copy="navigator.clipboard.writeText('hello')">COPY</button></div><p>Copy text to clipboard with permission.</p></article><article class="card" data-search="browser apis location.href current page url."><div class="cmdrow"><pre><code>location.href</code></pre><button class="copy" data-copy="location.href">COPY</button></div><p>Current page URL.</p></article><article class="card" data-search="browser apis location.reload() reload the page."><div class="cmdrow"><pre><code>location.reload()</code></pre><button class="copy" data-copy="location.reload()">COPY</button></div><p>Reload the page.</p></article><article class="card" data-search="browser apis history.back() go back in browser history."><div class="cmdrow"><pre><code>history.back()</code></pre><button class="copy" data-copy="history.back()">COPY</button></div><p>Go back in browser history.</p></article><article class="card" data-search="browser apis history.pushstate({}, '', '/new-path') add a history entry without full navigation."><div class="cmdrow"><pre><code>history.pushState({}, '', '/new-path')</code></pre><button class="copy" data-copy="history.pushState({}, '', '/new-path')">COPY</button></div><p>Add a history entry without full navigation.</p></article><article class="card" data-search="browser apis new url('https://example.com/path?x=1') create a url object."><div class="cmdrow"><pre><code>new URL('https://example.com/path?x=1')</code></pre><button class="copy" data-copy="new URL('https://example.com/path?x=1')">COPY</button></div><p>Create a URL object.</p></article><article class="card" data-search="browser apis new urlsearchparams(location.search) parse query parameters."><div class="cmdrow"><pre><code>new URLSearchParams(location.search)</code></pre><button class="copy" data-copy="new URLSearchParams(location.search)">COPY</button></div><p>Parse query parameters.</p></article></div></div></section><section class="section" id="node-js-basics"><button class="sectionhead" aria-expanded="true"><span>Node.js Basics</span><small>8 snippets</small><b>▾</b></button><div class="body"><div class="grid"><article class="card" data-search="node.js basics console.log(process.version) show node.js version."><div class="cmdrow"><pre><code>console.log(process.version)</code></pre><button class="copy" data-copy="console.log(process.version)">COPY</button></div><p>Show Node.js version.</p></article><article class="card" data-search="node.js basics console.log(process.argv) read command-line arguments."><div class="cmdrow"><pre><code>console.log(process.argv)</code></pre><button class="copy" data-copy="console.log(process.argv)">COPY</button></div><p>Read command-line arguments.</p></article><article class="card" data-search="node.js basics process.env.node_env read an environment variable."><div class="cmdrow"><pre><code>process.env.NODE_ENV</code></pre><button class="copy" data-copy="process.env.NODE_ENV">COPY</button></div><p>Read an environment variable.</p></article><article class="card" data-search="node.js basics process.cwd() get current working directory."><div class="cmdrow"><pre><code>process.cwd()</code></pre><button class="copy" data-copy="process.cwd()">COPY</button></div><p>Get current working directory.</p></article><article class="card" data-search="node.js basics process.chdir('/tmp') change working directory."><div class="cmdrow"><pre><code>process.chdir('/tmp')</code></pre><button class="copy" data-copy="process.chdir('/tmp')">COPY</button></div><p>Change working directory.</p></article><article class="card" data-search="node.js basics process.exit(0) exit the process."><div class="cmdrow"><pre><code>process.exit(0)</code></pre><button class="copy" data-copy="process.exit(0)">COPY</button></div><p>Exit the process.</p></article><article class="card" data-search="node.js basics __dirname current module directory in commonjs."><div class="cmdrow"><pre><code>__dirname</code></pre><button class="copy" data-copy="__dirname">COPY</button></div><p>Current module directory in CommonJS.</p></article><article class="card" data-search="node.js basics __filename current file path in commonjs."><div class="cmdrow"><pre><code>__filename</code></pre><button class="copy" data-copy="__filename">COPY</button></div><p>Current file path in CommonJS.</p></article></div></div></section><section class="section" id="node-js-file-system"><button class="sectionhead" aria-expanded="true"><span>Node.js File System</span><small>9 snippets</small><b>▾</b></button><div class="body"><div class="grid"><article class="card" data-search="node.js file system const fs = require('fs'); import fs in commonjs."><div class="cmdrow"><pre><code>const fs = require('fs');</code></pre><button class="copy" data-copy="const fs = require('fs');">COPY</button></div><p>Import fs in CommonJS.</p></article><article class="card" data-search="node.js file system import fs from 'node:fs'; import fs in esm."><div class="cmdrow"><pre><code>import fs from 'node:fs';</code></pre><button class="copy" data-copy="import fs from 'node:fs';">COPY</button></div><p>Import fs in ESM.</p></article><article class="card" data-search="node.js file system fs.readfilesync('file.txt', 'utf8') read a file synchronously."><div class="cmdrow"><pre><code>fs.readFileSync('file.txt', 'utf8')</code></pre><button class="copy" data-copy="fs.readFileSync('file.txt', 'utf8')">COPY</button></div><p>Read a file synchronously.</p></article><article class="card" data-search="node.js file system fs.writefilesync('file.txt', 'hello') write a file synchronously."><div class="cmdrow"><pre><code>fs.writeFileSync('file.txt', 'hello')</code></pre><button class="copy" data-copy="fs.writeFileSync('file.txt', 'hello')">COPY</button></div><p>Write a file synchronously.</p></article><article class="card" data-search="node.js file system await fs.promises.readfile('file.txt', 'utf8') read a file asynchronously."><div class="cmdrow"><pre><code>await fs.promises.readFile('file.txt', 'utf8')</code></pre><button class="copy" data-copy="await fs.promises.readFile('file.txt', 'utf8')">COPY</button></div><p>Read a file asynchronously.</p></article><article class="card" data-search="node.js file system await fs.promises.writefile('file.txt', 'hello') write a file asynchronously."><div class="cmdrow"><pre><code>await fs.promises.writeFile('file.txt', 'hello')</code></pre><button class="copy" data-copy="await fs.promises.writeFile('file.txt', 'hello')">COPY</button></div><p>Write a file asynchronously.</p></article><article class="card" data-search="node.js file system await fs.promises.mkdir('dir', { recursive: true }) create nested directories."><div class="cmdrow"><pre><code>await fs.promises.mkdir('dir', { recursive: true })</code></pre><button class="copy" data-copy="await fs.promises.mkdir('dir', { recursive: true })">COPY</button></div><p>Create nested directories.</p></article><article class="card" data-search="node.js file system await fs.promises.readdir('.') list directory contents."><div class="cmdrow"><pre><code>await fs.promises.readdir('.')</code></pre><button class="copy" data-copy="await fs.promises.readdir('.')">COPY</button></div><p>List directory contents.</p></article><article class="card warning" data-search="node.js file system await fs.promises.rm('dir', { recursive: true, force: true }) delete a directory tree. ⚠"><div class="cmdrow"><pre><code>await fs.promises.rm('dir', { recursive: true, force: true })</code></pre><button class="copy" data-copy="await fs.promises.rm('dir', { recursive: true, force: true })">COPY</button></div><p>Delete a directory tree. ⚠</p></article></div></div></section><section class="section" id="node-js-path---url"><button class="sectionhead" aria-expanded="true"><span>Node.js Path & URL</span><small>7 snippets</small><b>▾</b></button><div class="body"><div class="grid"><article class="card" data-search="node.js path & url const path = require('path'); import path in commonjs."><div class="cmdrow"><pre><code>const path = require('path');</code></pre><button class="copy" data-copy="const path = require('path');">COPY</button></div><p>Import path in CommonJS.</p></article><article class="card" data-search="node.js path & url path.join('a', 'b', 'file.txt') join path segments."><div class="cmdrow"><pre><code>path.join('a', 'b', 'file.txt')</code></pre><button class="copy" data-copy="path.join('a', 'b', 'file.txt')">COPY</button></div><p>Join path segments.</p></article><article class="card" data-search="node.js path & url path.resolve('file.txt') resolve an absolute path."><div class="cmdrow"><pre><code>path.resolve('file.txt')</code></pre><button class="copy" data-copy="path.resolve('file.txt')">COPY</button></div><p>Resolve an absolute path.</p></article><article class="card" data-search="node.js path & url path.basename('/tmp/file.txt') get final path component."><div class="cmdrow"><pre><code>path.basename('/tmp/file.txt')</code></pre><button class="copy" data-copy="path.basename('/tmp/file.txt')">COPY</button></div><p>Get final path component.</p></article><article class="card" data-search="node.js path & url path.dirname('/tmp/file.txt') get parent directory."><div class="cmdrow"><pre><code>path.dirname('/tmp/file.txt')</code></pre><button class="copy" data-copy="path.dirname('/tmp/file.txt')">COPY</button></div><p>Get parent directory.</p></article><article class="card" data-search="node.js path & url path.extname('file.txt') get file extension."><div class="cmdrow"><pre><code>path.extname('file.txt')</code></pre><button class="copy" data-copy="path.extname('file.txt')">COPY</button></div><p>Get file extension.</p></article><article class="card" data-search="node.js path & url import.meta.url current module url in esm."><div class="cmdrow"><pre><code>import.meta.url</code></pre><button class="copy" data-copy="import.meta.url">COPY</button></div><p>Current module URL in ESM.</p></article></div></div></section><section class="section" id="node-js-http"><button class="sectionhead" aria-expanded="true"><span>Node.js HTTP</span><small>7 snippets</small><b>▾</b></button><div class="body"><div class="grid"><article class="card" data-search="node.js http import http from 'node:http'; import node http module."><div class="cmdrow"><pre><code>import http from 'node:http';</code></pre><button class="copy" data-copy="import http from 'node:http';">COPY</button></div><p>Import Node HTTP module.</p></article><article class="card" data-search="node.js http http.createserver((req, res) => { res.end('hello'); }).listen(3000); create a basic http server."><div class="cmdrow"><pre><code>http.createServer((req, res) => { res.end('Hello'); }).listen(3000);</code></pre><button class="copy" data-copy="http.createServer((req, res) => { res.end('Hello'); }).listen(3000);">COPY</button></div><p>Create a basic HTTP server.</p></article><article class="card" data-search="node.js http req.method read http method."><div class="cmdrow"><pre><code>req.method</code></pre><button class="copy" data-copy="req.method">COPY</button></div><p>Read HTTP method.</p></article><article class="card" data-search="node.js http req.url read request url."><div class="cmdrow"><pre><code>req.url</code></pre><button class="copy" data-copy="req.url">COPY</button></div><p>Read request URL.</p></article><article class="card" data-search="node.js http res.statuscode = 200; set response status."><div class="cmdrow"><pre><code>res.statusCode = 200;</code></pre><button class="copy" data-copy="res.statusCode = 200;">COPY</button></div><p>Set response status.</p></article><article class="card" data-search="node.js http res.setheader('content-type', 'application/json'); set response header."><div class="cmdrow"><pre><code>res.setHeader('Content-Type', 'application/json');</code></pre><button class="copy" data-copy="res.setHeader('Content-Type', 'application/json');">COPY</button></div><p>Set response header.</p></article><article class="card" data-search="node.js http res.end(json.stringify({ok:true})); send response body."><div class="cmdrow"><pre><code>res.end(JSON.stringify({ok:true}));</code></pre><button class="copy" data-copy="res.end(JSON.stringify({ok:true}));">COPY</button></div><p>Send response body.</p></article></div></div></section><section class="section" id="npm"><button class="sectionhead" aria-expanded="true"><span>npm</span><small>12 snippets</small><b>▾</b></button><div class="body"><div class="grid"><article class="card" data-search="npm npm init -y create a package.json with defaults."><div class="cmdrow"><pre><code>npm init -y</code></pre><button class="copy" data-copy="npm init -y">COPY</button></div><p>Create a package.json with defaults.</p></article><article class="card" data-search="npm npm install package install a dependency."><div class="cmdrow"><pre><code>npm install package</code></pre><button class="copy" data-copy="npm install package">COPY</button></div><p>Install a dependency.</p></article><article class="card" data-search="npm npm install -d package install a development dependency."><div class="cmdrow"><pre><code>npm install -D package</code></pre><button class="copy" data-copy="npm install -D package">COPY</button></div><p>Install a development dependency.</p></article><article class="card" data-search="npm npm uninstall package remove a dependency."><div class="cmdrow"><pre><code>npm uninstall package</code></pre><button class="copy" data-copy="npm uninstall package">COPY</button></div><p>Remove a dependency.</p></article><article class="card" data-search="npm npm update update dependencies within allowed version ranges."><div class="cmdrow"><pre><code>npm update</code></pre><button class="copy" data-copy="npm update">COPY</button></div><p>Update dependencies within allowed version ranges.</p></article><article class="card" data-search="npm npm outdated show outdated dependencies."><div class="cmdrow"><pre><code>npm outdated</code></pre><button class="copy" data-copy="npm outdated">COPY</button></div><p>Show outdated dependencies.</p></article><article class="card" data-search="npm npm list show installed dependency tree."><div class="cmdrow"><pre><code>npm list</code></pre><button class="copy" data-copy="npm list">COPY</button></div><p>Show installed dependency tree.</p></article><article class="card" data-search="npm npm run script run a package.json script."><div class="cmdrow"><pre><code>npm run script</code></pre><button class="copy" data-copy="npm run script">COPY</button></div><p>Run a package.json script.</p></article><article class="card" data-search="npm npm test run the test script."><div class="cmdrow"><pre><code>npm test</code></pre><button class="copy" data-copy="npm test">COPY</button></div><p>Run the test script.</p></article><article class="card" data-search="npm npm audit check dependencies for known vulnerabilities."><div class="cmdrow"><pre><code>npm audit</code></pre><button class="copy" data-copy="npm audit">COPY</button></div><p>Check dependencies for known vulnerabilities.</p></article><article class="card" data-search="npm npm audit fix apply compatible security fixes."><div class="cmdrow"><pre><code>npm audit fix</code></pre><button class="copy" data-copy="npm audit fix">COPY</button></div><p>Apply compatible security fixes.</p></article><article class="card" data-search="npm npm ci install exactly from package-lock.json for reproducible builds."><div class="cmdrow"><pre><code>npm ci</code></pre><button class="copy" data-copy="npm ci">COPY</button></div><p>Install exactly from package-lock.json for reproducible builds.</p></article></div></div></section><section class="section" id="package-json"><button class="sectionhead" aria-expanded="true"><span>package.json</span><small>5 snippets</small><b>▾</b></button><div class="body"><div class="grid"><article class="card" data-search="package.json "type": "module" treat .js files as es modules in node."><div class="cmdrow"><pre><code>"type": "module"</code></pre><button class="copy" data-copy=""type": "module"">COPY</button></div><p>Treat .js files as ES modules in Node.</p></article><article class="card" data-search="package.json "scripts": { "start": "node app.js" } define an npm start script."><div class="cmdrow"><pre><code>"scripts": { "start": "node app.js" }</code></pre><button class="copy" data-copy=""scripts": { "start": "node app.js" }">COPY</button></div><p>Define an npm start script.</p></article><article class="card" data-search="package.json "dependencies": { } runtime dependencies."><div class="cmdrow"><pre><code>"dependencies": { }</code></pre><button class="copy" data-copy=""dependencies": { }">COPY</button></div><p>Runtime dependencies.</p></article><article class="card" data-search="package.json "devdependencies": { } development-only dependencies."><div class="cmdrow"><pre><code>"devDependencies": { }</code></pre><button class="copy" data-copy=""devDependencies": { }">COPY</button></div><p>Development-only dependencies.</p></article><article class="card" data-search="package.json "engines": { "node": ">=20" } document expected node version."><div class="cmdrow"><pre><code>"engines": { "node": ">=20" }</code></pre><button class="copy" data-copy=""engines": { "node": ">=20" }">COPY</button></div><p>Document expected Node version.</p></article></div></div></section><section class="section" id="testing"><button class="sectionhead" aria-expanded="true"><span>Testing</span><small>6 snippets</small><b>▾</b></button><div class="body"><div class="grid"><article class="card" data-search="testing console.assert(x === 1, 'x should equal 1'); simple built-in assertion."><div class="cmdrow"><pre><code>console.assert(x === 1, 'x should equal 1');</code></pre><button class="copy" data-copy="console.assert(x === 1, 'x should equal 1');">COPY</button></div><p>Simple built-in assertion.</p></article><article class="card" data-search="testing import assert from 'node:assert/strict'; import node strict assertions."><div class="cmdrow"><pre><code>import assert from 'node:assert/strict';</code></pre><button class="copy" data-copy="import assert from 'node:assert/strict';">COPY</button></div><p>Import Node strict assertions.</p></article><article class="card" data-search="testing assert.equal(actual, expected); assert strict equality in node."><div class="cmdrow"><pre><code>assert.equal(actual, expected);</code></pre><button class="copy" data-copy="assert.equal(actual, expected);">COPY</button></div><p>Assert strict equality in Node.</p></article><article class="card" data-search="testing assert.deepequal(actual, expected); assert deep structural equality."><div class="cmdrow"><pre><code>assert.deepEqual(actual, expected);</code></pre><button class="copy" data-copy="assert.deepEqual(actual, expected);">COPY</button></div><p>Assert deep structural equality.</p></article><article class="card" data-search="testing node --test run node's built-in test runner."><div class="cmdrow"><pre><code>node --test</code></pre><button class="copy" data-copy="node --test">COPY</button></div><p>Run Node's built-in test runner.</p></article><article class="card" data-search="testing test('adds numbers', () => { assert.equal(1 + 1, 2); }); basic node test-runner example."><div class="cmdrow"><pre><code>test('adds numbers', () => { assert.equal(1 + 1, 2); });</code></pre><button class="copy" data-copy="test('adds numbers', () => { assert.equal(1 + 1, 2); });">COPY</button></div><p>Basic Node test-runner example.</p></article></div></div></section><section class="section" id="web-components"><button class="sectionhead" aria-expanded="true"><span>Web Components</span><small>4 snippets</small><b>▾</b></button><div class="body"><div class="grid"><article class="card" data-search="web components class myelement extends htmlelement { } define a custom element class."><div class="cmdrow"><pre><code>class MyElement extends HTMLElement { }</code></pre><button class="copy" data-copy="class MyElement extends HTMLElement { }">COPY</button></div><p>Define a custom element class.</p></article><article class="card" data-search="web components customelements.define('my-element', myelement); register a custom element."><div class="cmdrow"><pre><code>customElements.define('my-element', MyElement);</code></pre><button class="copy" data-copy="customElements.define('my-element', MyElement);">COPY</button></div><p>Register a custom element.</p></article><article class="card" data-search="web components this.attachshadow({ mode: 'open' }) create a shadow root."><div class="cmdrow"><pre><code>this.attachShadow({ mode: 'open' })</code></pre><button class="copy" data-copy="this.attachShadow({ mode: 'open' })">COPY</button></div><p>Create a shadow root.</p></article><article class="card" data-search="web components this.connectedcallback = () => { } conceptual lifecycle hook; normally define as method."><div class="cmdrow"><pre><code>this.connectedCallback = () => { }</code></pre><button class="copy" data-copy="this.connectedCallback = () => { }">COPY</button></div><p>Conceptual lifecycle hook; normally define as method.</p></article></div></div></section><section class="section" id="canvas"><button class="sectionhead" aria-expanded="true"><span>Canvas</span><small>5 snippets</small><b>▾</b></button><div class="body"><div class="grid"><article class="card" data-search="canvas const ctx = canvas.getcontext('2d'); get a 2d drawing context."><div class="cmdrow"><pre><code>const ctx = canvas.getContext('2d');</code></pre><button class="copy" data-copy="const ctx = canvas.getContext('2d');">COPY</button></div><p>Get a 2D drawing context.</p></article><article class="card" data-search="canvas ctx.fillrect(10, 10, 100, 50); draw a filled rectangle."><div class="cmdrow"><pre><code>ctx.fillRect(10, 10, 100, 50);</code></pre><button class="copy" data-copy="ctx.fillRect(10, 10, 100, 50);">COPY</button></div><p>Draw a filled rectangle.</p></article><article class="card" data-search="canvas ctx.clearrect(0, 0, canvas.width, canvas.height); clear the canvas."><div class="cmdrow"><pre><code>ctx.clearRect(0, 0, canvas.width, canvas.height);</code></pre><button class="copy" data-copy="ctx.clearRect(0, 0, canvas.width, canvas.height);">COPY</button></div><p>Clear the canvas.</p></article><article class="card" data-search="canvas ctx.filltext('hello', 20, 30); draw text."><div class="cmdrow"><pre><code>ctx.fillText('Hello', 20, 30);</code></pre><button class="copy" data-copy="ctx.fillText('Hello', 20, 30);">COPY</button></div><p>Draw text.</p></article><article class="card" data-search="canvas ctx.beginpath(); ctx.moveto(0,0); ctx.lineto(100,100); ctx.stroke(); draw a line."><div class="cmdrow"><pre><code>ctx.beginPath(); ctx.moveTo(0,0); ctx.lineTo(100,100); ctx.stroke();</code></pre><button class="copy" data-copy="ctx.beginPath(); ctx.moveTo(0,0); ctx.lineTo(100,100); ctx.stroke();">COPY</button></div><p>Draw a line.</p></article></div></div></section><section class="section" id="intl-formatting"><button class="sectionhead" aria-expanded="true"><span>Intl Formatting</span><small>4 snippets</small><b>▾</b></button><div class="body"><div class="grid"><article class="card" data-search="intl formatting new intl.numberformat('en-us').format(1234567) format a number."><div class="cmdrow"><pre><code>new Intl.NumberFormat('en-US').format(1234567)</code></pre><button class="copy" data-copy="new Intl.NumberFormat('en-US').format(1234567)">COPY</button></div><p>Format a number.</p></article><article class="card" data-search="intl formatting new intl.numberformat('en-us', { style: 'currency', currency: 'usd' }).format(19.99) format currency."><div class="cmdrow"><pre><code>new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(19.99)</code></pre><button class="copy" data-copy="new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(19.99)">COPY</button></div><p>Format currency.</p></article><article class="card" data-search="intl formatting new intl.datetimeformat('en-us').format(new date()) format a date."><div class="cmdrow"><pre><code>new Intl.DateTimeFormat('en-US').format(new Date())</code></pre><button class="copy" data-copy="new Intl.DateTimeFormat('en-US').format(new Date())">COPY</button></div><p>Format a date.</p></article><article class="card" data-search="intl formatting new intl.pluralrules('en-us').select(2) select plural category."><div class="cmdrow"><pre><code>new Intl.PluralRules('en-US').select(2)</code></pre><button class="copy" data-copy="new Intl.PluralRules('en-US').select(2)">COPY</button></div><p>Select plural category.</p></article></div></div></section><section class="section" id="useful-one-liners"><button class="sectionhead" aria-expanded="true"><span>Useful One-Liners</span><small>12 snippets</small><b>▾</b></button><div class="body"><div class="grid"><article class="card" data-search="useful one-liners const unique = [...new set(items)]; remove duplicate values."><div class="cmdrow"><pre><code>const unique = [...new Set(items)];</code></pre><button class="copy" data-copy="const unique = [...new Set(items)];">COPY</button></div><p>Remove duplicate values.</p></article><article class="card" data-search="useful one-liners const sum = nums.reduce((a, b) => a + b, 0); sum an array."><div class="cmdrow"><pre><code>const sum = nums.reduce((a, b) => a + b, 0);</code></pre><button class="copy" data-copy="const sum = nums.reduce((a, b) => a + b, 0);">COPY</button></div><p>Sum an array.</p></article><article class="card" data-search="useful one-liners const max = math.max(...nums); find maximum numeric value."><div class="cmdrow"><pre><code>const max = Math.max(...nums);</code></pre><button class="copy" data-copy="const max = Math.max(...nums);">COPY</button></div><p>Find maximum numeric value.</p></article><article class="card" data-search="useful one-liners const grouped = object.groupby(items, x => x.category); group values by key in environments supporting object.groupby."><div class="cmdrow"><pre><code>const grouped = Object.groupBy(items, x => x.category);</code></pre><button class="copy" data-copy="const grouped = Object.groupBy(items, x => x.category);">COPY</button></div><p>Group values by key in environments supporting Object.groupBy.</p></article><article class="card" data-search="useful one-liners const counts = items.reduce((m, x) => (m[x] = (m[x] || 0) + 1, m), {}); count repeated values."><div class="cmdrow"><pre><code>const counts = items.reduce((m, x) => (m[x] = (m[x] || 0) + 1, m), {});</code></pre><button class="copy" data-copy="const counts = items.reduce((m, x) => (m[x] = (m[x] || 0) + 1, m), {});">COPY</button></div><p>Count repeated values.</p></article><article class="card" data-search="useful one-liners const sorted = [...items].sort((a,b) => a.localecompare(b)); sort strings without mutating original array."><div class="cmdrow"><pre><code>const sorted = [...items].sort((a,b) => a.localeCompare(b));</code></pre><button class="copy" data-copy="const sorted = [...items].sort((a,b) => a.localeCompare(b));">COPY</button></div><p>Sort strings without mutating original array.</p></article><article class="card" data-search="useful one-liners const byid = object.fromentries(items.map(x => [x.id, x])); index objects by id."><div class="cmdrow"><pre><code>const byId = Object.fromEntries(items.map(x => [x.id, x]));</code></pre><button class="copy" data-copy="const byId = Object.fromEntries(items.map(x => [x.id, x]));">COPY</button></div><p>Index objects by ID.</p></article><article class="card" data-search="useful one-liners const first = items.find(predicate) ?? null; get first matching item or null."><div class="cmdrow"><pre><code>const first = items.find(predicate) ?? null;</code></pre><button class="copy" data-copy="const first = items.find(predicate) ?? null;">COPY</button></div><p>Get first matching item or null.</p></article><article class="card" data-search="useful one-liners const params = object.fromentries(new urlsearchparams(location.search)); convert query parameters to an object."><div class="cmdrow"><pre><code>const params = Object.fromEntries(new URLSearchParams(location.search));</code></pre><button class="copy" data-copy="const params = Object.fromEntries(new URLSearchParams(location.search));">COPY</button></div><p>Convert query parameters to an object.</p></article><article class="card" data-search="useful one-liners const sleep = ms => new promise(r => settimeout(r, ms)); create an async sleep helper."><div class="cmdrow"><pre><code>const sleep = ms => new Promise(r => setTimeout(r, ms));</code></pre><button class="copy" data-copy="const sleep = ms => new Promise(r => setTimeout(r, ms));">COPY</button></div><p>Create an async sleep helper.</p></article><article class="card" data-search="useful one-liners const clone = structuredclone(obj); deep-clone supported structured data."><div class="cmdrow"><pre><code>const clone = structuredClone(obj);</code></pre><button class="copy" data-copy="const clone = structuredClone(obj);">COPY</button></div><p>Deep-clone supported structured data.</p></article><article class="card" data-search="useful one-liners const text = ' hello world '.trim().replace(/\s+/g, ' '); normalize whitespace."><div class="cmdrow"><pre><code>const text = ' hello world '.trim().replace(/\s+/g, ' ');</code></pre><button class="copy" data-copy="const text = ' hello world '.trim().replace(/\s+/g, ' ');">COPY</button></div><p>Normalize whitespace.</p></article></div></div></section><section class="section" id="common-pitfalls"><button class="sectionhead" aria-expanded="true"><span>Common Pitfalls</span><small>10 snippets</small><b>▾</b></button><div class="body"><div class="grid"><article class="card" data-search="common pitfalls 0.1 + 0.2 === 0.3 floating-point arithmetic is approximate."><div class="cmdrow"><pre><code>0.1 + 0.2 === 0.3</code></pre><button class="copy" data-copy="0.1 + 0.2 === 0.3">COPY</button></div><p>Floating-point arithmetic is approximate.</p></article><article class="card" data-search="common pitfalls [] === [] different arrays are different object references."><div class="cmdrow"><pre><code>[] === []</code></pre><button class="copy" data-copy="[] === []">COPY</button></div><p>Different arrays are different object references.</p></article><article class="card" data-search="common pitfalls {} === {} different objects are different object references."><div class="cmdrow"><pre><code>{} === {}</code></pre><button class="copy" data-copy="{} === {}">COPY</button></div><p>Different objects are different object references.</p></article><article class="card" data-search="common pitfalls for (var i = 0; i < 3; i++) { settimeout(() => console.log(i)); } var is function-scoped; use let for per-iteration bindings."><div class="cmdrow"><pre><code>for (var i = 0; i < 3; i++) { setTimeout(() => console.log(i)); }</code></pre><button class="copy" data-copy="for (var i = 0; i < 3; i++) { setTimeout(() => console.log(i)); }">COPY</button></div><p>var is function-scoped; use let for per-iteration bindings.</p></article><article class="card" data-search="common pitfalls array(10).map(...) sparse arrays may skip callbacks; use array.from({length:10})."><div class="cmdrow"><pre><code>Array(10).map(...)</code></pre><button class="copy" data-copy="Array(10).map(...)">COPY</button></div><p>Sparse arrays may skip callbacks; use Array.from({length:10}).</p></article><article class="card" data-search="common pitfalls items.sort() default sort is lexicographic, even for numbers."><div class="cmdrow"><pre><code>items.sort()</code></pre><button class="copy" data-copy="items.sort()">COPY</button></div><p>Default sort is lexicographic, even for numbers.</p></article><article class="card" data-search="common pitfalls parseint('08') always pass a radix for clarity: parseint('08', 10)."><div class="cmdrow"><pre><code>parseInt('08')</code></pre><button class="copy" data-copy="parseInt('08')">COPY</button></div><p>Always pass a radix for clarity: parseInt('08', 10).</p></article><article class="card" data-search="common pitfalls json.stringify(undefined) top-level undefined serializes to undefined, not json text."><div class="cmdrow"><pre><code>JSON.stringify(undefined)</code></pre><button class="copy" data-copy="JSON.stringify(undefined)">COPY</button></div><p>Top-level undefined serializes to undefined, not JSON text.</p></article><article class="card" data-search="common pitfalls element.innerhtml = userinput injecting untrusted html can create xss vulnerabilities."><div class="cmdrow"><pre><code>element.innerHTML = userInput</code></pre><button class="copy" data-copy="element.innerHTML = userInput">COPY</button></div><p>Injecting untrusted HTML can create XSS vulnerabilities.</p></article><article class="card" data-search="common pitfalls await items.foreach(async item => ...) foreach does not await async callbacks; use for...of or promise.all."><div class="cmdrow"><pre><code>await items.forEach(async item => ...)</code></pre><button class="copy" data-copy="await items.forEach(async item => ...)">COPY</button></div><p>forEach does not await async callbacks; use for...of or Promise.all.</p></article></div></div></section></main> |
| 62 | </div> |
| 63 | |
| 64 | <footer>JavaScript Cheat Sheet • Browser + Node.js coverage • Search and copy controls run locally in your browser.</footer> |
| 65 | |
| 66 | <script> |
| 67 | const q=document.getElementById('search'); |
| 68 | const cards=[...document.querySelectorAll('.card')]; |
| 69 | const sections=[...document.querySelectorAll('.section')]; |
| 70 | |
| 71 | q.addEventListener('input',()=>{ |
| 72 | const s=q.value.trim().toLowerCase(); |
| 73 | cards.forEach(c=>c.classList.toggle('hidden',s&&!c.dataset.search.includes(s))); |
| 74 | sections.forEach(sec=>{ |
| 75 | const visible=sec.querySelectorAll('.card:not(.hidden)').length; |
| 76 | sec.classList.toggle('hidden',s&&visible===0); |
| 77 | if(s&&visible)sec.classList.remove('collapsed'); |
| 78 | }); |
| 79 | }); |
| 80 | |
| 81 | document.querySelectorAll('.sectionhead').forEach(b=>b.onclick=()=>{ |
| 82 | const sec=b.closest('.section'); |
| 83 | sec.classList.toggle('collapsed'); |
| 84 | b.setAttribute('aria-expanded',String(!sec.classList.contains('collapsed'))); |
| 85 | }); |
| 86 | document.getElementById('expand').onclick=()=>sections.forEach(s=>s.classList.remove('collapsed')); |
| 87 | document.getElementById('collapse').onclick=()=>sections.forEach(s=>s.classList.add('collapsed')); |
| 88 | |
| 89 | document.addEventListener('click',async e=>{ |
| 90 | const b=e.target.closest('.copy'); if(!b) return; |
| 91 | try{ |
| 92 | await navigator.clipboard.writeText(b.dataset.copy); |
| 93 | b.textContent='COPIED'; |
| 94 | setTimeout(()=>b.textContent='COPY',800); |
| 95 | }catch{ |
| 96 | b.textContent='SELECT'; |
| 97 | setTimeout(()=>b.textContent='COPY',800); |
| 98 | } |
| 99 | }); |
| 100 | </script> |
| 101 | </body> |
| 102 | </html> |
admin / JScheatsheet
Last active 2 weeks ago