Чистые функции. Функциональное программирование
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) и улучшение производительности приложений.Улучшение опыта разработки
Принимая во внимание тот факт, что наши функции теперь детерминированы, независимы и самодостаточны. Улучшения будут очевидны.- Предсказуемость: устранение внешних факторов и изменений среды сделает функции более предсказуемыми.
- Поддерживаемость: улучшается понимание кода.
- Композиция: независимость функций и связь только через ввод и вывод, что позволит нам легко составлять композицию функций.
- Тестируемость: самодостаточность и независимость функций выведут тестируемость на новый уровень.
Улучшение производительности
- Способность к кэшированию (мемоизация): детерминизм функций даст нам возможность предсказывать, каким будет вывод для определенного ввода, затем мы можем кэшировать функции на основе вводов.
- Возможность распараллеливания: поскольку функции теперь свободны от побочных эффектов и независимы, их можно легко распараллелить.
Как подписаться на изменения LocalStorage
2 года назад·3 мин. на чтение
Нередко возникает необходимость подписаться на изменения значений в LocalStorage. В этой статье напишем универсальную реализацию, которая не будет привязана к определенному фреймворку.
Иногда есть необходимость подписываться на изменения значений в LocalStorage и быстро на них реагировать. В этой статье напишем универсальную реализацию на JavaScript, которая не будет привязана к определенному фреймворку. Нужно будет просто добавить необходимую прослойку. В React этой прослойкой будет являться кастомный хук, отвечающий за подписку/отписку на событие внутри
Прослушивание нативного события
Это событие будет полезно если есть необходимость следить за изменением localStorage из другого документа, т.е. между вкладками.
Это событие не отправляется при изменениях localStorage на той же странице. Оно будет полезно для общения разных страниц одного и того же домена. Страницы разных доменов не имеют доступа к localStorage друг друга.
useEffect
.
Реализация будет состоять из нескольких частей:
- Реализация шины событий
- Класс-обертка для работы с LocalStorage
- Прослушивание нативного события
storage
- Добавление в React-компонент
Шина событий
Есть множество паттернов для реализации отправки и прослушивания изменений объектов. Возьмем за основу паттерн Pub/Sub (Издатель/Подписчик) и реализуем класс для шины событий.// EventBus.js class EventBus { constructor() { this.topics = {}; } notify(key, value) { this.topics[key]?.forEach((cb) => { cb(value); }); } subscribe(key, cb) { if (!this.topics[key]) { this.topics[key] = []; } this.topics[key].push(cb); } unsubscribe(key, cb) { this.topics = this.topics[key]?.filter((_cb) => _cb !== cb); } }
Класс-обертка для работы с LocalStorage
Сервис для работы localStorage будет содержать экземпляр шины событий. При установке нового значения по ключу мы будем оповещать подписчиков этого ключа и сохранять значение в localStorage . При помощи методаsubscribe
можно будет подписаться на изменения значений по переданному ключу. Этот метод также возвращает функцию для отписки. Метод getItem
просто отдает значение из localStorage по ключу. В нем при необходимости можно реализовать логику парсинга для чтения объектов из localStorage.
// LocalStorageService.js class LocalStorageService { constructor() { this.eventBus = new EventBus(); } getItem(key) { return window.localStorage.getItem(key); } setItem(key, value) { const oldValue = this.getItem(key, value); if (oldValue === value) return; // если значение не изменилось - ничего не делаем window.localStorage.setItem(key, value); this.eventBus.notify(key, value); } subscribe(key, cb) { this.eventBus.subscribe(key, cb); return () => this.eventBus.unsubscribe(key, cb); } } // экспортируем экземпляр класса export const localStorageService = new LocalStorageService();
Прослушивание нативного события storage
Это событие будет полезно если есть необходимость следить за изменением localStorage из другого документа, т.е. между вкладками.
Это событие не отправляется при изменениях localStorage на той же странице. Оно будет полезно для общения разных страниц одного и того же домена. Страницы разных доменов не имеют доступа к localStorage друг друга.
StorageEvent
наследуется от класса Event
и имеет следующие поля:
Добавим подписку на событиеconst storageEvent = { key: "token", // ключ, значение которого изменилось newValue: "token_value_b", // новое значение oldValue: "token_value_a", // старое значение storageArea { // объект хранилища со всеми ключами и их значениями token: "token_value_a", user_settings: "", length: 2 }, url: "http://localhost:3001/" // url документа, ключ которого изменился }
storage
.
Теперь если продублировать приложение в соседней вкладке и изменить токен, обновленный токен появится и на первой вкладке. Если изменить значение ключа в localStorage вручную через devtools, то обновленное значение также появится и в интерфейсе приложения.class LocalStorageService { constructor() { this.eventBus = new EventBus(); this.handleStorage = this.handleStorage.bind(this); // свяжем функцию с контекстом window.addEventListener('storage', this.handleStorage); // подпишемся на событие storage } // добавим функцию для обработки события storage handleStorage(event) { this.eventBus.notify(event.key, event.newValue); } //… }
Добавление в React-компонент
Добавим кастомный хукuseLocalStorageKey
, который будет принимать ключ, значение которого будет прослушивать.
И добавим вызов хука в компонент. Две кнопки просто устанавливают разные значения токена.// useLocalStorageKey.js import { useEffect, useState } from 'react'; import { localStorageService } from './LocalStorageService'; export const useLocalStorageKey = (key) => { const [value, setValue] = useState(localStorageService.getItem(key)); useEffect(() => { const onUpdate = (newValue) => { setValue(newValue); }; // возвращаем функцию очистки return localStorageService.subscribe(key, onUpdate); }, [key]); // функция для изменений значения по переданному ключу const setLocalStorageValue = (value) => { localStorageService.setItem(key, value); }; return [value, setLocalStorageValue]; };
Исходный кодimport { useLocalStorageKey } from './useLocalStorageKey'; const KEY_TOKEN = 'token'; function App() { const [token, setToken] = useLocalStorageKey(KEY_TOKEN); const handleAddTokenAClick = () => { setToken('token_value_a'); }; const handleAddTokenBClick = () => { setToken('token_value_b'); }; return ( <> <button type="button" onClick={handleAddTokenAClick}> Add token 'a' </button> <button type="button" onClick={handleAddTokenBClick}> Add token 'b' </button> <p>Token: {token}</p> </> ); } export default App;