JavaScript Best Practices

Essential patterns for professional JavaScript development.

Code Organization

// BAD: Global variables
let count = 0;

// GOOD: Module pattern
const Counter = (() => {
  let count = 0;
  return { increment: () => ++count, getCount: () => count };
})();

Variable Declaration

const PI = 3.14159;    // Constants — never reassign
let count = 0;         // Variables that change
// Never use var

Function Design

const add = (a, b) => a + b;                         // Pure function
const addToCart = (cart, item) => [...cart, item];    // Immutable

function validateOrder(order) { /* ... */ }  // Small, single-purpose
function calculateTotal(order) { /* ... */ }
function saveOrder(order) { /* ... */ }

Naming Conventions

let userName = "John";       // camelCase for variables/functions
const MAX_USERS = 100;       // UPPER_SNAKE_CASE for constants
class UserAccount { }        // PascalCase for classes
let isActive = true;         // is/has/should prefix for booleans

Error Handling

function safeParseJSON(json) {
  try { return JSON.parse(json); }
  catch (error) { console.error("Invalid JSON:", error.message); return null; }
}

class ValidationError extends Error {
  constructor(message, field) { super(message); this.field = field; }
}

Code Quality

let width = 10;                 // Descriptive names, not x
const MIN_AGE = 18;             // Named constants, not magic numbers

function getDiscount(user) {    // Early returns reduce nesting
  if (!user.isActive) return 0;
  if (user.isPremium) return 0.2;
  return 0;
}

Performance Tips

let items = document.querySelectorAll(".item"); // Cache DOM queries

function fibonacci(n, cache = new Map()) {      // Memoize
  if (cache.has(n)) return cache.get(n);
  if (n <= 1) return n;
  let result = fibonacci(n - 1) + fibonacci(n - 2);
  cache.set(n, result);
  return result;
}

Modern Features

let value = obj?.nested?.value;       // Optional chaining
let value = obj?.value ?? "default";  // Nullish coalescing
let greeting = `Hello, ${name}!`;     // Template literals
let { name, age } = user;             // Destructuring

Security

function sanitize(input) {
  let div = document.createElement("div");
  div.textContent = input;
  return div.innerHTML;
}
// Never use eval() — Use textContent instead of innerHTML

Best Practices Summary

• Use const/let — Never var
• Write pure functions — Same input, same output
• Keep functions small — One responsibility
• Use descriptive names — Self-documenting code
• Handle errors — Don’t ignore failures
• Avoid magic numbers — Use named constants
• Use early returns — Reduce nesting
• Write tests — Ensure correctness
• Sanitize input — Prevent XSS
• Stay current — Learn modern features