0
15279

Прощай, плохой код: вот как не лажать в JavaScript

На JavaScript легко писать работающие решения, но легко и совершать ошибки. Рассказываем и показываем, как стать лучше в JavaScript.

Прощай, плохой код: вот как не лажать в JavaScript

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

В то же время JavaScript никак не ограничивает разработчиков. Дать его человеку без опыта – всё равно что дать спички двухлетнему ребёнку вместе с канистрой бензина.

На заметку начинающим

В этой статье обильно используются функции ES6. Убедитесь, что вы знакомы с ES6, прежде чем продолжить чтение. Давайте вспомним:

// ---------------------------------------------
// лямбда (толстая стрелка) анонимная функция
// ---------------------------------------------

const doStuff = (a, b, c) => {...}

// то же самое:
function doStuff(a, b, c) {
  ...
}

  
// ---------------------------------------------  
// деструктуризация объекта
// ---------------------------------------------
  
const doStuff = ({a, b, c}) => {
  console.log(a);
}
  
// то же самое:
const doStuff = (params) => {
  const {a, b, c} = params;
  
  console.log(a);
} 
                              
// то же самое:                             
const doStuff = (params) => {  
  console.log(params.a);
}

                              
// ---------------------------------------------                            
// деструктуризация массива
// ---------------------------------------------

const [a, b] = [1, 2];
                              
// то же самое:
const array = [1, 2];
const a = array[0];
const b = array[1];

Оснастка

Прощай, плохой код: вот как не лажать в JavaScript

Одно из достоинств JavaScript – обилие инструментов. Воспользуемся этим преимуществом на примере ESLint.

ESLint – утилита статического анализа кода и главный помощник в поиске потенциальных проблем, а также в поддержке высокого качества кода. Самое лучшее: линтинг – полностью автоматический процесс, который предотвращает проникновение низкокачественного кода в исходники.

Многие едва используют ESLint: они просто включают предустановленный конфиг типа eslint-config-airbnb и думают, что на этом можно закончить. Такой подход не раскрывает возможностей ESLint. В JavaScript нет ограничений. Неадекватная настройка линтинга имеет далеко идущие последствия.

Конечно, полезно знать все функции языка. Но опытный разработчик также знает, какие функции не стоит использовать. JavaScript – это старый язык с большим багажом, включающим всё. Важно отделять хорошие части от плохих.

Настройка ESLint

Решили воспользоваться советами из этой статьи? Тогда настройте ESLint следующим образом. Познакомьтесь со всеми подсказками поочерёдно и включайте правила в свой проект одно за другим. Настройте их изначально как warn, позже вы сможете конвертировать некоторые правила в error.

Запустите в корне вашего проекта:

npm i -D eslint
npm i -D eslint-plugin-fp

Там же создайте файл .eslintrc.yml:

env:
  es6: true
 
plugins:
  fp
  
rules:
  # здесь будут правила

Используете VSCode? Установите плагин ESLint.

Вы можете запускать ESLint вручную в командной строке:

npx eslint .

Самый большой источник сложности

Прощай, плохой код. Здравствуй, улучшенный JavaScript!

Возможно, это прозвучит странно, но код сам по себе – самый большой источник сложности. По факту, лучший способ писать безопасный и стабильный софт – это не писать его. К сожалению или к счастью, это не всегда возможно. Поэтому второй лучший способ – снизить количество кода. Меньше кода – меньше сложность, вот так легко! Малое количество кода уменьшает вероятность возникновения багов. Говорят, что джуниор пишет код, а сеньор удаляет :)

Длинные функции

Давайте рассмотрим следующий отрывок кода express.js, который обновляет запись в блоге:

router.put('/api/blog/posts/:id', (req, res) => {
  if (!req.body.title) {
    return res.status(400).json({
      error: 'title is required',
    });
  }
  
  if (!req.body.text) {
    return res.status(400).json({
      error: 'text is required',
    });
  }
  
  const postId = parseInt(req.params.id);

  let blogPost;
  let postIndex;
  blogPosts.forEach((post, i) => {
    if (post.id === postId) {
      blogPost = post;
      postIndex = i;
    }
  });

  if (!blogPost) {
    return res.status(404).json({
      error: 'post not found',
    });
  }

  const updatedBlogPost = {
    id: postId,
    title: req.body.title,
    text: req.body.text
  };

  blogPosts.splice(postIndex, 1, updatedBlogPost);

  return res.json({
    updatedBlogPost,
  });
});

Тело функции длиной в 38 строк выполняет несколько действий: считывает id публикации, находит существующий пост в блоге, проверяет пользовательский ввод, возвращает ошибки в случае неверного ввода, обновляет коллекцию постов и возвращает обновлённые посты.

