10 типичных ошибок в коде и способы их предупреждения

Мы все через это проходили. Когда отличный код, созданный с нуля, запущен в производство, вы чувствуете себя рок-звездой веб-разработки.

А потом раздается леденящий душу звонок: “Сайт сломался!”. Оказалось, что одна ошибка создала бесконечную цепочку проблем, в результате чего все упало.

Учиться на ошибках — неотъемлемая часть профессии разработчика. Поэтому я решил разобрать с вами 10 ошибок, которые допустил в своем коде (или подметил в чужом) и которые могут загубить проект.

Понимание сути этих ошибок и знание способов их предупреждения поможет создавать чистый, эффективный и поддерживаемый код. В конечном итоге это избавит вас (и вашу команду) от убытков.

1. Отсутствие валидации пользовательского ввода

Пользователи могут быть изобретательными. Вредоносный ввод способен привести к уязвимостям безопасности, таким как SQL-инъекции или инъекции скриптов. Даже небольшие ошибки могут нарушить работу кода.

Плохой пример:

function handleLogin(username) {
  // Предполагается, что имя пользователя поступает из поля ввода
  fetch('/login', {
    method: 'POST',
    body: JSON.stringify({ username })
  })
  // ... обработка ответа
}

Хороший пример с валидацией:

import React, { useState } from 'react';

function Login() {
  const [username, setUsername] = useState('');
  const [errorMessage, setErrorMessage] = useState(null);

  const validateUsername = (username) => {
    const usernameRegex = /^[a-zA-Z0-9._]+$/; // Sample validation regex
    return usernameRegex.test(username);
  };

  const handleLogin = (e) => {
    e.preventDefault();
    const isValid = validateUsername(username);
    if (!isValid) {
      setErrorMessage('Invalid username format');
      return;
    }
    // Теперь можно смело отправлять имя пользователя на сервер
    fetch('/login', {
      // ...
    })
    .then(() => setErrorMessage(null)) // Очистка сообщения об ошибке
  };

  return (
    <form onSubmit={handleLogin}>
      {/* Username input field */}
      {errorMessage && <p className="error">{errorMessage}</p>}
      <button type="submit">Login</button>
    </form>
  );
}

Как избежать ошибки

Всегда проверяйте вводимые пользователем данные как на стороне клиента (с помощью таких фреймворков, как React Hook Form), так и на стороне сервера.

Очищайте и удаляйте все данные, которые будут использоваться в запросах или действиях.

2. Игнорирование форматирования кода и комментариев

Нечитаемый код может быть сложным для отладки и сопровождения. Непоследовательное форматирование затрудняет понимание логики процесса. Отсутствие комментариев держит будущих разработчиков (включая вас) в неведении.

Как избежать ошибки

Используйте линтеры и форматеры кода (например, ESLint и Prettier for React), чтобы гарантировать последовательное форматирование.

Пишите понятные и простые комментарии, которые разъясняют цель каждой части кода.

В будущем это поможет не только вам, но и всем тем, кому понадобится понять или изменить код.

3. Изобретение колеса (без надобности)

Да, вы можете создать уникальное выпадающее меню с нуля, но зачем? Есть множество проверенных библиотек (например, React Bootstrap или Material UI), которые помогут сэкономить время и силы.

Как избежать ошибки

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

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

4. Магические числа и жестко заданные значения

Использование магических чисел в коде затрудняет его понимание и сопровождение.

Представьте такую ситуацию: число 10 появляется во многих местах программы. Что оно обозначает? 10 пикселей отступа? 10-секундный тайм-аут?

Как избежать ошибки

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

Например, можно создать константу DEFAULT_PADDING со значением 10 и использовать ее во всех стилях компонентов.

5. Неоправданное использование глобальных переменных

Глобальные переменные могут привести к неожиданным последствиям и затруднить поиск ошибок.

Представьте глобальную переменную, которая хранит информацию о пользователе, вошедшем в систему в определенный момент. Изменение этой переменной в двух частях кода может привести к непредсказуемым результатам.

Как избежать ошибки

