Вайб-кодер от нуля до мастера в эпоху AI

Анализ от гаражного кодера:

А вот и нет, братан. Это не шаг вперёд, это прыжок в болото с крокодилами. Это одна из самых частых и опасных ошибок, которую совершают новички в JavaScript.

Цикл for...in НЕ ПРЕДНАЗНАЧЕН для итерации по массивам!

Он предназначен для итерации по перечисляемым свойствам объекта. И вот какие ужасы нас тут поджидают:

— Он итерирует по ключам, а не по значениям. Переменная index в нашем случае будет не числом, а строкой! «0», «1», «2» и так далее. Когда мы делаем sum += arr [index], JS может вести себя непредсказуемо, пытаясь сложить число и строку (хотя в данном случае он, скорее всего, справится и приведёт тип).

— Он может перебирать не только элементы массива. Если кто-то до тебя решил расширить прототип Array (что само по себе — ужасная практика), for...in вытащит и эти свойства.

— Смотри фокус:

Array.prototype.myCoolMethod = function () {/* … */}; const myArray = [10, 20, 30]; // Попробуем просуммировать с помощью for...in let sum = 0; for (const i in myArray) { console. log (`Индекс: $ {i}, Тип: $ {typeof i} `); sum += myArray [i]; } console. log («Сумма:», sum);

— Что мы увидим в консоли?

— Индекс: 0, Тип: string

— Индекс: 1, Тип: string

— Индекс: 2, Тип: string

— Индекс: myCoolMethod, Тип: string

— Сумма: 60function () {/* … */}

— Мы получили конкатенацию строки и функции! Наш результат — полный мусор.

— Порядок не гарантирован. Спецификация не гарантирует, что for...in будет обходить свойства в каком-то определённом порядке. Для массивов это обычно работает, но полагаться на это нельзя.

Вердикт: AI предложил нам инструмент, который выглядит как отвёртка, но на самом деле это молоток. Использовать for...in для массивов — это как забивать шурупы. Можно, но результат будет плачевным. Это явный признак того, что AI не всегда понимает семантику и назначение конструкций языка. Он просто видел, что «так тоже делают», и предложил нам.

Вариант №3: «Переусложнённый forEach»

Хорошо, мы снова недовольны. Просим ещё вариант. AI, вздохнув, решает показать нам, что он знает про функциональное программирование, и выдаёт forEach.

function sumArray (arr) { let sum = 0; arr.forEach (function (num) { sum += num; }); return sum; }

Что мы видим?

О, это уже гораздо лучше! Это декларативный подход. Мы не говорим как итерировать, мы говорим «для каждого элемента сделай вот это». Код стал чище, нет ручного управления индексом.

Анализ от гаражного кодера:

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

— Наличие сайд-эффекта: Мы создаём внешнюю переменную sum и мутируем (изменяем) её изнутри коллбэк-функции. Это называется сайд-эффект. В маленькой функции это не страшно. Но в большом приложении это может затруднять чтение и отладку кода.

— Есть инструмент получше: Для задачи «свернуть массив в одно значение» (а суммирование — это именно такая задача) в JavaScript есть специальный, более мощный и семантически верный инструмент.

Так как же надо было?! Вайб-кодерский подход

А теперь, братан, давай покажем нашему AI, как это делают настоящие пилоты. Для задачи «взять массив и получить из него одно-единственное значение» (будь то сумма, произведение, самый большой элемент или объект сложной структуры) существует метод. reduce ().

