На своей первой работе я освоил много новых навыков, но один навык открыл мне глаза.

Любой дурак может написать код, понятный компьютеру. Хорошие программисты пишут код, понятный людям. — Мартин Фаулер

Когда я только начинал и мне приходилось просматривать код, я в основном искал синтаксические проблемы и код, который, похоже, не работает. Однако я пренебрегал читабельностью и простотой кода. Именно так и было, когда я просматривал интерфейсный код Java-программиста. В JavaScript существуют удобные методы, которые Java-программисты не умеют использовать.

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

Вот пример кода, который делает самое простое:

Задание: преобразовать слово (в формате символов подчеркивания) в регистр Паскаля с пробелами.

Тестовые случаи:

  1. hello_world → Привет, мир
  2. give_me_my_money → Дай мне мои деньги
  3. 1 → не определено
  4. истина → не определено

Так что же не так с этим кодом? Я имею в виду, это работает…

  1. let? Мы не переназначаем части, поэтому мы должны использовать const.
  2. for loop? У нас есть map, так почему бы нам не использовать это. Я имею в виду, что for loop намного более эффективен, но с точки зрения удобочитаемости map побеждает.
  3. typeToHeaderName? Чтобы сделать его читаемым с первого раза, мы должны использовать verb в начале переменной.

Как насчет этого сейчас?

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

Давайте попробуем это:

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

  1. Метод принимает type, отлично.
  2. Мы преобразуем его во все строчные буквы.
  3. Мы разделим type на _ в массив.
  4. Мы пройдемся по этому массиву, и он вернет новое слово.
  5. Мы присоединим массив через пробел.

Теперь гораздо лучше! Но всегда есть но, единственная неясная часть — это шаг 4. Недавно я прочитал о бесточечном программировании, и мне понравилась эта концепция. Есть недостатки, такие как объявление переменных для методов.

[Бесточечное программирование] направлено на то, чтобы уменьшить визуальный беспорядок, удалив ненужное сопоставление параметров и аргументов. — Кайл Симпсон, Functional-Light JavaScript

Теперь, когда мы смотрим на шаг 4, мы знаем, что делаем первую букву слова заглавной, когда перебираем массив слов.

Я создал две дополнительные переменные capitalizedFirstLetter и remainingLetters, чтобы их было легче читать. Вы сразу знаете, что возвращается в capitalizeFirstLetter. Если вы думаете, что это постороннее, вам не нужно; вы можете просто сделать это:

const capitalizeFirstLetter = (word) => {
  return `${word[0].toUpperCase()}${word.substring(1)}`;
};

Наконец, давайте сравним первый фрагмент кода с самым последним фрагментом кода до и после.

До:

После:

Не знаю, как вам, а мне второй вариант больше нравится. Это еще три строки кода, но он быстрее и легче читается.

Есть еще одна вещь, которую мы должны сделать, и это учитывать крайние случаи. Для этого мы можем просто добавить эту строку выше line 8.

if (typeof type !== 'string') return;

Я просто ничего не верну, что оценивается как undefined. Если вы хотите выполнить дополнительную обработку ошибок, вы можете отправить обратно сообщение об ошибке. Вам решать!

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