Writing Clean, Maintainable Code

Following best practices makes your code easier to read, maintain, and debug, both for you and other developers.

Good code style, consistent naming conventions, proper error handling, and modern JavaScript features all contribute to code quality.

These practices become increasingly important as projects grow in size and complexity, or when working in teams.

// ❌ Bad Practice: var, unclear names, no const
var x = 10;
var y = 20;
var z = x + y;

// ✅ Good Practice: const/let, descriptive names
const price = 10;
const quantity = 20;
const totalCost = price * quantity;

// ❌ Bad: Long function, does too much
function processUser(u) {
  const n = u.n.toUpperCase();
  const e = u.e.toLowerCase();
  const a = new Date().getFullYear() - u.b;
  return { n, e, a };
}

// ✅ Good: Small focused functions, clear names
function formatUserData(user) {
  return {
    name: formatName(user.name),
    email: formatEmail(user.email),
    age: calculateAge(user.birthYear)
  };
}

function formatName(name) {
  return name.toUpperCase();
}

function formatEmail(email) {
  return email.toLowerCase();
}

function calculateAge(birthYear) {
  return new Date().getFullYear() - birthYear;
}

// ✅ Use template literals instead of concatenation
const name = 'Alice';
const age = 30;
const message = `Hello, my name is ${name} and I am ${age} years old.`;

// ✅ Use arrow functions for callbacks
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);

// ✅ Use destructuring
const user = { name: 'Bob', age: 25, email: 'bob@example.com' };
const { name: userName, email } = user;

// ✅ Always use === instead of ==
if (value === 5) { } // Good
if (value == 5) { }  // Bad (type coercion)

// ✅ Avoid global variables
// Bad: Global pollution
let globalCount = 0;

// Good: Use modules or IIFE
const counter = (function() {
  let count = 0;
  return {
    increment: () => ++count,
    get: () => count
  };
})();

• Use const/let - Never use var (const by default, let when reassignment needed)
• Descriptive Names - Use clear, meaningful variable and function names
• Small Functions - Each function should do one thing well
• Template Literals - Use backticks for string interpolation
• Arrow Functions - Use for callbacks and short functions
• Strict Equality === - Avoid == (loose equality)
• Comments - Explain why, not what (code should be self-documenting)
• Error Handling - Always handle errors, don't ignore them
• DRY Principle - Don't Repeat Yourself, reuse code
• Consistent Style - Follow a style guide (Airbnb, Standard, Google)

<div class="practices-demo">
  <h3>Best Practices Examples</h3>

  <div class="example">
    <h4>Example 1: String Formatting</h4>
    <div class="code-comparison">
      <div class="bad-code">
        <h5>❌ Bad Practice:</h5>
        <pre>var msg = "Hello, " + name +
"! You are " + age + " years old.";</pre>
      </div>
      <div class="good-code">
        <h5>✅ Good Practice:</h5>
        <pre>const message = `Hello, ${name}!
You are ${age} years old.`;</pre>
      </div>
    </div>
    <button id="stringDemo">Run String Demo</button>
    <div id="stringOutput"></div>
  </div>

  <div class="example">
    <h4>Example 2: Function Design</h4>
    <button id="badFunctionBtn">Run Bad Code</button>
    <button id="goodFunctionBtn">Run Good Code</button>
    <div id="functionOutput"></div>
  </div>

  <div class="example">
    <h4>Example 3: Data Processing</h4>
    <button id="dataDemo">Process User Data</button>
    <div id="dataOutput"></div>
  </div>
</div>