~ Contribute

Suggest a correction or improvement. The author reviews it before it goes live.

Comment0 / 300

en/tutorials/js/34js-best-practices

# JavaScript Best Practices

Essential patterns for professional JavaScript development.

## Code Organization

```javascript
// BAD: Global variables
let count = 0;

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

## Variable Declaration

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

## Function Design

```javascript
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

```javascript
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

```javascript
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

```javascript
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

```javascript
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

```javascript
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

```javascript
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

No changes yet

cancel