📦Variables & Types
const name = valueImmutable binding (preferred)
let name = valueBlock-scoped mutable
var name = valueFunction-scoped (avoid)
typeof valueGet type as string
null / undefinedAbsent/uninitialized values
NaN / InfinitySpecial numbers
Symbol('desc')Unique primitive
BigInt(9n)Arbitrary precision integer
🔡Strings
`Hello ${name}`Template literal
str.lengthString length
str.toUpperCase() / toLowerCase()Case conversion
str.trim() / trimStart() / trimEnd()Trim whitespace
str.split(',')Split to array
str.includes('x')Substring check
str.startsWith('x') / endsWith('x')Start/end check
str.replace('a','b')Replace first match
str.replaceAll('a','b')Replace all
str.slice(0,5)Substring extraction
str.padStart(8,'0')Pad string
str.at(-1)Last character
📋Arrays
arr.push(x) / pop()Add/remove end
arr.unshift(x) / shift()Add/remove start
arr.splice(i,n,x)Remove and insert
arr.slice(0,3)Extract without mutating
arr.map(fn)Transform each item
arr.filter(fn)Keep matching items
arr.reduce(fn, init)Accumulate value
arr.find(fn) / findIndex(fn)Find first match
arr.some(fn) / every(fn)Any/all match
arr.flat(depth) / flatMap(fn)Flatten array
arr.includes(x)Check membership
[...arr1, ...arr2]Spread merge
Array.from(set)Convert to array
🗂️Objects
const obj = { key: value }Object literal
obj.key / obj['key']Property access
const { a, b } = objDestructuring
const { a: renamed } = objRename on destruct
const { a = default } = objDefault value
{ ...obj, newKey: val }Spread/merge
Object.keys(obj)Array of keys
Object.values(obj)Array of values
Object.entries(obj)Array of [key,val] pairs
Object.assign({}, src)Shallow copy/merge
structuredClone(obj)Deep clone
obj?.nested?.propOptional chaining
obj.prop ?? 'default'Nullish coalescing
⚙️Functions
function name(a, b) {}Function declaration
const fn = (a, b) => exprArrow function
const fn = (a = 10) => aDefault parameter
function fn(...args) {}Rest parameters
fn(...array)Spread arguments
(async () => await fn())()Async IIFE
function* gen() { yield x }Generator function
fn.call(ctx, a, b)Call with context
fn.bind(ctx)Bind context
⏳Async / Promises
Promise.resolve(val)Resolved promise
Promise.reject(err)Rejected promise
promise.then(fn).catch(fn)Chain
Promise.all([p1,p2])Wait for all
Promise.allSettled([...])All settled (no throw)
Promise.race([...])First to resolve
Promise.any([...])First fulfilled
async function() {}Async function
const result = await fn()Await promise
try { await } catch(e) {}Error handling
🌐DOM Manipulation
document.querySelector('.cls')First match
document.querySelectorAll('li')All matches
el.textContent = 'str'Set text
el.innerHTML = 'str'Set HTML (careful)
el.classList.add/remove/toggleManage classes
el.style.color = 'red'Inline style
el.setAttribute('href','url')Set attribute
el.dataset.keyAccess data-* attributes
el.closest('.parent')Find ancestor
el.before(node) / after(node)Insert adjacent
el.remove()Remove from DOM
🎧Events
el.addEventListener('click', fn)Attach event
el.removeEventListener('click', fn)Detach event
e.preventDefault()Prevent default action
e.stopPropagation()Stop event bubbling
e.target / e.currentTargetEvent targets
e.key / e.codeKeyboard events
e.clientX / e.clientYMouse position
Event delegation: parent listensEfficiency pattern
new CustomEvent('name', {detail:})Custom events
AbortController + signalCancel listeners
🚀Modern Patterns
const [a, b] = arrayArray destructuring
for...of arrayIterate values
for...in objIterate keys
Map / SetKeyed collections
WeakMap / WeakRefWeak references
class Foo extends Bar {}Class inheritance
Symbol.iteratorCustom iterables
Proxy / ReflectMeta-programming
import { fn } from './mod'ES Module import
export default fnDefault export
import('./mod.js')Dynamic import
globalThisUniversal global