<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>JavaScript Cheat Sheet</title>
<style>
: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)}
*{box-sizing:border-box}html{scroll-behavior:smooth}
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}
.hero{max-width:1500px;margin:auto;padding:48px 24px 26px}
.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}
h1{font-size:clamp(40px,7vw,82px);line-height:.94;letter-spacing:-.055em;margin:18px 0}
.hero p{max-width:980px;color:var(--muted);font-size:18px;line-height:1.6}
.stats{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.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}
.toolbar{position:sticky;top:0;z-index:20;background:rgba(10,9,4,.9);backdrop-filter:blur(16px);border-block:1px solid var(--line)}
.toolbarin{max-width:1500px;margin:auto;padding:13px 24px;display:flex;gap:10px}
#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}
#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}
.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}
.layout{max-width:1500px;margin:auto;padding:22px 24px 42px;display:grid;grid-template-columns:280px 1fr;gap:22px}
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}
nav strong{display:block;color:var(--accent2);font:800 11px ui-monospace,monospace;padding:5px 9px 9px;letter-spacing:.08em}
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}
.section{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:rgba(21,19,10,.95);margin-bottom:17px;box-shadow:var(--shadow)}
.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}
.sectionhead small{font:700 11px ui-monospace,monospace;color:var(--muted)}.sectionhead b{transition:.15s}.section.collapsed .sectionhead b{transform:rotate(-90deg)}
.body{padding:15px}.section.collapsed .body{display:none}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
.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)}
.cmdrow{display:flex;gap:10px;align-items:flex-start}pre{margin:0;flex:1;white-space:pre-wrap;word-break:break-word}
code{color:var(--accent2);font:800 13px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.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}
.card p{margin:8px 0 0;color:var(--muted);font-size:13px;line-height:1.45}
.hidden{display:none!important}
footer{max-width:1500px;margin:auto;padding:0 24px 38px;color:#807a64;font-size:12px}
@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}}
@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}}
@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}}
</style>
</head>
<body>
<header class="hero">
<span class="badge">JAVASCRIPT MEGA REFERENCE</span>
<h1>JavaScript<br>Cheat Sheet</h1>
<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>
<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>
</header>

<div class="toolbar"><div class="toolbarin">
<input id="search" type="search" placeholder="Search JavaScript syntax, APIs, browser topics, Node.js, or npm…">
<button class="toolbtn" id="expand">Expand All</button>
<button class="toolbtn" id="collapse">Collapse All</button>
</div></div>

<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>

