Чистые функции. Функциональное программирование
2 года назад·3 мин. на чтение
В этой статье на простых и доступных примерах рассмотрим одну из концепций функционального программирования - Чистые функции.
Это серия статей о функциональном программировании:
- Парадигмы программирования
- Композиция
- Функторы
- Каррирование
- Чистые функции (рассматривается в этой статье)
- Функции первого класса
Что такое чистая функция?
Чистая функция — это функция, которая является детерминированной и не производит побочных эффектов.Характеристики чистой функции
️1. Чистые функции должны быть детерминированными
Детерминированная функция — это функция, которая при одном и том же входеx
всегда должна иметь один и тот же результат y
.
Примеры недетерминированных функций
Math.random
const getRandom = () => Math.random()
- Функции
Date
const getDate = () => Date.now()
getUsers
Функцияconst getUsers = await fetch('/users')
getUsers
недетерминирована, потому что пользователи могли обновиться, нет подключения к интернету, сервер может быть недоступен или что-то еще.
Комментарии к примерам
Эти примеры считаются недетерминированными, потому что для одних и тех же входных данных выходные данные будут отличаться. Детерминизм означает, что функция никогда не изменит результат при одних и тех же входных данных.️2. Чистые функции не должна иметь побочных эффектов
Побочным эффектом может быть:- Внешняя зависимость (доступ к внешним переменным, потокам ввода/вывода, чтение/запись файлов или выполнение HTTP-вызовов).
- Мутация (мутации локальных/внешних переменных или переданных аргументов по ссылке).
Примеры побочных эффектов
- Функция
isLessThanMin
Чистая функцияconst min = 60 const isLessThanMin = value => value < min
Побочный эффект заключается во внешней зависимости. Для исправления используется внедрение зависимости (dependency injection).const isLessThanMin = (min, value) => value > min
- Функция для вычисления квадратов чисел
Чистая функцияconst squares = (nums) => { for(let i = 0; i < nums.length; i++) { nums[i] **= 2; } }
Побочный эффект заключается в наличии императивного кода, который выполняет мутации в исходном массиве по ссылке. Для исправления используется функциональныйconst squares = (nums) => nums.map(num => num * num)
.map
, который создает новый массив.
- Функция
updateUserAge
Чистая функцияconst updateUserAge = (user, age) => { user.age = age }
Побочный эффект заключается в мутации объектаconst updateUserAge = (user, age) => ({ ...user, age })
user
по ссылке. Нужно избегать изменения объектов по ссылке, вместо этого следует вернуть новый объект с новыми/обновленными свойствами.
- Функция
getFirst2Elements
Чистая функцияconst getFirst2Elements = (arr) => arr.splice(0, 2)
Побочный эффект заключается в мутированииconst getFirst2Elements = (arr) => arr.slice(0, 2)
arr
, переданного по ссылке методом .splice
. Для исправления используется функциональный метод .slice
, который не изменяет сам массив.
Почему функции с побочными эффектами - плохо?
У функций с побочными эффектами есть несколько очевидных недостатков:- Это делает функции тесно связанными с окружающей средой
- Увеличивает когнитивную нагрузку на разработчика
- Вызывает неочевидные изменения состояния
- Увеличивает кривую обучения кодовой базы разработчика
- Невозможность параллелизации
- Высокая непредсказуемость
- + потеря преимуществ чистых функций
Почему чистые функции - хорошо?
Можно вывести две основные категории улучшений. Улучшение опыта разработки (developer experience) и улучшение производительности приложений.Улучшение опыта разработки
Принимая во внимание тот факт, что наши функции теперь детерминированы, независимы и самодостаточны. Улучшения будут очевидны.- Предсказуемость: устранение внешних факторов и изменений среды сделает функции более предсказуемыми.
- Поддерживаемость: улучшается понимание кода.
- Композиция: независимость функций и связь только через ввод и вывод, что позволит нам легко составлять композицию функций.
- Тестируемость: самодостаточность и независимость функций выведут тестируемость на новый уровень.
Улучшение производительности
- Способность к кэшированию (мемоизация): детерминизм функций даст нам возможность предсказывать, каким будет вывод для определенного ввода, затем мы можем кэшировать функции на основе вводов.
- Возможность распараллеливания: поскольку функции теперь свободны от побочных эффектов и независимы, их можно легко распараллелить.
Настройка редактора IDE для работы с React
год назад·2 мин. на чтение
Правильно настроенный редактор может сделать код более понятным для чтения и более быстрым для написания. Это может даже помочь вам отловить ошибки, когда вы пишете код. Если вы впервые настраиваете редактор или хотите настроить текущий редактор, есть несколько рекомендаций.
Содержание туториала по React
Правильно настроенный редактор может сделать код более понятным для чтения и более быстрым для написания. Это может даже помочь вам отловить ошибки, когда вы пишете код. Если вы впервые настраиваете редактор или хотите настроить текущий редактор, есть несколько рекомендаций.
Выбор редактора кода
VS Code — один из самых популярных редакторов, используемых сегодня. Он имеет большой маркет с расширениями и хорошо интегрируется с популярными сервисами, такими как GitHub. Большинство функций, перечисленных ниже, также можно добавить в VS Code в качестве расширений, что делает его легко настраиваемым! Другие популярные текстовые редакторы, используемые в сообществе React:- WebStorm — это интегрированная среда разработки (IDE), разработанная специально для JavaScript.
- Sublime Text имеет поддержку JSX и TypeScript, встроенную подсветку синтаксиса и автозаполнение.
- Vim — это текстовый редактор с широкими возможностями настройки, созданный для эффективного создания и изменения любого типа текста. Он включен как «vi» в большинство UNIX систем и в Apple OS X.
Рекомендуемые функции редактора кода
Некоторые редакторы поставляются со встроенными функциями, но для других может потребоваться добавление расширения.Линтинг
Линтеры находят проблемы в коде по мере его написания, помогая вам исправить их на ранней стадии. ESLint — популярный линтер с открытым исходным кодом для JavaScript.- Установите ESLint с рекомендуемой конфигурацией для React (убедитесь, что у вас установлен Node.js)
- Интегрируйте ESLint в VS Code с официальным расширением
eslint-plugin-react-hooks
для своего проекта. Они необходимы и выявляют самые серьезные ошибки на ранней стадии. Рекомендуемый пресет (preset) eslint-config-react-app
уже включает их.
Форматирование кода
Prettier очистит ваш код, переформатировав его, чтобы он соответствовал предустановленным настраиваемым правилам. Запустите Prettier, и все ваши табы будут преобразованы в пробелы, а ваши отступы, кавычки и т. д. также будут изменены в соответствии с конфигурацией. В идеальной настройке Prettier будет запускаться, когда вы сохраняете файл, быстро внося эти изменения за вас. Вы можете установить расширение Prettier в VS Code, выполнив следующие действия:- Запустить VS Code
- Используйте быстрое открытие (нажмите
Ctrl/Cmd+P
) - Вставьте в
ext install esbenp.prettier-vscode
- Нажмите Enter
Форматирование при сохранении
В идеале вы должны форматировать свой код при каждом сохранении. В VS Code есть настройки для этого.- В VS Code нажмите
Ctrl/Cmd + Shift + P
. - Напишите
"settings"
- Нажмите Enter
- В строке поиска введите
"format on save"
. - Убедитесь, что опция
"format on save"
отмечена галочкой.
eslint-config-prettier
, чтобы ESLint использовался только для отлова логических ошибок. Если вы хотите принудительно отформатировать файлы перед слиянием пулл ревеста, используйте prettier --check
для непрерывной интеграции (Continuous Integration, CI).