JavaScript Best Practices

Tips and tricks for writing better JavaScript code.

Code Style

Use Meaningful Names

// Bad
const x = users.filter(u => u.a > 18);
// Good
const adultUsers = users.filter(user => user.age > 18);

Keep Functions Small

// Bad - doing too much
function processUser(user) {
  // validate, transform, save, notify...
}
// Good - single responsibility
function validateUser(user) { }
function transformUser(user) { }
function saveUser(user) { }
function notifyUser(user) { }

Performance Tips

Avoid Unnecessary Work

// Bad - creates new function each render
items.map(item =>  handle(item)} />);
// Good - stable reference
const handleClick = useCallback((item) => handle(item), []);

Use Early Returns

// Bad
function getDiscount(user) {
  if (user) {
    if (user.isPremium) {
      if (user.years > 5) {
        return 0.3;
      }
      return 0.2;
    }
    return 0.1;
  }
  return 0;
}
// Good
function getDiscount(user) {
  if (!user) return 0;
  if (!user.isPremium) return 0.1;
  if (user.years <= 5) return 0.2;
  return 0.3;
}

Common Patterns

Debounce

function debounce(fn, delay) {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => fn(...args), delay);
  };
}
const search = debounce((query) => {
  fetchResults(query);
}, 300);

Memoization

function memoize(fn) {
  const cache = new Map();
  return (...args) => {
    const key = JSON.stringify(args);
    if (cache.has(key)) return cache.get(key);
    const result = fn(...args);
    cache.set(key, result);
    return result;
  };
}

Security

// Never use eval()
eval(userInput); // Dangerous!
// Sanitize user input
const clean = DOMPurify.sanitize(userInput);
// Use textContent instead of innerHTML
element.textContent = userInput; // Safe
element.innerHTML = userInput;   // Risky