Определённо можно провести рефакторинг на несколько малых функций. Конечный обработчик маршрута будет выглядеть так:

router.put("/api/blog/posts/:id", (req, res) => {
  const { error: validationError } = validateInput(req.body);
  if (validationError) return errorResponse(res, validationError, 400);

  const { blogPost } = findBlogPost(blogPosts, req.params.id);

  const { error: postError } = validateBlogPost(blogPost);
  if (postError) return errorResponse(res, postError, 404);

  const updatedBlogPost = buildUpdatedBlogPost(req.body);

  updateBlogPosts(blogPosts, updatedBlogPost);
  
  return res.json({updatedBlogPost});
});

Рекомендованный конфиг ESLint:

rules:
  max-lines-per-function:
  - warn
  - 20

Сложные функции

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

Вот пример функции с глубоко вложенными обратными вызовами:

fs.readdir(source, function (err, files) {
  if (err) {
    console.error('Error finding files: ' + err)
  } else {
    files.forEach(function (filename, fileIndex) {
      gm(source + filename).size(function (err, values) {
        if (err) {
          console.error('Error identifying file size: ' + err)
        } else {
          aspect = (values.width / values.height)
          widths.forEach(function (width, widthIndex) {
            height = Math.round(width / aspect)
            this.resize(width, height).write(dest + 'w' + width + '_' + filename, function(err) {
              if (err) console.error('Error writing file: ' + err)
            })
          }.bind(this))
        }
      })
    })
  }
})

Цикломатическая сложность

Очередной существенный источник сложности функций – цикломатическая сложность. Если коротко, она ссылается на количество операторов (логики) в любой данной функции. Имеются в виду оператор if, циклы и оператор switch. Такие функции тяжело понять, а их использование должно быть ограниченным. Пример:

if (conditionA) {
  if (conditionB) {
    while (conditionC) {
      if (conditionD && conditionE || conditionF) {
        ...
      }
    }
  }
}

Рекомендованный конфиг ESLint:

rules:
  complexity:
  - warn
  - 5
  
  max-nested-callbacks:
  - warn
  - 2
  max-depth:
  - warn
  - 3

Есть ещё один способ уменьшить количество кода, а вместе с тем и его сложность. Подробнее о декларативном коде позже.

Изменчивое состояние

Прощай, плохой код. Здравствуй, улучшенный JavaScript!

Состояние – это временные данные, хранящиеся в памяти. Это могут быть переменные или поля внутри объектов. Само по себе состояние неопасно. В то время как изменчивое состояние является одним из самых больших источников сложности софта, особенно в ООП.

Проблемы с изменчивым состоянием

Посмотрим на практике, как изменчивое состояние может сделать код проблемным:

const increasePrice = (item, increaseBy) => {
  // никогда не делайте этого
  item.price += increaseBy;

  return item;
};

const oldItem = { price: 10 };

const newItem = increasePrice(oldItem, 3);

// выводит newItem.price 13
console.log('newItem.price', newItem.price);

// выводит oldItem.price 13
// неожиданно??
console.log('oldItem.price', oldItem.price);

Этот баг коварен, но изменяя аргументы функции, мы случайно изменили цену исходного элемента. Он должен был остаться равным 10, но в реальности поменялся на 13!

Как избежать таких проблем? Созданием и возвратом нового объекта:

const increasePrice = (item, increaseBy) => ({
  ...item,
  price: item.price + increaseBy
});

const oldItem = { price: 10 };

const newItem = increasePrice(oldItem, 3);

// выводит newItem.price 13
console.log('newItem.price', newItem.price);

// выводит oldItem.price 10
// как и ожидалось!
console.log('oldItem.price', oldItem.price);

Рекомендованный конфиг ESLint:

rules:
  fp/no-mutation: warn
  no-param-reassign: warn

Не используйте метод push с массивами

Те же проблемы свойственны в изменении массивов при использовании таких методов, как push:

const a = ['apple', 'orange'];
const b = a;

a.push('microsoft')

// ['apple', 'orange', 'microsoft']
console.log(a);

// ['apple', 'orange', 'microsoft']
// неожиданно?
console.log(b);

Кажется, вы ожидали, что массив b не изменится? Эту ошибку можно обойти, создав новый массив вместо вызова push.

Подобные ошибки легко предотвратить созданием нового массива:

const newArray = [...a, 'microsoft'];

Рекомендованный конфиг ESLint:

rules:
  fp/no-mutating-assign: warn
  fp/no-mutating-methods: warn
  fp/no-mutation: warn

Избегайте использования let

Прощай, плохой код. Здравствуй, улучшенный JavaScript!

