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

visibility 105
13 Янв 2023г. в 09:11

На 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 – главного помощника в вашем путешествии.

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



Оставить комментарий

Ваше имя::


Комментарий::




Ничего не найдено