6 Sneaky JavaScript Patterns to Cut Boilerplate

Micro-optimizations and quality-of-life hacks to keep your scripts lean, readable, and bug-resistant.

1. Optional Chaining ?. + Nullish Coalescing ??

Stop writing five nested guards:

// Old
const theme = user && user.settings && user.settings.theme ? user.settings.theme : 'light'

// New
const theme = user?.settings?.theme ?? 'light'

Fewer lines, same safety.

2. Barrel Files for One-Line Imports

Aggregate related exports into a single “barrel” file:

// utils/index.js
export * from './format'
export * from './validate'
export * from './fetch'

// SomeComponent.js
import { formatDate, validateEmail, getJSON } from '@/utils'

Kill import clutter without sacrificing tree-shaking.

3. Memoize Pure Functions with a WeakMap

Cache heavy computations tied to objects—no leaks:

const cache = new WeakMap()

export function expensive(obj) {
  if (cache.has(obj)) return cache.get(obj)
  const result = crunchNumbers(obj) // 🚀 costly
  cache.set(obj, result)
  return result
}

Results follow the object’s lifetime—GC does the cleanup.

4. Tagged Template Literals for Safe HTML

Prevent XSS without a third-party lib:

const escape = (strings, ...values) =>
  strings.reduce(
    (acc, str, i) =>
      acc +
      str +
      (values[i]
        ? String(values[i]).replace(
            /[&<>"']/g,
            (s) =>
              ({
                '&': '&amp;',
                '<': '&lt;',
                '>': '&gt;',
                '"': '&quot;',
                "'": '&#39;',
              })[s],
          )
        : ''),
    '',
  )

const name = '<script>alert(1)</script>'
document.body.innerHTML = escape`<p>Hello, ${name}!</p>`

Zero dependencies, maximum safety.

5. AbortController for Cancellable fetch

Stop orphaning network calls on route changes:

const controller = new AbortController()
const { signal } = controller

fetch('/api/data', { signal })
  .then((r) => r.json())
  .catch((e) => {
    if (e.name !== 'AbortError') throw e
  })

// later…
controller.abort()

No more “state update on unmounted component” warnings.

6. Format Like a Native with Intl

Forget custom helpers—use the built-ins:

const usd = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
}).format(1999.99) // "$1,999.99"

const isoDate = new Intl.DateTimeFormat('sv-SE').format(new Date())
// "2025-06-05"

Locale-aware, performant, and zero bloat.