Многоуровневое вложение кода (Deep nesting)

JavaScript известен своей сложной ситуацией, известной как «callback hell»:

Видите)};,повторяющийся начиная с середины кода? Это и есть пресловутый ад обратного вызова (callback hell). Этого можно избежать, но это история для еще одной статьи.

Но давайте рассмотрим нечто, что называется if hell.

callApi().then(function (result) { try { if (result.status === 0) { model.apiCall.success = true; if (result.data.items.length > 0) { model.apiCall.numOfItems = result.data.items.length; if (isValid(result.data) { model.apiCall.result = result.data; } } } } catch (e) { // suppress errors }});

Подсчитайте пары фигурных скобок { }. Шесть из которых вложены. Это слишком много. Этот блок кода трудно читать частично из-за того, что код вот-вот закроет правую сторону экрана, а программисты ненавидят горизонтальную прокрутку, ведь придется прочитать все условия if, чтобы выяснить, как вы попали на строку 10.

Теперь посмотрим на это:

callApi().then(function (result) { if (result.status!== 0) { return; } model.apiCall.success = true; if (result.data.items.length <= 0) { return; } model.apiCall.numOfItems = result.data.items.length; if (!isValid(result.data)) { return; } model.apiCall.result = result.data;});

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

Кроме этого, были удалены блоки try-catch, потому что не нужно подавлять ошибки. Ошибки — ваш друг, и без них приложение станет мусором.

Чистые функции

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

Это чистая функция:

function getSumOfSquares(number1, number2) { return (number1 * number1) + (number2 * number2);}

А это не чистая функция:

function getSumOfExponents(number1, number2) { scope.sum = Math.pow(number1, scope.exp) + Math.pow(number2, scope.exp);}

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

Если же надо сделать отладку второй функции, то придется перерыть всю программу, чтобы убедиться, что найдены все места, где доступны scope.sum и scope.exp. И если нужно переместить эту функцию в другой класс, придется проверить, имеет ли она доступ ко всем тем же областям.

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