Да, var никогда не используется для объявления переменных в JavaScript. Этим никого не удивишь. Тем не менее, вы можете удивиться, узнав, что нужно избегать использования ключевого слова let. Переменные, объявленные  с помощью let, можно переназначить, что затруднит понимание кода. Программируя с ключевым словом let, мы вынуждены держать в уме все возможные побочные эффекты. Можно случайно назначить неправильное значение переменной и тратить время на отладку.

Так каковы альтернативы let? Кончено же const! Хотя оно не гарантирует неизменность, оно улучшает читаемость кода, запрещая переназначения. И, честно говоря, вам не нужен let – в большинстве случаев код, который переназначает переменные можно вынести в отдельную функцию. Давайте посмотрим пример:

let discount;

if (isLoggedIn) {
  if (cartTotal > 100  && !isFriday) {
    discount = 30;
  } else if (!isValuedCustomer) {
    discount = 20;
  } else {
    discount = 10;
  }
} else {
  discount = 0;
}

И тот же пример, извлечённый в функцию:

const getDiscount = ({isLoggedIn, cartTotal, isValuedCustomer}) => {
  if (!isLoggedIn) {
    return 0;
  }

  if (cartTotal > 100  && !isFriday()) {
    return 30;
  }
  
  if (!isValuedCustomer) {
    return 20;
  }
  
  return 10;
}

Рекомендованный конфиг ESLint:

rules:
  fp/no-let: warn

Декларативный код

Прощай, плохой код. Здравствуй, улучшенный JavaScript!

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

Примеры распространённых декларативных языков – это SQL и HTML. И даже JSX в React!

Мы не говорим базе данных, как получить данные, и не указываем конкретные шаги. Вместо этого мы используем SQL, чтобы описать то, что нам нужно:

SELECT * FROM Users WHERE Country='USA';

Это можно представить грубо в императивном JavaScript:

let user = null;

for (const u of users) {
  if (u.country === 'USA') {
    user = u;
    break;
  }
}

Или в декларативном JavaScript, используя экспериментальный оператор конвейера:

import { filter, first } from 'lodash/fp';

const filterByCountry =
  country => filter( user => user.country === country );

const user =
  users
  |> filterByCountry('USA')
  |> first;

Какой способ вы бы предпочли?

Предпочитайте выражения операторам

Если наша цель – писать декларативный код, выражения должны быть предпочтительней операторов. Выражения всегда возвращают значение, в то время как операторы используются для выполнения действия и не возвращают результат. В функциональном программировании это называется «побочным эффектом». Кстати, изменчивое состояние, описанное ранее, – тоже побочный эффект.

Какие операторы обычно используются? Считайте таковыми if, return, switch, for, while.

Давайте посмотрим на простой пример:

const calculateStuff = input => {
  if (input.x) {
    return superCalculator(input.x); 
  }
  
  return dumbCalculator(input.y);
};

Это можно легко переписать в троичное выражение (которое декларативно):

const calculateStuff = input => {
  return input.x
          ? superCalculator(input.x)
          : dumbCalculator(input.y);
};

И если в лямбда-функции содержится только оператор возврата, JavaScript позволяет нам избавиться от лямбда-оператора:

const calculateStuff = input =>
  input.x ? superCalculator(input.x) : dumbCalculator(input.y);

Тело функции сократилось с шести строчек кода до одной-единственной. Супермощь декларативного кода!

Декларативное программирование требует усилий

Декларативному программированию нельзя научиться за ночь. Особенно учитывая то, что большинство людей в основном обучались императивному программированию. Декларативное программирование требует дисциплины и умения мыслить совершенно по-новому. Как научиться декларативному программированию? Первым делом научиться программировать без изменчивого состояния – не использовать ключевое слово let и не изменять состояние.

Рекомендованный конфиг ESLint:

rules:
  fp/no-let: warn
  fp/no-loops: warn
  fp/no-mutating-assign: warn
  fp/no-mutating-methods: warn
  fp/no-mutation: warn
  fp/no-delete: warn

Избегайте передачи множества параметров функциям

Прощай, плохой код. Здравствуй, улучшенный JavaScript!

JavaScript – это не статически типизированный язык, и в нём нет гарантированного вызова функции с правильными и ожидаемыми параметрами. ES6 вносит много классных функций, включая деструктуризацию объектов, которую можно использовать для аргументов функции.

Вам понятен следующий код? Вы можете сразу сказать, каковы параметры?

const total = computeShoppingCartTotal(itemList, 10.0, 'USD');

А как насчёт этого примера?

const computeShoppingCartTotal = ({ itemList, discount, currency }) => {...};

const total = computeShoppingCartTotal({ itemList, discount: 10.0, currency: 'USD' });

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

Рекомендованный конфиг ESLint:

rules:
  max-params:
  - warn
  - 2

Предпочитайте возврат объектов из функций

