Object literals
const user = { id, name, role: 'admin' };
- Shorthand properties
- Computed keys
- Spread {...user}
- Optional chaining
ADVERT
🧠 JavaScript Cheatsheet
Modern JavaScript reference packed with syntax basics, array helpers, async patterns, modules, and DOM tips.
Modern JavaScript reference that covers syntax basics, array utilities, objects, async workflows, and DOM helpers.
Language Basics
Scalable variable declarations, functions, and destructuring.
| Snippet | What it does | Why it matters |
|---|---|---|
const answer = 42; | Block-scoped constant | Prefer const and fall back to let when reassignment is required. |
let total = 0; | Mutable variable | Use descriptive names and limit scope. |
function sum(a, b) { return a + b; } | Function declaration | Hoisted, great for shared utilities. |
const sum = (a, b) => a + b; | Arrow function | Lexical this and concise expressions. |
const { a, b } = point; | Destructuring | Pull properties from arrays or objects with minimal code. |
Array Helpers
Transform, filter, and summarize data collections.
| Snippet | What it does | Why it matters |
|---|---|---|
items.map(cb) | Transform each item | Return a new array without mutating the original. |
items.filter(cb) | Keep matching values | Ideal for search, permissions, or type guards. |
items.reduce((acc, item) => acc + item, 0) | Accumulate into a single value | Use for sums, grouping, or building objects. |
[...new Set(items)] | Deduplicate | Spread a Set back into an array to remove duplicates. |
Objects, JSON & Modules
Structure application state and exports.
JSON
JSON.parse(jsonString) / JSON.stringify(obj, null, 2);
- Stable APIs
- Storage
- Network payloads
Modules
export function handler() {} / import { handler } from './file.js';
- Named exports
- Default exports
- Dynamic import()
Classes
class Queue { enqueue(item) { ... } }
- constructor
- extends
- static
- private fields #value
Async Patterns
Manage promises and API requests like a pro.
| Snippet | What it does | Why it matters |
|---|---|---|
fetch(url).then(res => res.json()) | Promise chaining | Handle APIs with then/catch/finally. |
const data = await fetch(url) | Async/await | Wrap inside async functions for imperative flow. |
Promise.all([a, b]) | Parallel execution | Rejects fast, use Promise.allSettled for tolerant workflows. |
try { ... } catch (error) { ... } | Error handling | Always log context or rethrow for observability. |
DOM Utilities
Interact with the browser without heavy frameworks.
- Select elements
const button = document.querySelector('button[data-buy]');
- Listen for events
button.addEventListener('click', handleClick);
- Create nodes
const div = document.createElement('div');
- Dataset API
element.dataset.state = 'open';
- Performance
Use requestAnimationFrame for smooth UI loops and throttle expensive handlers.
ADVERT
ADVERT