<div class="layout">
<nav><strong>JUMP TO SECTION</strong><a href="#basics---syntax">Basics &amp; Syntax</a><a href="#numbers---operators">Numbers &amp; Operators</a><a href="#strings---template-literals">Strings &amp; 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 &amp; Spread</a><a href="#conditionals">Conditionals</a><a href="#loops">Loops</a><a href="#functions">Functions</a><a href="#scope---closures">Scope &amp; Closures</a><a href="#classes---oop">Classes &amp; OOP</a><a href="#prototypes">Prototypes</a><a href="#errors---exceptions">Errors &amp; 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 &amp; Time</a><a href="#regular-expressions">Regular Expressions</a><a href="#sets---maps">Sets &amp; Maps</a><a href="#iterators---generators">Iterators &amp; 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 &amp; 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>
<main><section class="section" id="basics---syntax"><button class="sectionhead" aria-expanded="true"><span>Basics &amp; Syntax</span><small>17 snippets</small><b>▾</b></button><div class="body"><div class="grid"><article class="card" data-search="basics &amp; syntax console.log(&#x27;hello, world!&#x27;); print to the console."><div class="cmdrow"><pre><code>console.log(&#x27;Hello, world!&#x27;);</code></pre><button class="copy" data-copy="console.log(&#x27;Hello, world!&#x27;);">COPY</button></div><p>Print to the console.</p></article><article class="card" data-search="basics &amp; 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 &amp; syntax const name = &#x27;ada&#x27;; declare a block-scoped constant."><div class="cmdrow"><pre><code>const name = &#x27;Ada&#x27;;</code></pre><button class="copy" data-copy="const name = &#x27;Ada&#x27;;">COPY</button></div><p>Declare a block-scoped constant.</p></article><article class="card" data-search="basics &amp; 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 &amp; 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 &amp; 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 &amp; syntax typeof value return a string describing a value&#x27;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&#x27;s type.</p></article><article class="card" data-search="basics &amp; syntax number(&#x27;42&#x27;) convert text to a number."><div class="cmdrow"><pre><code>Number(&#x27;42&#x27;)</code></pre><button class="copy" data-copy="Number(&#x27;42&#x27;)">COPY</button></div><p>Convert text to a number.</p></article><article class="card" data-search="basics &amp; 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 &amp; 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 &amp; syntax parseint(&#x27;42&#x27;, 10) parse an integer."><div class="cmdrow"><pre><code>parseInt(&#x27;42&#x27;, 10)</code></pre><button class="copy" data-copy="parseInt(&#x27;42&#x27;, 10)">COPY</button></div><p>Parse an integer.</p></article><article class="card" data-search="basics &amp; syntax parsefloat(&#x27;3.14&#x27;) parse a floating-point number."><div class="cmdrow"><pre><code>parseFloat(&#x27;3.14&#x27;)</code></pre><button class="copy" data-copy="parseFloat(&#x27;3.14&#x27;)">COPY</button></div><p>Parse a floating-point number.</p></article><article class="card" data-search="basics &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; Operators</span><small>25 snippets</small><b>▾</b></button><div class="body"><div class="grid"><article class="card" data-search="numbers &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; operators a &gt; b greater than."><div class="cmdrow"><pre><code>a &gt; b</code></pre><button class="copy" data-copy="a &gt; b">COPY</button></div><p>Greater than.</p></article><article class="card" data-search="numbers &amp; operators a &gt;= b greater than or equal."><div class="cmdrow"><pre><code>a &gt;= b</code></pre><button class="copy" data-copy="a &gt;= b">COPY</button></div><p>Greater than or equal.</p></article><article class="card" data-search="numbers &amp; operators a &amp;&amp; b logical and."><div class="cmdrow"><pre><code>a &amp;&amp; b</code></pre><button class="copy" data-copy="a &amp;&amp; b">COPY</button></div><p>Logical AND.</p></article><article class="card" data-search="numbers &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; Template Literals</span><small>23 snippets</small><b>▾</b></button><div class="body"><div class="grid"><article class="card" data-search="strings &amp; template literals const text = &#x27;hello&#x27;; create a string."><div class="cmdrow"><pre><code>const text = &#x27;hello&#x27;;</code></pre><button class="copy" data-copy="const text = &#x27;hello&#x27;;">COPY</button></div><p>Create a string.</p></article><article class="card" data-search="strings &amp; template literals const text = &quot;hello&quot;; create a string with double quotes."><div class="cmdrow"><pre><code>const text = &quot;hello&quot;;</code></pre><button class="copy" data-copy="const text = &quot;hello&quot;;">COPY</button></div><p>Create a string with double quotes.</p></article><article class="card" data-search="strings &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; template literals text.includes(&#x27;cat&#x27;) check substring presence."><div class="cmdrow"><pre><code>text.includes(&#x27;cat&#x27;)</code></pre><button class="copy" data-copy="text.includes(&#x27;cat&#x27;)">COPY</button></div><p>Check substring presence.</p></article><article class="card" data-search="strings &amp; template literals text.startswith(&#x27;pre&#x27;) check prefix."><div class="cmdrow"><pre><code>text.startsWith(&#x27;pre&#x27;)</code></pre><button class="copy" data-copy="text.startsWith(&#x27;pre&#x27;)">COPY</button></div><p>Check prefix.</p></article><article class="card" data-search="strings &amp; template literals text.endswith(&#x27;.txt&#x27;) check suffix."><div class="cmdrow"><pre><code>text.endsWith(&#x27;.txt&#x27;)</code></pre><button class="copy" data-copy="text.endsWith(&#x27;.txt&#x27;)">COPY</button></div><p>Check suffix.</p></article><article class="card" data-search="strings &amp; template literals text.indexof(&#x27;cat&#x27;) find substring index."><div class="cmdrow"><pre><code>text.indexOf(&#x27;cat&#x27;)</code></pre><button class="copy" data-copy="text.indexOf(&#x27;cat&#x27;)">COPY</button></div><p>Find substring index.</p></article><article class="card" data-search="strings &amp; template literals text.replace(&#x27;old&#x27;, &#x27;new&#x27;) replace first match."><div class="cmdrow"><pre><code>text.replace(&#x27;old&#x27;, &#x27;new&#x27;)</code></pre><button class="copy" data-copy="text.replace(&#x27;old&#x27;, &#x27;new&#x27;)">COPY</button></div><p>Replace first match.</p></article><article class="card" data-search="strings &amp; template literals text.replaceall(&#x27;old&#x27;, &#x27;new&#x27;) replace all literal matches."><div class="cmdrow"><pre><code>text.replaceAll(&#x27;old&#x27;, &#x27;new&#x27;)</code></pre><button class="copy" data-copy="text.replaceAll(&#x27;old&#x27;, &#x27;new&#x27;)">COPY</button></div><p>Replace all literal matches.</p></article><article class="card" data-search="strings &amp; template literals text.split(&#x27;,&#x27;) split into an array."><div class="cmdrow"><pre><code>text.split(&#x27;,&#x27;)</code></pre><button class="copy" data-copy="text.split(&#x27;,&#x27;)">COPY</button></div><p>Split into an array.</p></article><article class="card" data-search="strings &amp; template literals items.join(&#x27;, &#x27;) join array items into a string."><div class="cmdrow"><pre><code>items.join(&#x27;, &#x27;)</code></pre><button class="copy" data-copy="items.join(&#x27;, &#x27;)">COPY</button></div><p>Join array items into a string.</p></article><article class="card" data-search="strings &amp; 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 &amp; 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(&#x27;x&#x27;) check membership."><div class="cmdrow"><pre><code>items.includes(&#x27;x&#x27;)</code></pre><button class="copy" data-copy="items.includes(&#x27;x&#x27;)">COPY</button></div><p>Check membership.</p></article><article class="card" data-search="arrays items.indexof(&#x27;x&#x27;) find first matching index."><div class="cmdrow"><pre><code>items.indexOf(&#x27;x&#x27;)</code></pre><button class="copy" data-copy="items.indexOf(&#x27;x&#x27;)">COPY</button></div><p>Find first matching index.</p></article><article class="card" data-search="arrays items.find(x =&gt; x.id === 1) find first matching element."><div class="cmdrow"><pre><code>items.find(x =&gt; x.id === 1)</code></pre><button class="copy" data-copy="items.find(x =&gt; x.id === 1)">COPY</button></div><p>Find first matching element.</p></article><article class="card" data-search="arrays items.findindex(x =&gt; x.id === 1) find first matching index."><div class="cmdrow"><pre><code>items.findIndex(x =&gt; x.id === 1)</code></pre><button class="copy" data-copy="items.findIndex(x =&gt; 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) =&gt; a - b) sort numbers ascending."><div class="cmdrow"><pre><code>items.sort((a, b) =&gt; a - b)</code></pre><button class="copy" data-copy="items.sort((a, b) =&gt; 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 =&gt; x * 2) transform each item."><div class="cmdrow"><pre><code>items.map(x =&gt; x * 2)</code></pre><button class="copy" data-copy="items.map(x =&gt; x * 2)">COPY</button></div><p>Transform each item.</p></article><article class="card" data-search="array methods items.filter(x =&gt; x &gt; 0) keep matching items."><div class="cmdrow"><pre><code>items.filter(x =&gt; x &gt; 0)</code></pre><button class="copy" data-copy="items.filter(x =&gt; x &gt; 0)">COPY</button></div><p>Keep matching items.</p></article><article class="card" data-search="array methods items.reduce((sum, x) =&gt; sum + x, 0) reduce to one value."><div class="cmdrow"><pre><code>items.reduce((sum, x) =&gt; sum + x, 0)</code></pre><button class="copy" data-copy="items.reduce((sum, x) =&gt; sum + x, 0)">COPY</button></div><p>Reduce to one value.</p></article><article class="card" data-search="array methods items.foreach(x =&gt; console.log(x)) run a function for each item."><div class="cmdrow"><pre><code>items.forEach(x =&gt; console.log(x))</code></pre><button class="copy" data-copy="items.forEach(x =&gt; 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 =&gt; x &gt; 10) check whether any item matches."><div class="cmdrow"><pre><code>items.some(x =&gt; x &gt; 10)</code></pre><button class="copy" data-copy="items.some(x =&gt; x &gt; 10)">COPY</button></div><p>Check whether any item matches.</p></article><article class="card" data-search="array methods items.every(x =&gt; x &gt; 0) check whether all items match."><div class="cmdrow"><pre><code>items.every(x =&gt; x &gt; 0)</code></pre><button class="copy" data-copy="items.every(x =&gt; x &gt; 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 =&gt; [x, x * 2]) map and flatten one level."><div class="cmdrow"><pre><code>items.flatMap(x =&gt; [x, x * 2])</code></pre><button class="copy" data-copy="items.flatMap(x =&gt; [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: &#x27;ada&#x27;, age: 18 }; create an object."><div class="cmdrow"><pre><code>const user = { name: &#x27;Ada&#x27;, age: 18 };</code></pre><button class="copy" data-copy="const user = { name: &#x27;Ada&#x27;, 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[&#x27;name&#x27;] read a property with bracket syntax."><div class="cmdrow"><pre><code>user[&#x27;name&#x27;]</code></pre><button class="copy" data-copy="user[&#x27;name&#x27;]">COPY</button></div><p>Read a property with bracket syntax.</p></article><article class="card" data-search="objects user.email = &#x27;a@example.com&#x27;; add or update a property."><div class="cmdrow"><pre><code>user.email = &#x27;a@example.com&#x27;;</code></pre><button class="copy" data-copy="user.email = &#x27;a@example.com&#x27;;">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 &#x27;name&#x27; in user check property existence."><div class="cmdrow"><pre><code>&#x27;name&#x27; in user</code></pre><button class="copy" data-copy="&#x27;name&#x27; 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, &#x27;name&#x27;) check own property."><div class="cmdrow"><pre><code>Object.hasOwn(user, &#x27;name&#x27;)</code></pre><button class="copy" data-copy="Object.hasOwn(user, &#x27;name&#x27;)">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 &amp; Spread</span><small>8 snippets</small><b>▾</b></button><div class="body"><div class="grid"><article class="card" data-search="destructuring &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; spread const { role = &#x27;user&#x27; } = user; provide a default value."><div class="cmdrow"><pre><code>const { role = &#x27;user&#x27; } = user;</code></pre><button class="copy" data-copy="const { role = &#x27;user&#x27; } = user;">COPY</button></div><p>Provide a default value.</p></article><article class="card" data-search="destructuring &amp; 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 &amp; 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 &amp; 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 &gt; 0) { console.log(&#x27;positive&#x27;); } basic if statement."><div class="cmdrow"><pre><code>if (x &gt; 0) { console.log(&#x27;positive&#x27;); }</code></pre><button class="copy" data-copy="if (x &gt; 0) { console.log(&#x27;positive&#x27;); }">COPY</button></div><p>Basic if statement.</p></article><article class="card" data-search="conditionals if (x &gt; 0) { } else { } if/else."><div class="cmdrow"><pre><code>if (x &gt; 0) { } else { }</code></pre><button class="copy" data-copy="if (x &gt; 0) { } else { }">COPY</button></div><p>if/else.</p></article><article class="card" data-search="conditionals if (x &gt; 0) { } else if (x === 0) { } else { } if/else-if/else."><div class="cmdrow"><pre><code>if (x &gt; 0) { } else if (x === 0) { } else { }</code></pre><button class="copy" data-copy="if (x &gt; 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 &gt;= 18 ? &#x27;adult&#x27; : &#x27;minor&#x27;; ternary expression."><div class="cmdrow"><pre><code>const status = age &gt;= 18 ? &#x27;adult&#x27; : &#x27;minor&#x27;;</code></pre><button class="copy" data-copy="const status = age &gt;= 18 ? &#x27;adult&#x27; : &#x27;minor&#x27;;">COPY</button></div><p>Ternary expression.</p></article><article class="card" data-search="conditionals switch (value) { case &#x27;a&#x27;: break; default: break; } switch statement."><div class="cmdrow"><pre><code>switch (value) { case &#x27;a&#x27;: break; default: break; }</code></pre><button class="copy" data-copy="switch (value) { case &#x27;a&#x27;: 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 &lt; 10; i++) { } classic for loop."><div class="cmdrow"><pre><code>for (let i = 0; i &lt; 10; i++) { }</code></pre><button class="copy" data-copy="for (let i = 0; i &lt; 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 =&gt; `hello ${name}`; arrow function."><div class="cmdrow"><pre><code>const greet = name =&gt; `Hello ${name}`;</code></pre><button class="copy" data-copy="const greet = name =&gt; `Hello ${name}`;">COPY</button></div><p>Arrow function.</p></article><article class="card" data-search="functions const add = (a, b = 0) =&gt; a + b; arrow function with default parameter."><div class="cmdrow"><pre><code>const add = (a, b = 0) =&gt; a + b;</code></pre><button class="copy" data-copy="const add = (a, b = 0) =&gt; 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) =&gt; a+b, 0); } rest parameter."><div class="cmdrow"><pre><code>function sum(...nums) { return nums.reduce((a,b) =&gt; a+b, 0); }</code></pre><button class="copy" data-copy="function sum(...nums) { return nums.reduce((a,b) =&gt; 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 (() =&gt; console.log(&#x27;run&#x27;))(); immediately invoked function expression."><div class="cmdrow"><pre><code>(() =&gt; console.log(&#x27;run&#x27;))();</code></pre><button class="copy" data-copy="(() =&gt; console.log(&#x27;run&#x27;))();">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 &amp; Closures</span><small>5 snippets</small><b>▾</b></button><div class="body"><div class="grid"><article class="card" data-search="scope &amp; 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 &amp; 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 &amp; 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 &amp; closures function makecounter() { let n = 0; return () =&gt; ++n; } closure retaining private state."><div class="cmdrow"><pre><code>function makeCounter() { let n = 0; return () =&gt; ++n; }</code></pre><button class="copy" data-copy="function makeCounter() { let n = 0; return () =&gt; ++n; }">COPY</button></div><p>Closure retaining private state.</p></article><article class="card" data-search="scope &amp; 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 &amp; OOP</span><small>13 snippets</small><b>▾</b></button><div class="body"><div class="grid"><article class="card" data-search="classes &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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&#x27;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&#x27;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&#x27;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&#x27;s prototype.</p></article><article class="card" data-search="prototypes obj.hasownproperty(&#x27;x&#x27;) legacy own-property check."><div class="cmdrow"><pre><code>obj.hasOwnProperty(&#x27;x&#x27;)</code></pre><button class="copy" data-copy="obj.hasOwnProperty(&#x27;x&#x27;)">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 &amp; Exceptions</span><small>7 snippets</small><b>▾</b></button><div class="body"><div class="grid"><article class="card" data-search="errors &amp; 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 &amp; 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 &amp; exceptions throw new error(&#x27;something failed&#x27;); throw a generic error."><div class="cmdrow"><pre><code>throw new Error(&#x27;Something failed&#x27;);</code></pre><button class="copy" data-copy="throw new Error(&#x27;Something failed&#x27;);">COPY</button></div><p>Throw a generic error.</p></article><article class="card" data-search="errors &amp; exceptions throw new typeerror(&#x27;expected a string&#x27;); throw a type-related error."><div class="cmdrow"><pre><code>throw new TypeError(&#x27;Expected a string&#x27;);</code></pre><button class="copy" data-copy="throw new TypeError(&#x27;Expected a string&#x27;);">COPY</button></div><p>Throw a type-related error.</p></article><article class="card" data-search="errors &amp; 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 &amp; 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 &amp; 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(&#x27;fail&#x27;)); create an already-rejected promise."><div class="cmdrow"><pre><code>const p = Promise.reject(new Error(&#x27;fail&#x27;));</code></pre><button class="copy" data-copy="const p = Promise.reject(new Error(&#x27;fail&#x27;));">COPY</button></div><p>Create an already-rejected promise.</p></article><article class="card" data-search="promises promise.then(value =&gt; console.log(value)) handle fulfillment."><div class="cmdrow"><pre><code>promise.then(value =&gt; console.log(value))</code></pre><button class="copy" data-copy="promise.then(value =&gt; console.log(value))">COPY</button></div><p>Handle fulfillment.</p></article><article class="card" data-search="promises promise.catch(err =&gt; console.error(err)) handle rejection."><div class="cmdrow"><pre><code>promise.catch(err =&gt; console.error(err))</code></pre><button class="copy" data-copy="promise.catch(err =&gt; console.error(err))">COPY</button></div><p>Handle rejection.</p></article><article class="card" data-search="promises promise.finally(() =&gt; cleanup()) run code after settle."><div class="cmdrow"><pre><code>promise.finally(() =&gt; cleanup())</code></pre><button class="copy" data-copy="promise.finally(() =&gt; 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(&#x27;/api/data&#x27;); await a network request."><div class="cmdrow"><pre><code>await fetch(&#x27;/api/data&#x27;);</code></pre><button class="copy" data-copy="await fetch(&#x27;/api/data&#x27;);">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(&#x27;/api/data&#x27;); send a get request."><div class="cmdrow"><pre><code>const res = await fetch(&#x27;/api/data&#x27;);</code></pre><button class="copy" data-copy="const res = await fetch(&#x27;/api/data&#x27;);">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(&#x27;/api/items&#x27;, { method: &#x27;post&#x27;, headers: {&#x27;content-type&#x27;:&#x27;application/json&#x27;}, body: json.stringify(data) }); post json data."><div class="cmdrow"><pre><code>await fetch(&#x27;/api/items&#x27;, { method: &#x27;POST&#x27;, headers: {&#x27;Content-Type&#x27;:&#x27;application/json&#x27;}, body: JSON.stringify(data) });</code></pre><button class="copy" data-copy="await fetch(&#x27;/api/items&#x27;, { method: &#x27;POST&#x27;, headers: {&#x27;Content-Type&#x27;:&#x27;application/json&#x27;}, body: JSON.stringify(data) });">COPY</button></div><p>POST JSON data.</p></article><article class="card" data-search="fetch api await fetch(url, { method: &#x27;delete&#x27; }); send a delete request."><div class="cmdrow"><pre><code>await fetch(url, { method: &#x27;DELETE&#x27; });</code></pre><button class="copy" data-copy="await fetch(url, { method: &#x27;DELETE&#x27; });">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 &amp; Time</span><small>10 snippets</small><b>▾</b></button><div class="body"><div class="grid"><article class="card" data-search="dates &amp; 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 &amp; time new date(&#x27;2026-09-18t12:00:00z&#x27;) parse an iso-style timestamp."><div class="cmdrow"><pre><code>new Date(&#x27;2026-09-18T12:00:00Z&#x27;)</code></pre><button class="copy" data-copy="new Date(&#x27;2026-09-18T12:00:00Z&#x27;)">COPY</button></div><p>Parse an ISO-style timestamp.</p></article><article class="card" data-search="dates &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; time new intl.datetimeformat(&#x27;en-us&#x27;).format(date) format with intl."><div class="cmdrow"><pre><code>new Intl.DateTimeFormat(&#x27;en-US&#x27;).format(date)</code></pre><button class="copy" data-copy="new Intl.DateTimeFormat(&#x27;en-US&#x27;).format(date)">COPY</button></div><p>Format with Intl.</p></article><article class="card" data-search="dates &amp; time new intl.relativetimeformat(&#x27;en&#x27;).format(-1, &#x27;day&#x27;) format relative time."><div class="cmdrow"><pre><code>new Intl.RelativeTimeFormat(&#x27;en&#x27;).format(-1, &#x27;day&#x27;)</code></pre><button class="copy" data-copy="new Intl.RelativeTimeFormat(&#x27;en&#x27;).format(-1, &#x27;day&#x27;)">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(&#x27;\\d+&#x27;) create a regex dynamically."><div class="cmdrow"><pre><code>new RegExp(&#x27;\\d+&#x27;)</code></pre><button class="copy" data-copy="new RegExp(&#x27;\\d+&#x27;)">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, &#x27; &#x27;) regex replacement."><div class="cmdrow"><pre><code>text.replace(/\s+/g, &#x27; &#x27;)</code></pre><button class="copy" data-copy="text.replace(/\s+/g, &#x27; &#x27;)">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 &amp; Maps</span><small>12 snippets</small><b>▾</b></button><div class="body"><div class="grid"><article class="card" data-search="sets &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; maps map.set(&#x27;name&#x27;, &#x27;ada&#x27;) set a key/value pair."><div class="cmdrow"><pre><code>map.set(&#x27;name&#x27;, &#x27;Ada&#x27;)</code></pre><button class="copy" data-copy="map.set(&#x27;name&#x27;, &#x27;Ada&#x27;)">COPY</button></div><p>Set a key/value pair.</p></article><article class="card" data-search="sets &amp; maps map.get(&#x27;name&#x27;) read a value."><div class="cmdrow"><pre><code>map.get(&#x27;name&#x27;)</code></pre><button class="copy" data-copy="map.get(&#x27;name&#x27;)">COPY</button></div><p>Read a value.</p></article><article class="card" data-search="sets &amp; maps map.has(&#x27;name&#x27;) check for a key."><div class="cmdrow"><pre><code>map.has(&#x27;name&#x27;)</code></pre><button class="copy" data-copy="map.has(&#x27;name&#x27;)">COPY</button></div><p>Check for a key.</p></article><article class="card" data-search="sets &amp; maps map.delete(&#x27;name&#x27;) delete a key."><div class="cmdrow"><pre><code>map.delete(&#x27;name&#x27;)</code></pre><button class="copy" data-copy="map.delete(&#x27;name&#x27;)">COPY</button></div><p>Delete a key.</p></article><article class="card" data-search="sets &amp; 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 &amp; 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 &amp; Generators</span><small>6 snippets</small><b>▾</b></button><div class="body"><div class="grid"><article class="card" data-search="iterators &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &#x27;./module.js&#x27;; import a named export."><div class="cmdrow"><pre><code>import { value } from &#x27;./module.js&#x27;;</code></pre><button class="copy" data-copy="import { value } from &#x27;./module.js&#x27;;">COPY</button></div><p>Import a named export.</p></article><article class="card" data-search="modules import main from &#x27;./module.js&#x27;; import a default export."><div class="cmdrow"><pre><code>import main from &#x27;./module.js&#x27;;</code></pre><button class="copy" data-copy="import main from &#x27;./module.js&#x27;;">COPY</button></div><p>Import a default export.</p></article><article class="card" data-search="modules import * as utils from &#x27;./utils.js&#x27;; import all named exports as an object."><div class="cmdrow"><pre><code>import * as utils from &#x27;./utils.js&#x27;;</code></pre><button class="copy" data-copy="import * as utils from &#x27;./utils.js&#x27;;">COPY</button></div><p>Import all named exports as an object.</p></article><article class="card" data-search="modules const module = await import(&#x27;./module.js&#x27;); dynamically import a module."><div class="cmdrow"><pre><code>const module = await import(&#x27;./module.js&#x27;);</code></pre><button class="copy" data-copy="const module = await import(&#x27;./module.js&#x27;);">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(&#x27;app&#x27;) select an element by id."><div class="cmdrow"><pre><code>document.getElementById(&#x27;app&#x27;)</code></pre><button class="copy" data-copy="document.getElementById(&#x27;app&#x27;)">COPY</button></div><p>Select an element by ID.</p></article><article class="card" data-search="dom selection document.queryselector(&#x27;.card&#x27;) select the first matching element."><div class="cmdrow"><pre><code>document.querySelector(&#x27;.card&#x27;)</code></pre><button class="copy" data-copy="document.querySelector(&#x27;.card&#x27;)">COPY</button></div><p>Select the first matching element.</p></article><article class="card" data-search="dom selection document.queryselectorall(&#x27;.card&#x27;) select all matching elements."><div class="cmdrow"><pre><code>document.querySelectorAll(&#x27;.card&#x27;)</code></pre><button class="copy" data-copy="document.querySelectorAll(&#x27;.card&#x27;)">COPY</button></div><p>Select all matching elements.</p></article><article class="card" data-search="dom selection element.closest(&#x27;.panel&#x27;) find nearest matching ancestor."><div class="cmdrow"><pre><code>element.closest(&#x27;.panel&#x27;)</code></pre><button class="copy" data-copy="element.closest(&#x27;.panel&#x27;)">COPY</button></div><p>Find nearest matching ancestor.</p></article><article class="card" data-search="dom selection element.matches(&#x27;.active&#x27;) check whether an element matches a selector."><div class="cmdrow"><pre><code>element.matches(&#x27;.active&#x27;)</code></pre><button class="copy" data-copy="element.matches(&#x27;.active&#x27;)">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(&#x27;div&#x27;) create an element."><div class="cmdrow"><pre><code>document.createElement(&#x27;div&#x27;)</code></pre><button class="copy" data-copy="document.createElement(&#x27;div&#x27;)">COPY</button></div><p>Create an element.</p></article><article class="card" data-search="dom manipulation element.textcontent = &#x27;hello&#x27;; set text safely."><div class="cmdrow"><pre><code>element.textContent = &#x27;Hello&#x27;;</code></pre><button class="copy" data-copy="element.textContent = &#x27;Hello&#x27;;">COPY</button></div><p>Set text safely.</p></article><article class="card" data-search="dom manipulation element.innerhtml = &#x27;&lt;b&gt;hello&lt;/b&gt;&#x27;; set html markup; avoid with untrusted content."><div class="cmdrow"><pre><code>element.innerHTML = &#x27;&lt;b&gt;Hello&lt;/b&gt;&#x27;;</code></pre><button class="copy" data-copy="element.innerHTML = &#x27;&lt;b&gt;Hello&lt;/b&gt;&#x27;;">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(&#x27;title&#x27;, &#x27;info&#x27;) set an attribute."><div class="cmdrow"><pre><code>element.setAttribute(&#x27;title&#x27;, &#x27;Info&#x27;)</code></pre><button class="copy" data-copy="element.setAttribute(&#x27;title&#x27;, &#x27;Info&#x27;)">COPY</button></div><p>Set an attribute.</p></article><article class="card" data-search="dom manipulation element.getattribute(&#x27;title&#x27;) read an attribute."><div class="cmdrow"><pre><code>element.getAttribute(&#x27;title&#x27;)</code></pre><button class="copy" data-copy="element.getAttribute(&#x27;title&#x27;)">COPY</button></div><p>Read an attribute.</p></article><article class="card" data-search="dom manipulation element.removeattribute(&#x27;title&#x27;) remove an attribute."><div class="cmdrow"><pre><code>element.removeAttribute(&#x27;title&#x27;)</code></pre><button class="copy" data-copy="element.removeAttribute(&#x27;title&#x27;)">COPY</button></div><p>Remove an attribute.</p></article><article class="card" data-search="dom manipulation element.classlist.add(&#x27;active&#x27;) add a class."><div class="cmdrow"><pre><code>element.classList.add(&#x27;active&#x27;)</code></pre><button class="copy" data-copy="element.classList.add(&#x27;active&#x27;)">COPY</button></div><p>Add a class.</p></article><article class="card" data-search="dom manipulation element.classlist.remove(&#x27;active&#x27;) remove a class."><div class="cmdrow"><pre><code>element.classList.remove(&#x27;active&#x27;)</code></pre><button class="copy" data-copy="element.classList.remove(&#x27;active&#x27;)">COPY</button></div><p>Remove a class.</p></article><article class="card" data-search="dom manipulation element.classlist.toggle(&#x27;active&#x27;) toggle a class."><div class="cmdrow"><pre><code>element.classList.toggle(&#x27;active&#x27;)</code></pre><button class="copy" data-copy="element.classList.toggle(&#x27;active&#x27;)">COPY</button></div><p>Toggle a class.</p></article><article class="card" data-search="dom manipulation element.style.display = &#x27;none&#x27;; set an inline style."><div class="cmdrow"><pre><code>element.style.display = &#x27;none&#x27;;</code></pre><button class="copy" data-copy="element.style.display = &#x27;none&#x27;;">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(&#x27;click&#x27;, handler); listen for click events."><div class="cmdrow"><pre><code>button.addEventListener(&#x27;click&#x27;, handler);</code></pre><button class="copy" data-copy="button.addEventListener(&#x27;click&#x27;, handler);">COPY</button></div><p>Listen for click events.</p></article><article class="card" data-search="events element.removeeventlistener(&#x27;click&#x27;, handler); remove an event listener."><div class="cmdrow"><pre><code>element.removeEventListener(&#x27;click&#x27;, handler);</code></pre><button class="copy" data-copy="element.removeEventListener(&#x27;click&#x27;, 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(&#x27;domcontentloaded&#x27;, () =&gt; { }); run when the dom is ready."><div class="cmdrow"><pre><code>document.addEventListener(&#x27;DOMContentLoaded&#x27;, () =&gt; { });</code></pre><button class="copy" data-copy="document.addEventListener(&#x27;DOMContentLoaded&#x27;, () =&gt; { });">COPY</button></div><p>Run when the DOM is ready.</p></article><article class="card" data-search="events form.addeventlistener(&#x27;submit&#x27;, event =&gt; { event.preventdefault(); }); handle form submission."><div class="cmdrow"><pre><code>form.addEventListener(&#x27;submit&#x27;, event =&gt; { event.preventDefault(); });</code></pre><button class="copy" data-copy="form.addEventListener(&#x27;submit&#x27;, event =&gt; { event.preventDefault(); });">COPY</button></div><p>Handle form submission.</p></article><article class="card" data-search="events input.addeventlistener(&#x27;input&#x27;, event =&gt; console.log(event.target.value)); react to text input."><div class="cmdrow"><pre><code>input.addEventListener(&#x27;input&#x27;, event =&gt; console.log(event.target.value));</code></pre><button class="copy" data-copy="input.addEventListener(&#x27;input&#x27;, event =&gt; 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&#x27;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&#x27;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(&#x27;invalid value&#x27;) set custom validation message."><div class="cmdrow"><pre><code>input.setCustomValidity(&#x27;Invalid value&#x27;)</code></pre><button class="copy" data-copy="input.setCustomValidity(&#x27;Invalid value&#x27;)">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(&#x27;theme&#x27;, &#x27;dark&#x27;) store persistent string data."><div class="cmdrow"><pre><code>localStorage.setItem(&#x27;theme&#x27;, &#x27;dark&#x27;)</code></pre><button class="copy" data-copy="localStorage.setItem(&#x27;theme&#x27;, &#x27;dark&#x27;)">COPY</button></div><p>Store persistent string data.</p></article><article class="card" data-search="browser storage localstorage.getitem(&#x27;theme&#x27;) read persistent data."><div class="cmdrow"><pre><code>localStorage.getItem(&#x27;theme&#x27;)</code></pre><button class="copy" data-copy="localStorage.getItem(&#x27;theme&#x27;)">COPY</button></div><p>Read persistent data.</p></article><article class="card" data-search="browser storage localstorage.removeitem(&#x27;theme&#x27;) remove one item."><div class="cmdrow"><pre><code>localStorage.removeItem(&#x27;theme&#x27;)</code></pre><button class="copy" data-copy="localStorage.removeItem(&#x27;theme&#x27;)">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(&#x27;token&#x27;, &#x27;x&#x27;) store session-only string data."><div class="cmdrow"><pre><code>sessionStorage.setItem(&#x27;token&#x27;, &#x27;x&#x27;)</code></pre><button class="copy" data-copy="sessionStorage.setItem(&#x27;token&#x27;, &#x27;x&#x27;)">COPY</button></div><p>Store session-only string data.</p></article><article class="card" data-search="browser storage sessionstorage.getitem(&#x27;token&#x27;) read session data."><div class="cmdrow"><pre><code>sessionStorage.getItem(&#x27;token&#x27;)</code></pre><button class="copy" data-copy="sessionStorage.getItem(&#x27;token&#x27;)">COPY</button></div><p>Read session data.</p></article><article class="card" data-search="browser storage json.parse(localstorage.getitem(&#x27;settings&#x27;) || &#x27;{}&#x27;) load json-like settings."><div class="cmdrow"><pre><code>JSON.parse(localStorage.getItem(&#x27;settings&#x27;) || &#x27;{}&#x27;)</code></pre><button class="copy" data-copy="JSON.parse(localStorage.getItem(&#x27;settings&#x27;) || &#x27;{}&#x27;)">COPY</button></div><p>Load JSON-like settings.</p></article><article class="card" data-search="browser storage localstorage.setitem(&#x27;settings&#x27;, json.stringify(settings)) store structured data as json."><div class="cmdrow"><pre><code>localStorage.setItem(&#x27;settings&#x27;, JSON.stringify(settings))</code></pre><button class="copy" data-copy="localStorage.setItem(&#x27;settings&#x27;, 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(() =&gt; console.log(&#x27;later&#x27;), 1000) run once after a delay."><div class="cmdrow"><pre><code>setTimeout(() =&gt; console.log(&#x27;later&#x27;), 1000)</code></pre><button class="copy" data-copy="setTimeout(() =&gt; console.log(&#x27;later&#x27;), 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(() =&gt; tick(), 1000) run repeatedly."><div class="cmdrow"><pre><code>setInterval(() =&gt; tick(), 1000)</code></pre><button class="copy" data-copy="setInterval(() =&gt; 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(() =&gt; task()) queue a microtask."><div class="cmdrow"><pre><code>queueMicrotask(() =&gt; task())</code></pre><button class="copy" data-copy="queueMicrotask(() =&gt; task())">COPY</button></div><p>Queue a microtask.</p></article><article class="card" data-search="timers requestanimationframe(() =&gt; draw()) schedule browser animation work."><div class="cmdrow"><pre><code>requestAnimationFrame(() =&gt; draw())</code></pre><button class="copy" data-copy="requestAnimationFrame(() =&gt; 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(&#x27;hello&#x27;) copy text to clipboard with permission."><div class="cmdrow"><pre><code>navigator.clipboard.writeText(&#x27;hello&#x27;)</code></pre><button class="copy" data-copy="navigator.clipboard.writeText(&#x27;hello&#x27;)">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({}, &#x27;&#x27;, &#x27;/new-path&#x27;) add a history entry without full navigation."><div class="cmdrow"><pre><code>history.pushState({}, &#x27;&#x27;, &#x27;/new-path&#x27;)</code></pre><button class="copy" data-copy="history.pushState({}, &#x27;&#x27;, &#x27;/new-path&#x27;)">COPY</button></div><p>Add a history entry without full navigation.</p></article><article class="card" data-search="browser apis new url(&#x27;https://example.com/path?x=1&#x27;) create a url object."><div class="cmdrow"><pre><code>new URL(&#x27;https://example.com/path?x=1&#x27;)</code></pre><button class="copy" data-copy="new URL(&#x27;https://example.com/path?x=1&#x27;)">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(&#x27;/tmp&#x27;) change working directory."><div class="cmdrow"><pre><code>process.chdir(&#x27;/tmp&#x27;)</code></pre><button class="copy" data-copy="process.chdir(&#x27;/tmp&#x27;)">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(&#x27;fs&#x27;); import fs in commonjs."><div class="cmdrow"><pre><code>const fs = require(&#x27;fs&#x27;);</code></pre><button class="copy" data-copy="const fs = require(&#x27;fs&#x27;);">COPY</button></div><p>Import fs in CommonJS.</p></article><article class="card" data-search="node.js file system import fs from &#x27;node:fs&#x27;; import fs in esm."><div class="cmdrow"><pre><code>import fs from &#x27;node:fs&#x27;;</code></pre><button class="copy" data-copy="import fs from &#x27;node:fs&#x27;;">COPY</button></div><p>Import fs in ESM.</p></article><article class="card" data-search="node.js file system fs.readfilesync(&#x27;file.txt&#x27;, &#x27;utf8&#x27;) read a file synchronously."><div class="cmdrow"><pre><code>fs.readFileSync(&#x27;file.txt&#x27;, &#x27;utf8&#x27;)</code></pre><button class="copy" data-copy="fs.readFileSync(&#x27;file.txt&#x27;, &#x27;utf8&#x27;)">COPY</button></div><p>Read a file synchronously.</p></article><article class="card" data-search="node.js file system fs.writefilesync(&#x27;file.txt&#x27;, &#x27;hello&#x27;) write a file synchronously."><div class="cmdrow"><pre><code>fs.writeFileSync(&#x27;file.txt&#x27;, &#x27;hello&#x27;)</code></pre><button class="copy" data-copy="fs.writeFileSync(&#x27;file.txt&#x27;, &#x27;hello&#x27;)">COPY</button></div><p>Write a file synchronously.</p></article><article class="card" data-search="node.js file system await fs.promises.readfile(&#x27;file.txt&#x27;, &#x27;utf8&#x27;) read a file asynchronously."><div class="cmdrow"><pre><code>await fs.promises.readFile(&#x27;file.txt&#x27;, &#x27;utf8&#x27;)</code></pre><button class="copy" data-copy="await fs.promises.readFile(&#x27;file.txt&#x27;, &#x27;utf8&#x27;)">COPY</button></div><p>Read a file asynchronously.</p></article><article class="card" data-search="node.js file system await fs.promises.writefile(&#x27;file.txt&#x27;, &#x27;hello&#x27;) write a file asynchronously."><div class="cmdrow"><pre><code>await fs.promises.writeFile(&#x27;file.txt&#x27;, &#x27;hello&#x27;)</code></pre><button class="copy" data-copy="await fs.promises.writeFile(&#x27;file.txt&#x27;, &#x27;hello&#x27;)">COPY</button></div><p>Write a file asynchronously.</p></article><article class="card" data-search="node.js file system await fs.promises.mkdir(&#x27;dir&#x27;, { recursive: true }) create nested directories."><div class="cmdrow"><pre><code>await fs.promises.mkdir(&#x27;dir&#x27;, { recursive: true })</code></pre><button class="copy" data-copy="await fs.promises.mkdir(&#x27;dir&#x27;, { recursive: true })">COPY</button></div><p>Create nested directories.</p></article><article class="card" data-search="node.js file system await fs.promises.readdir(&#x27;.&#x27;) list directory contents."><div class="cmdrow"><pre><code>await fs.promises.readdir(&#x27;.&#x27;)</code></pre><button class="copy" data-copy="await fs.promises.readdir(&#x27;.&#x27;)">COPY</button></div><p>List directory contents.</p></article><article class="card warning" data-search="node.js file system await fs.promises.rm(&#x27;dir&#x27;, { recursive: true, force: true }) delete a directory tree. ⚠"><div class="cmdrow"><pre><code>await fs.promises.rm(&#x27;dir&#x27;, { recursive: true, force: true })</code></pre><button class="copy" data-copy="await fs.promises.rm(&#x27;dir&#x27;, { 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 &amp; URL</span><small>7 snippets</small><b>▾</b></button><div class="body"><div class="grid"><article class="card" data-search="node.js path &amp; url const path = require(&#x27;path&#x27;); import path in commonjs."><div class="cmdrow"><pre><code>const path = require(&#x27;path&#x27;);</code></pre><button class="copy" data-copy="const path = require(&#x27;path&#x27;);">COPY</button></div><p>Import path in CommonJS.</p></article><article class="card" data-search="node.js path &amp; url path.join(&#x27;a&#x27;, &#x27;b&#x27;, &#x27;file.txt&#x27;) join path segments."><div class="cmdrow"><pre><code>path.join(&#x27;a&#x27;, &#x27;b&#x27;, &#x27;file.txt&#x27;)</code></pre><button class="copy" data-copy="path.join(&#x27;a&#x27;, &#x27;b&#x27;, &#x27;file.txt&#x27;)">COPY</button></div><p>Join path segments.</p></article><article class="card" data-search="node.js path &amp; url path.resolve(&#x27;file.txt&#x27;) resolve an absolute path."><div class="cmdrow"><pre><code>path.resolve(&#x27;file.txt&#x27;)</code></pre><button class="copy" data-copy="path.resolve(&#x27;file.txt&#x27;)">COPY</button></div><p>Resolve an absolute path.</p></article><article class="card" data-search="node.js path &amp; url path.basename(&#x27;/tmp/file.txt&#x27;) get final path component."><div class="cmdrow"><pre><code>path.basename(&#x27;/tmp/file.txt&#x27;)</code></pre><button class="copy" data-copy="path.basename(&#x27;/tmp/file.txt&#x27;)">COPY</button></div><p>Get final path component.</p></article><article class="card" data-search="node.js path &amp; url path.dirname(&#x27;/tmp/file.txt&#x27;) get parent directory."><div class="cmdrow"><pre><code>path.dirname(&#x27;/tmp/file.txt&#x27;)</code></pre><button class="copy" data-copy="path.dirname(&#x27;/tmp/file.txt&#x27;)">COPY</button></div><p>Get parent directory.</p></article><article class="card" data-search="node.js path &amp; url path.extname(&#x27;file.txt&#x27;) get file extension."><div class="cmdrow"><pre><code>path.extname(&#x27;file.txt&#x27;)</code></pre><button class="copy" data-copy="path.extname(&#x27;file.txt&#x27;)">COPY</button></div><p>Get file extension.</p></article><article class="card" data-search="node.js path &amp; 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 &#x27;node:http&#x27;; import node http module."><div class="cmdrow"><pre><code>import http from &#x27;node:http&#x27;;</code></pre><button class="copy" data-copy="import http from &#x27;node:http&#x27;;">COPY</button></div><p>Import Node HTTP module.</p></article><article class="card" data-search="node.js http http.createserver((req, res) =&gt; { res.end(&#x27;hello&#x27;); }).listen(3000); create a basic http server."><div class="cmdrow"><pre><code>http.createServer((req, res) =&gt; { res.end(&#x27;Hello&#x27;); }).listen(3000);</code></pre><button class="copy" data-copy="http.createServer((req, res) =&gt; { res.end(&#x27;Hello&#x27;); }).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(&#x27;content-type&#x27;, &#x27;application/json&#x27;); set response header."><div class="cmdrow"><pre><code>res.setHeader(&#x27;Content-Type&#x27;, &#x27;application/json&#x27;);</code></pre><button class="copy" data-copy="res.setHeader(&#x27;Content-Type&#x27;, &#x27;application/json&#x27;);">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 &quot;type&quot;: &quot;module&quot; treat .js files as es modules in node."><div class="cmdrow"><pre><code>&quot;type&quot;: &quot;module&quot;</code></pre><button class="copy" data-copy="&quot;type&quot;: &quot;module&quot;">COPY</button></div><p>Treat .js files as ES modules in Node.</p></article><article class="card" data-search="package.json &quot;scripts&quot;: { &quot;start&quot;: &quot;node app.js&quot; } define an npm start script."><div class="cmdrow"><pre><code>&quot;scripts&quot;: { &quot;start&quot;: &quot;node app.js&quot; }</code></pre><button class="copy" data-copy="&quot;scripts&quot;: { &quot;start&quot;: &quot;node app.js&quot; }">COPY</button></div><p>Define an npm start script.</p></article><article class="card" data-search="package.json &quot;dependencies&quot;: { } runtime dependencies."><div class="cmdrow"><pre><code>&quot;dependencies&quot;: { }</code></pre><button class="copy" data-copy="&quot;dependencies&quot;: { }">COPY</button></div><p>Runtime dependencies.</p></article><article class="card" data-search="package.json &quot;devdependencies&quot;: { } development-only dependencies."><div class="cmdrow"><pre><code>&quot;devDependencies&quot;: { }</code></pre><button class="copy" data-copy="&quot;devDependencies&quot;: { }">COPY</button></div><p>Development-only dependencies.</p></article><article class="card" data-search="package.json &quot;engines&quot;: { &quot;node&quot;: &quot;&gt;=20&quot; } document expected node version."><div class="cmdrow"><pre><code>&quot;engines&quot;: { &quot;node&quot;: &quot;&gt;=20&quot; }</code></pre><button class="copy" data-copy="&quot;engines&quot;: { &quot;node&quot;: &quot;&gt;=20&quot; }">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, &#x27;x should equal 1&#x27;); simple built-in assertion."><div class="cmdrow"><pre><code>console.assert(x === 1, &#x27;x should equal 1&#x27;);</code></pre><button class="copy" data-copy="console.assert(x === 1, &#x27;x should equal 1&#x27;);">COPY</button></div><p>Simple built-in assertion.</p></article><article class="card" data-search="testing import assert from &#x27;node:assert/strict&#x27;; import node strict assertions."><div class="cmdrow"><pre><code>import assert from &#x27;node:assert/strict&#x27;;</code></pre><button class="copy" data-copy="import assert from &#x27;node:assert/strict&#x27;;">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&#x27;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&#x27;s built-in test runner.</p></article><article class="card" data-search="testing test(&#x27;adds numbers&#x27;, () =&gt; { assert.equal(1 + 1, 2); }); basic node test-runner example."><div class="cmdrow"><pre><code>test(&#x27;adds numbers&#x27;, () =&gt; { assert.equal(1 + 1, 2); });</code></pre><button class="copy" data-copy="test(&#x27;adds numbers&#x27;, () =&gt; { 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(&#x27;my-element&#x27;, myelement); register a custom element."><div class="cmdrow"><pre><code>customElements.define(&#x27;my-element&#x27;, MyElement);</code></pre><button class="copy" data-copy="customElements.define(&#x27;my-element&#x27;, MyElement);">COPY</button></div><p>Register a custom element.</p></article><article class="card" data-search="web components this.attachshadow({ mode: &#x27;open&#x27; }) create a shadow root."><div class="cmdrow"><pre><code>this.attachShadow({ mode: &#x27;open&#x27; })</code></pre><button class="copy" data-copy="this.attachShadow({ mode: &#x27;open&#x27; })">COPY</button></div><p>Create a shadow root.</p></article><article class="card" data-search="web components this.connectedcallback = () =&gt; { } conceptual lifecycle hook; normally define as method."><div class="cmdrow"><pre><code>this.connectedCallback = () =&gt; { }</code></pre><button class="copy" data-copy="this.connectedCallback = () =&gt; { }">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(&#x27;2d&#x27;); get a 2d drawing context."><div class="cmdrow"><pre><code>const ctx = canvas.getContext(&#x27;2d&#x27;);</code></pre><button class="copy" data-copy="const ctx = canvas.getContext(&#x27;2d&#x27;);">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(&#x27;hello&#x27;, 20, 30); draw text."><div class="cmdrow"><pre><code>ctx.fillText(&#x27;Hello&#x27;, 20, 30);</code></pre><button class="copy" data-copy="ctx.fillText(&#x27;Hello&#x27;, 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(&#x27;en-us&#x27;).format(1234567) format a number."><div class="cmdrow"><pre><code>new Intl.NumberFormat(&#x27;en-US&#x27;).format(1234567)</code></pre><button class="copy" data-copy="new Intl.NumberFormat(&#x27;en-US&#x27;).format(1234567)">COPY</button></div><p>Format a number.</p></article><article class="card" data-search="intl formatting new intl.numberformat(&#x27;en-us&#x27;, { style: &#x27;currency&#x27;, currency: &#x27;usd&#x27; }).format(19.99) format currency."><div class="cmdrow"><pre><code>new Intl.NumberFormat(&#x27;en-US&#x27;, { style: &#x27;currency&#x27;, currency: &#x27;USD&#x27; }).format(19.99)</code></pre><button class="copy" data-copy="new Intl.NumberFormat(&#x27;en-US&#x27;, { style: &#x27;currency&#x27;, currency: &#x27;USD&#x27; }).format(19.99)">COPY</button></div><p>Format currency.</p></article><article class="card" data-search="intl formatting new intl.datetimeformat(&#x27;en-us&#x27;).format(new date()) format a date."><div class="cmdrow"><pre><code>new Intl.DateTimeFormat(&#x27;en-US&#x27;).format(new Date())</code></pre><button class="copy" data-copy="new Intl.DateTimeFormat(&#x27;en-US&#x27;).format(new Date())">COPY</button></div><p>Format a date.</p></article><article class="card" data-search="intl formatting new intl.pluralrules(&#x27;en-us&#x27;).select(2) select plural category."><div class="cmdrow"><pre><code>new Intl.PluralRules(&#x27;en-US&#x27;).select(2)</code></pre><button class="copy" data-copy="new Intl.PluralRules(&#x27;en-US&#x27;).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) =&gt; a + b, 0); sum an array."><div class="cmdrow"><pre><code>const sum = nums.reduce((a, b) =&gt; a + b, 0);</code></pre><button class="copy" data-copy="const sum = nums.reduce((a, b) =&gt; 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 =&gt; x.category); group values by key in environments supporting object.groupby."><div class="cmdrow"><pre><code>const grouped = Object.groupBy(items, x =&gt; x.category);</code></pre><button class="copy" data-copy="const grouped = Object.groupBy(items, x =&gt; 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) =&gt; (m[x] = (m[x] || 0) + 1, m), {}); count repeated values."><div class="cmdrow"><pre><code>const counts = items.reduce((m, x) =&gt; (m[x] = (m[x] || 0) + 1, m), {});</code></pre><button class="copy" data-copy="const counts = items.reduce((m, x) =&gt; (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) =&gt; a.localecompare(b)); sort strings without mutating original array."><div class="cmdrow"><pre><code>const sorted = [...items].sort((a,b) =&gt; a.localeCompare(b));</code></pre><button class="copy" data-copy="const sorted = [...items].sort((a,b) =&gt; 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 =&gt; [x.id, x])); index objects by id."><div class="cmdrow"><pre><code>const byId = Object.fromEntries(items.map(x =&gt; [x.id, x]));</code></pre><button class="copy" data-copy="const byId = Object.fromEntries(items.map(x =&gt; [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 =&gt; new promise(r =&gt; settimeout(r, ms)); create an async sleep helper."><div class="cmdrow"><pre><code>const sleep = ms =&gt; new Promise(r =&gt; setTimeout(r, ms));</code></pre><button class="copy" data-copy="const sleep = ms =&gt; new Promise(r =&gt; 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 = &#x27;  hello   world  &#x27;.trim().replace(/\s+/g, &#x27; &#x27;); normalize whitespace."><div class="cmdrow"><pre><code>const text = &#x27;  hello   world  &#x27;.trim().replace(/\s+/g, &#x27; &#x27;);</code></pre><button class="copy" data-copy="const text = &#x27;  hello   world  &#x27;.trim().replace(/\s+/g, &#x27; &#x27;);">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 &lt; 3; i++) { settimeout(() =&gt; console.log(i)); } var is function-scoped; use let for per-iteration bindings."><div class="cmdrow"><pre><code>for (var i = 0; i &lt; 3; i++) { setTimeout(() =&gt; console.log(i)); }</code></pre><button class="copy" data-copy="for (var i = 0; i &lt; 3; i++) { setTimeout(() =&gt; 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(&#x27;08&#x27;) always pass a radix for clarity: parseint(&#x27;08&#x27;, 10)."><div class="cmdrow"><pre><code>parseInt(&#x27;08&#x27;)</code></pre><button class="copy" data-copy="parseInt(&#x27;08&#x27;)">COPY</button></div><p>Always pass a radix for clarity: parseInt(&#x27;08&#x27;, 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 =&gt; ...) foreach does not await async callbacks; use for...of or promise.all."><div class="cmdrow"><pre><code>await items.forEach(async item =&gt; ...)</code></pre><button class="copy" data-copy="await items.forEach(async item =&gt; ...)">COPY</button></div><p>forEach does not await async callbacks; use for...of or Promise.all.</p></article></div></div></section></main>
</div>

<footer>JavaScript Cheat Sheet • Browser + Node.js coverage • Search and copy controls run locally in your browser.</footer>

<script>
const q=document.getElementById('search');
const cards=[...document.querySelectorAll('.card')];
const sections=[...document.querySelectorAll('.section')];

q.addEventListener('input',()=>{
  const s=q.value.trim().toLowerCase();
  cards.forEach(c=>c.classList.toggle('hidden',s&&!c.dataset.search.includes(s)));
  sections.forEach(sec=>{
    const visible=sec.querySelectorAll('.card:not(.hidden)').length;
    sec.classList.toggle('hidden',s&&visible===0);
    if(s&&visible)sec.classList.remove('collapsed');
  });
});

document.querySelectorAll('.sectionhead').forEach(b=>b.onclick=()=>{
  const sec=b.closest('.section');
  sec.classList.toggle('collapsed');
  b.setAttribute('aria-expanded',String(!sec.classList.contains('collapsed')));
});
document.getElementById('expand').onclick=()=>sections.forEach(s=>s.classList.remove('collapsed'));
document.getElementById('collapse').onclick=()=>sections.forEach(s=>s.classList.add('collapsed'));

document.addEventListener('click',async e=>{
  const b=e.target.closest('.copy'); if(!b) return;
  try{
    await navigator.clipboard.writeText(b.dataset.copy);
    b.textContent='COPIED';
    setTimeout(()=>b.textContent='COPY',800);
  }catch{
    b.textContent='SELECT';
    setTimeout(()=>b.textContent='COPY',800);
  }
});
</script>
</body>
</html>