Как много следующий отрывок говорит вам о сигнатуре функции? Что она возвращает? Она возвращает объект пользователя, id пользователя, статус операции? Сложно понять без окружающего контекста.

const result = saveUser(...);

Возврат объекта из функции ясно отражает намерения разработчика, а код становится более читаемым:

const { user, status } = saveUser(...);
                                 
...

const saveUser = user => {
   ...

   return {
     user: savedUser,
     status: "ok"
   };
};

Исключения для контроля выполнения

Прощай, плохой код. Здравствуй, улучшенный JavaScript!

Вам понравится Internal Server Error 500 при попытке неверного ввода в форму? Как насчёт работы с API, которое не даёт никаких деталей и выводит только эту ошибку? Наверняка с подобной проблемой сталкивались все, и это нельзя назвать приятным опытом.

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

Исключения ломают безопасность типов

Даже в статически типизированных языках. В соответствии со своей сигнатурой функция fetchUser(id: number): User должна возвращать пользователя. В сигнатуре нет и намёка на исключение в случае, если пользователь не найден. Если ожидается исключение, то более подходящей сигнатурой будет: fetchUser(...): User|throws UserNotFoundError. Конечно, такой синтаксис неверен вне зависимости от языка.

Сложно понять программу с исключениями – можно никогда не узнать, будет ли функция генерировать исключение. Да, можно обернуть каждый отдельный вызов функции в блок try/catch, но это непрактично и снизит читаемость кода.

Исключения ломают композицию функции

Исключения делают виртуально невозможным использование композиции функции. В следующем примере сервер возвращает 500 Internal Error, если один из постов блога не может быть найден:

const fetchBlogPost = id => {
  const post = api.fetch(`/api/post/${id}`);

  if (!post) throw new Error(`Post with id ${id} not found`);

  return post;
};

const html = postIds |> map(fetchBlogPost) |> renderHTMLTemplate;

Что, если один из постов был удалён, но пользователь всё ещё пытается получить доступ к посту из-за неизвестного бага? Это существенно снизит user experience.

Кортежи как альтернативный способ обработки ошибок

Не вдаваясь в подробности функционального программирования: простой способ обработки ошибок – это возврат кортежа, содержащего результат и ошибку вместо генерации исключения. Да, JavaScript не поддерживает кортежи, но их легко эмулировать с помощью двузначного массива в форме [error, result]. Кстати, это хороший способ обработки ошибок в Go:

const fetchBlogPost = id => {
  const post = api.fetch(`/api/post/${id}`);

  return post
      // null для ошибки, если пост был найден
    ?  [null, post]
      // null для результата, если пост был найден
    :  [`Post with id ${id} not found`, null];
};

const blogPosts = postIds |> map(fetchBlogPost);

const errors =
  blogPosts
  |> filter(([err]) => !!err)  // хранить только элементы с ошибками
  |> map(([err]) => err); // деструктуризировать кортеж и вернуть ошибку

const html =
  blogPosts
  |> filter(([err]) => !err)  // хранить только элементы без ошибок
  |> map(([_, result]) => result)  // деструктуризировать кортеж и вернуть результат
  |> renderHTML;

Иногда исключения – это нормально

Исключения до сих пор имеют своё место в коде. Как правило, вы должны задать себе один вопрос: хочу ли я, чтобы программа упала? Любое сгенерированное исключение может сорвать весь процесс. Даже если мы тщательно продумали все потенциальные крайние случаи, исключения всё ещё небезопасны, и вызовут падение программы когда-нибудь в будущем. Генерируйте исключения, только когда вы действительно намерены «уронить» программу, например, из-за ошибки разработчика, или неудавшегося подключения к базе данных.

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

Что дальше?

Прощай, плохой код. Здравствуй, улучшенный JavaScript!

Вам действительно нужен стабильный код? Решать вам. Ваша организация приравнивает продуктивность разработчиков к числу завершённых историй в Jira? Вы работаете на «фабрике идей», которая не ценит ничего, кроме количества нововведений? Надеемся нет. Но если это так, подумайте о лучшем месте работы...

Возможно, применять всё сразу из этой статьи не стоит. Добавляйте статью в закладки и возвращайтесь. Каждый раз выбирайте одну вещь, на которой вы намеренно сосредоточитесь. И включите соответствующие правила ESLint – главного помощника в вашем путешествии.

Какие ошибки в написании кода чаще всего совершаете вы? ;)

РУБРИКИ В СТАТЬЕ

МЕРОПРИЯТИЯ

05 декабря Санкт-Петербург Бесплатно
05 декабря Москва Бесплатно
04 декабря Москва Бесплатно
28 ноября Онлайн 48000 RUB

Комментарии 0

ЛУЧШИЕ СТАТЬИ ПО ТЕМЕ

BUG