Back to blog

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.