Какие знаешь практики хорошего кода?

Практики хорошего кода в JavaScript и Frontend

Хороший код — это не только код, который работает, но и код, который легко читать, поддерживать и масштабировать. Рассмотрим ключевые практики.

1. KISS — Keep It Simple, Stupid

Пишите простой код, избегайте излишней сложности:

// Плохо — переусложнено
const getValue = (obj) => 
  Object.keys(obj).reduce((acc, key) => 
    acc[key] = obj[key] ? obj[key] : null, {});

// Хорошо — просто и понятно
const getValue = (obj) => obj || null;

2. DRY — Don't Repeat Yourself

Не дублируйте код, выносите повторяющуюся логику в функции:

// Плохо — дублирование
const validateEmail = (email) => email.includes('@');
const validateUsername = (username) => username.includes('@'); // копия!

// Хорошо — общая функция
const contains = (str, char) => str.includes(char);
const validateEmail = (email) => contains(email, '@');

3. SOLID принципы

S — Single Responsibility (одна ответственность)

// Плохо — функция делает слишком много
function processUser(data) {
  validate(data);
  transform(data);
  save(data);
  sendEmail(data);
  log(data);
}

// Хорошо — разделяем ответственность
function validateUser(data) { /* ... */ }
function transformUser(data) { /* ... */ }
function saveUser(data) { /* ... */ }

O — Open/Closed (открыта для расширения, закрыта для модификации)

// Плохо — нужно менять функцию при добавлении типа
function process(type, data) {
  if (type === 'json') return JSON.stringify(data);
  if (type === 'csv') return toCSV(data);
  if (type === 'xml') return toXML(data);
}

// Хорошо — расширяемо через стратегии
const formatters = {
  json: (data) => JSON.stringify(data),
  csv: (data) => toCSV(data),
  xml: (data) => toXML(data)
};

function process(type, data) {
  return formatters[type](data);
}

4. Именование

Используйте понятные имена переменных и функций:

// Плохо
const d = new Date();
const arr = data.filter(x => x.status === 'active');
function p(u) { /* ... */ }

// Хорошо
const currentDate = new Date();
const activeUsers = data.filter(user => user.status === 'active');
function processUser(user) { /* ... */ }

5. Чистые функции (Pure Functions)

Функции без побочных эффектов:

// Плохо — побочный эффект (изменяет глобальное состояние)
let total = 0;
function addToTotal(num) {
  total += num; // побочный эффект!
  return total;
}

// Хорошо — чистая функция
function add(a, b) {
  return a + b; // нет побочных эффектов
}

6. Избегайте магических чисел

// Плохо
if (user.age > 18) { /* ... */ }
const discount = price * 0.15;

// Хорошо
const LEGAL_AGE = 18;
const DISCOUNT_RATE = 0.15;

if (user.age > LEGAL_AGE) { /* ... */ }
const discount = price * DISCOUNT_RATE;

7. Обработка ошибок

// Плохо — игнорируем ошибки
function fetchData() {
  return fetch('/api/data').then(r => r.json());
}

// Хорошо — обрабатываем ошибки
async function fetchData() {
  try {
    const response = await fetch('/api/data');
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    return await response.json();
  } catch (error) {
    console.error('Ошибка загрузки:', error);
    throw error; // пробрасываем выше
  }
}

8. Избегайте callback hell (Pyramid of Doom)

// Плохо — callback hell
function process(data) {
  validate(data, function(err) {
    if (!err) {
      transform(data, function(err, result) {
        if (!err) {
          save(result, function(err) {
            if (!err) console.log('Готово');
          });
        }
      });
    }
  });
}

// Хорошо — async/await
async function process(data) {
  await validate(data);
  const result = await transform(data);
  await save(result);
  console.log('Готово');
}

9. Документирование

// Плохо — нет документации
function calc(a, b, c) {
  return a * b + c;
}

// Хорошо — JSDoc
/**
 * Вычисляет стоимость товара с налогом
 * @param {number} price - Базовая цена
 * @param {number} taxRate - Налоговая ставка (0.1 = 10%)
 * @param {number} discount - Скидка в абсолютных числах
 * @returns {number} Итоговая стоимость
 */
function calculateTotal(price, taxRate, discount) {
  return (price * (1 + taxRate)) - discount;
}

10. Performance

// Плохо — повторяющиеся вычисления
for (let i = 0; i < array.length; i++) {
  const value = expensiveComputation(array[i]);
}

// Хорошо — кэширование
const length = array.length;
for (let i = 0; i < length; i++) {
  const value = expensiveComputation(array[i]);
}

// Для React — useMemo
const memoized = useMemo(() => expensiveComputation(data), [data]);

11. Типизация

// Плохо — без типов
function greet(user) {
  return `Hello, ${user.name}`;
}

// Хорошо — TypeScript
interface User {
  name: string;
  age: number;
}

function greet(user: User): string {
  return `Hello, ${user.name}`;
}

12. Тестирование

// Хороший код тестируется
function add(a, b) {
  if (typeof a !== 'number' || typeof b !== 'number') {
    throw new Error('Arguments must be numbers');
  }
  return a + b;
}

// Тесты
describe('add', () => {
  test('should add two numbers', () => {
    expect(add(2, 3)).toBe(5);
  });
  
  test('should throw for non-numbers', () => {
    expect(() => add('a', 'b')).toThrow();
  });
});

Итоговый набор практик

• Пишите просто и понятно (KISS)
• Не повторяйте код (DRY)
• Следуйте SOLID принципам
• Используйте понятные имена
• Пишите чистые функции
• Обрабатывайте ошибки
• Избегайте callback hell
• Документируйте код
• Оптимизируйте производительность
• Используйте TypeScript
• Тестируйте код

Хороший код — это долгосрочная инвестиция в качество проекта!