Почему я больше не цепляю всё в JavaScript — Мэтт Смит

Я раньше писал много JavaScript вот так:

const result = users
  .filter(user => user.active)
  .map(user => user.name)
  .sort()
  .slice(0, 5);

Здесь нет ничего плохого. Я писал такой код постоянно. Но это ровно тот тип вещей, который сначала кажется нормальным, а потом постепенно становится труднее с ним работать.

Цепочки — это здорово… пока нет

Проблема не в .map() или .filter(). Проблема в том, что происходит, когда вы складываете их друг на друга. Вы перестаёте писать шаги и начинаете писать конвейеры.

Конвейеры выглядят аккуратно, но вам всё равно приходится мысленно проходить их: filter → map → sort → slice.

Это нормально один-два раза. Делайте так по всему файлу — и это начинает вас утомлять.

Сравните это с таким подходом:

const activeUsers = users.filter(user => user.active);
const names = activeUsers.map(user => user.name);

names.sort();

return names.slice(0, 5);

Да, строк больше. Но каждый шаг просто лежит там. Никакого «декодирования» не требуется.

Та же проблема, три способа написать

Вот тот же самый замысел, записанный тремя разными способами.

Если я делаю цепочку:

users.filter(u => u.active).map(u => u.name)[0]

Это выглядит опрятно. Раньше я часто тянулся к такому. Но оно обрабатывает всё, хотя мне нужен только один результат.

Если я пишу по шагам:

const user = users.find(u => u.active);
const name = user?.name;

Обычно я прихожу именно к этому. Это останавливается раньше, и если что-то кажется странным, я могу проверить каждую часть.

Если мне нужен полный контроль:

for (const u of users) {
  if (u.active) return u.name;
}

Это самое явное, и, честно говоря, иногда самое понятное, когда мне правда важно, что именно происходит.

Где становится немного грязно

Это проявляется быстрее всего, когда вы пытаетесь отлаживать.

Допустим, что-то кажется не так, и вы хотите проверить отфильтрованные результаты. С цепочкой вы в итоге делаете вот так:

const result = users
  .filter(user => {
    console.log(user);
    return user.active;
  })
  .map(user => user.name);

Теперь ваша логика смешана с отладочным кодом. Или вы сдаётесь и всё равно разрываете цепочку на части.

Можно в итоге сделать больше работы, чем нужно

Цепочки подталкивают к «обработай всё», даже когда вы этого не имели в виду.

const firstActiveUser = users
  .filter(user => user.active)
  .map(user => user.name)[0];

Сначала это фильтрует весь массив, затем мапит результат, а потом берёт один элемент.

А на самом деле вы хотели:

const user = users.find(user => user.active);
const name = user?.name;

Или:

for (const user of users) {
  if (user.active) {
    return user.name;
  }
}

Где это начинает болеть

Это не только про читаемость. Эта лишняя работа накапливается на больших массивах или в «горячих» участках кода. А длинные цепочки могут неожиданно раздражать при отладке в продакшене.

Я раньше писал довольно жуткие цепочки. Возвращаться к ним позже —… унизительно.

Плавность не всегда означает ясность

Есть причина, почему цепочки популярны: сначала они читаются красиво.

data
  .transform()
  .normalize()
  .validate()
  .save();

Но теперь вы начинаете гадать, что возвращает каждый шаг, куда вообще вставить брейкпоинт и можно ли что-то из этого переиспользовать.

Разбиение на шаги сразу отвечает на эти вопросы.

Асинхронные цепочки имеют ту же проблему

Цепочки промисов могут выглядеть элегантно:

const data = await fetchUsers()
  .then(res => res.json())
  .then(users => users.filter(u => u.active))
  .then(users => users.map(u => u.name));

Но теперь вы смешиваете асинхронное управление потоком (получение, парсинг) с преобразованием данных в одной цепочке.

Разделить обычно проще и понятнее:

const res = await fetchUsers();
const users = await res.json();
const activeNames = users.filter(u => u.active).map(u => u.name);

Грубое правило, которому я следую

Длина цепочки	Рекомендация	Пример
1 шаг	Вполне нормально	users.map(u => u.name)
2 шага	Обычно нормально	users.filter(u => u.active).map(u => u.name)
3–4 шага	Пауза, подумайте о разбиении	users.filter(...).map(...).sort(...).slice(...)
5+ шагов	Определённо разбить на шаги	Сложные преобразования или асинхронные цепочки

Я не говорю «никогда не цепляйте»

Короткие цепочки — это нормально. Я всё ещё пишу их. Как только я дохожу до трёх-четырёх шагов, я делаю паузу.

Как я думаю об этом сейчас

Цепочки отлично подходят, когда вы быстро пишете код. Разбиение на шаги лучше, когда этот код нужно будет читать позже.

Это не одно и то же.

Как я обычно «распутываю» это

Шаг	Что сделать	Пример
1	Назвать промежуточные значения	const activeUsers = users.filter(u => u.active)
2	Логически разделить преобразования	const names = activeUsers.map(u => u.name)
3	Цепочкой только то, что понятно	names.sort()

Это спасло меня от множества головных болей.

JavaScript даёт вам много инструментов, но вам не нужно использовать их все сразу.

JavaScript