function sumArray (arr) { // Аккумулятор (acc) — это наша ’sum’ // Текущий элемент (current) — это наш ’arr [i]» // 0 — это начальное значение аккумулятора return arr.reduce ((acc, current) => acc + current, 0); }

Почему это — топ?

— Декларативность и чистота: Код превратился в одну строчку. Он читается как предложение: «Возьми массив arr, сверни его, начиная с нуля, складывая аккумулятор с текущим элементом».

— Отсутствие сайд-эффектов: Мы не создаём и не мутируем никаких внешних переменных. Функция получается более «чистой» и предсказуемой.

— Семантическая верность: Мы используем инструмент, который был создан именно для этой задачи. Это как использовать гаечный ключ нужного размера, а не пытаться крутить гайку пассатижами.

— Гибкость:.reduce () — это швейцарский нож для работы с массивами. Немного изменив коллбэк, ты можешь с его помощью делать невероятные вещи, которые циклами for писать было бы долго и муторно.

Почему AI не предложил. reduce () сразу?

Возможно, в его обучающей выборке циклов for и forEach для суммирования было больше, чем. reduce (). Новички часто боятся. reduce (), считая его сложным. Поэтому статистически он менее вероятен.

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

Вывод: не доверяй первому предложению

Эта история с циклами — идеальная иллюстрация нашего нового рабочего процесса.

— AI — генератор идей. Он может быстро накидать тебе несколько вариантов решения. Он как твой личный Stack Overflow, который не будет тебя хейтить за глупые вопросы.

— Ты — фильтр и архитектор. Твоя работа — проанализировать эти идеи. Отбросить откровенно плохие (for...in). Оценить компромиссы в «нормальных» (for, forEach). И выбрать самый оптимальный, самый чистый и самый правильный для данной задачи (reduce).

AI знает что можно использовать. Но только ты, пилот, знаешь что нужно использовать. Твой опыт, твоё знание контекста и лучших практик — вот что превращает сгенерированный код в качественный продукт.

Совет от гаражного кодера:

— Полюби декларативные методы. Выучи и начни использовать map, filter, reduce, find, some, every. Они делают код чище, короче и менее подверженным ошибкам, чем классические циклы for.

— Используй for… of для простых итераций. Если тебе не нужен. reduce, а просто нужно пройтись по значениям массива (без индексов), то самый современный и безопасный способ — это for… of: for (const num of arr) {…}. Он лишён всех недостатков for...in и чище, чем классический for.

— Устрой AI экзамен. Дай ему задачу и попроси решить её тремя разными способами. А потом сядь и для каждого способа напиши комментарий, почему он хорош или плох. Это отличное упражнение для закрепления материала.

— Спроси AI «почему?». После того, как он сгенерил код, спроси у него в чате: «Почему ты использовал здесь forEach, а не reduce?». Иногда его ответы могут быть на удивление толковыми и подсветить нюансы, о которых ты не думал.

— Практика: Рефакторим код, сгенерированный AI, до состояния «можно показывать сеньору»

Задача: фильтруем и форматируем пользователей

Представь, что мы пилим админку для интернет-магазина. Нам нужна функция, которая будет готовить данные для отображения списка «VIP-клиентов».

ТЗ (Техническое задание):

Написать функцию getVipClientList, которая принимает массив объектов-пользователей.

Каждый пользователь — это объект вида:

{id: 1, name: «John Doe’, email: '[e-mail]’, balance: 1500, orders: 12, last_login: «2025-07-10T12:00:00Z», status: ’active’}

Функция должна:

— Отфильтровать только «VIP-клиентов». VIP — это те, у кого статус active И баланс больше 1000 И количество заказов больше 10.

— Отформатировать отфильтрованных пользователей в новый, более простой вид для отображения. Новый объект должен содержать только id, name и новое поле report_line, которое будет строкой вида: «John Doe ([e-mail])».

— Вернуть массив этих отформатированных объектов.

Шаг 1. Пишем промпт и получаем «сырой» код

Давай сформулируем промпт для нашего AI. Достаточно детальный, но без сеньорских замашек. Так, как его написал бы уверенный миддл.

// Напиши функцию getVipClientList, которая принимает массив объектов-пользователей.

// 1. Отфильтруй пользователей: статус ’active’, баланс> 1000, заказов> 10.

// 2. Отформатируй результат: верни массив объектов с полями id, name

// и новым полем report_line в формате «Имя (email)».

Отправляем этот приказ в бездну нейронных сетей. Секунда ожидания… и Copilot/Cursor выдаёт нам первый драфт. Скорее всего, он будет выглядеть примерно так:

// — — — ВЕРСИЯ 1: СГЕНЕРИРОВАНО AI — — — function getVipClientList (users) { const vipClients = []; for (let i = 0; i <users. length; i++) { const user = users [i]; if (user.status == ’active’ && user.balance> 1000 && user. orders> 10) { vipClients. push (