Clean Code JavaScript - Как писать код, который не стыдно показать коллегам

21 июл 2025

Репозиторий давно не обновлялся

Последнее обновление было 2 года назад.

94,762
12,581
1,759
2 года

Знакомо ли вам чувство, когда открываешь старый код и не можешь понять, что же ты имел в виду? Или когда коллега просит помочь разобраться в его скрипте, а ты тратишь часы на расшифровку? Репозиторий Clean Code JavaScript — это коллекция практических правил, которые помогут сделать ваш код понятным, поддерживаемым и профессиональным.

Почему чистый код так важен?

За 15 лет работы с JavaScript я видел сотни проектов. И главная проблема большинства из них — не сложность алгоритмов, а нечитаемость кода. Мы тратим в 10 раз больше времени на чтение кода, чем на его написание. Clean Code JavaScript — это адаптация знаменитой книги Роберта Мартина "Чистый код" для мира JavaScript.

Как говорит автор репозитория Райан Макдермотт:

"Каждый кусок кода начинается как черновик, как мокрая глина, принимающая свою окончательную форму. Мы высекаем недочеты, когда проверяем его с коллегами."

5 ключевых принципов из репозитория

1. Осмысленные имена переменных

Первый шаг к чистому коду — правильные имена. Они должны быть:

Реклама
  • Произносимыми
  • Поисковыми (чтобы можно было найти через Ctrl+F)
  • Не требующими мысленного перевода

Плохо:

const yyyymmdstr = moment().format('YYYY/MM/DD');

Хорошо:

const currentDate = moment().format('YYYY/MM/DD');

2. Функции должны делать что-то одно

Эта ошибка встречается в 90% проектов. Функция — это не роман, а короткое стихотворение.

Плохо:

function emailClients(clients) {
  clients.forEach(client => {
    const record = database.lookup(client);
    if (record.isActive()) email(client);
  });
}

Хорошо:

function emailActiveClients(clients) {
  clients.filter(isActiveClient).forEach(email);
}

function isActiveClient(client) {
  const record = database.lookup(client);
  return record.isActive();
}

3. Избегайте побочных эффектов

Функция не должна изменять что-то вне своей зоны ответственности. Особенно это касается работы с массивами и объектами.

Плохо:

const addItemToCart = (cart, item) => {
  cart.push({ item, date: Date.now() });
};

Хорошо:

const addItemToCart = (cart, item) => {
  return [...cart, { item, date: Date.now() }];
};

4. SOLID для JavaScript

Принципы SOLID работают не только в Java и C#. Вот как выглядит Dependency Inversion в JS:

Плохо:

class InventoryTracker {
  constructor(items) {
    this.items = items;
    this.requester = new InventoryRequester();
  }
}

Хорошо:

class InventoryTracker {
  constructor(items, requester) {
    this.items = items;
    this.requester = requester;
  }
}

5. Тестируемость

Чистый код — это тестируемый код. Каждая функция должна иметь одну ответственность и предсказуемый результат.

Плохо:

describe('MomentJS', () => {
  it('handles all cases', () => {
    // 20 строк теста разных сценариев
  });
});

Хорошо:

describe('MomentJS', () => {
  it('handles 30-day months', () => {
    // один четкий сценарий
  });
  
  it('handles leap year', () => {
    // другой сценарий
  });
});

Кому будет полезен этот репозиторий?

  • Джуниор-разработчикам: Поймете, чем отличается рабочий код от хорошего кода
  • Тимлидам: Сможете использовать эти принципы для code review
  • Преподавателям: Получите отличные примеры для курсов по JavaScript
  • Фрилансерам: Клиенты ценят чистый и поддерживаемый код

Личный опыт внедрения

В моей практике был проект с 50 файлами по 500+ строк кода каждый. После внедрения принципов Clean Code:

  • Время добавления новых функций сократилось на 40%
  • Количество багов в production упало в 3 раза
  • Новые разработчики входили в проект в 2 раза быстрее

Как начать использовать?

  1. Добавьте репозиторий в закладки
  2. Выберите 2-3 правила, которые нарушаете чаще всего
  3. Начните применять их в новом коде
  4. Постепенно рефакторите старые участки

Как говорит автор: "Эти правила не догма, а руководство. Наша профессия молода, и мы все еще учимся".

Ссылки:

🍪 Мы используем файлы cookie и сервис аналитики Яндекс.Метрика, чтобы сайт работал лучше. Продолжая пользоваться devtrends.ru, вы соглашаетесь с обработкой данных согласно Политике конфиденциальности.