Управляйте потоком данных внутри компонентов с помощью локальных переменных или инъекции зависимостей.

В React это часто достигается путем отправки данных вниз через пропсы или управления состоянием приложения с помощью контекста.

6. Избыточная логика 

Комбинированные операторы if и слишком сложная (“макаронная”) логика могут привести к запутыванию кода.

Попробуйте сделать следующее:

    if (user.isActive) {
      // ... показать параметры активного администратора
    } else {
      // ... показать параметры неактивного администратора
    }
  } else {
    if (user.isPremium) {
      // ... показать параметры премиум-пользователя
    } else {
      // ... показать параметры обычного пользователя
    }
  }
}

Как избежать ошибки

Разбейте сложную логику на более простые многократно используемые функции. Это сделает код более читаемым, тестируемым и удобным для сопровождения.

Попробуйте использовать шаблоны проектирования, такие как “Стратегия”, для точного управления множеством условных действий.

7. Пренебрежение модульным тестированием

Конечно, сейчас код вроде бы работает, но что будет, если добавить в него новую функцию? Модульные тесты гарантируют корректную работу всех частей кода (например, функций или компонентов) после внесения в него изменений.

Как избежать ошибки

Создавайте модульные тесты для проекта, используя фреймворк для тестирования, например Jest (для React). Это позволит находить ошибки на ранней стадии и обеспечит уверенность в работе программы при изменении кода.

8. Неиспользование контроля версий

Представьте, что вы потеряли весь код из-за сбоя в работе жесткого диска! Системы контроля версий, такие как Git, станут спасением в этой ситуации.

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

Как избежать ошибки

Для контроля версий используйте Git.

Существует множество инструментов, которые помогут понять основы контроля версий в Git и использовать его в рабочем процессе.

9. Неумение планировать пограничные случаи

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

Как избежать ошибки

Думайте о пограничных сценариях в процессе проектирования и создавайте код для их корректной обработки. Это уменьшит количество непредвиденных ошибок и улучшит общий уровень пользовательского опыта.

10. Игнорирование лучших практик безопасности

Слабые места в системе безопасности кода могут привести к серьезным последствиям.

Всегда используйте лучшие практики безопасности, такие как надлежащая аутентификация пользователей, авторизация и санация ввода.

Как избежать ошибки

Следите за новейшими угрозами веб-безопасности и лучшими практиками.

В интернете можно найти множество ресурсов, которые помогут защитить веб-приложения.

Дальновидные стратегии по созданию качественного кода

Помимо осознания этих ошибок, я включаю в рабочий процесс следующие меры и инструменты.

• Линтеры и форматеры кода. Эти инструменты отлавливают ошибки и обеспечивают последовательное форматирование на ранних этапах, что экономит время на отладку и способствует чистоте кода.

• Модульное тестирование. Написание модульных тестов для критически важных частей кода гарантирует их ожидаемое функционирование и обеспечивает безопасность при будущих модификациях.

• Контроль версий (Git). Git позволяет отслеживать изменения, возвращаться к предыдущим версиям при необходимости и эффективно сотрудничать с другими разработчиками.

• Проверки кода. Регулярное проведение проверок кода совместно с членами команды помогают выявить потенциальные проблемы и улучшить общее качество кода.

• Постоянное обновление знаний и навыков. Сфера веб-разработки постоянно развивается. Я стараюсь быть в курсе последних событий.

Заключение

Помните, что написание чистого, удобного и эффективного кода — непрерывный процесс обучения.

Избегая этих распространенных ошибок и применяя упреждающие меры, вы сможете писать код, который не только будет хорошо работать сегодня, но и облегчит вашу жизнь (и жизнь вашей команды) в долгосрочной перспективе.

Читайте также:

• Двоичные деревья и двоичные деревья поиска
• VIM — это не только скорость
• Архитектура программного обеспечения — это совсем не просто

Читайте нас в Telegram, VK и Дзен

---

Перевод статьи Rehan Pinjari: 10 Code Mistakes Every Developer Makes (And How to Fix Them!)