JavaScriptMiddleTechnical
Что такое чистая функция (pure function) и почему это важно?
Чистая функция всегда возвращает одинаковый результат для одних аргументов и не производит побочных эффектов. Это делает код предсказуемым, легко тестируемым и совместимым с мемоизацией.
Чистая функция (pure function)
Чистая функция удовлетворяет двум условиям:
- Детерминированность — при одинаковых аргументах всегда возвращает одинаковый результат.
- Отсутствие побочных эффектов — не изменяет внешнее состояние: нет мутаций переданных объектов, нет записи в глобальные переменные, нет сетевых запросов, нет работы с DOM.
Примеры: чистые vs нечистые функции
// НЕЧИСТАЯ: зависит от внешней переменной
let tax = 0.2;
const priceWithTax = (price) => price * (1 + tax);
// НЕЧИСТАЯ: мутирует аргумент
const addItem = (arr, item) => {
arr.push(item); // side effect!
return arr;
};
// НЕЧИСТАЯ: side effect — запись в DOM
const renderCount = (n) => {
document.getElementById('count').textContent = n;
};
// ЧИСТАЯ: детерминирована, нет side effects
const calcTax = (price, taxRate) => price * (1 + taxRate);
// ЧИСТАЯ: возвращает новый массив
const addItemPure = (arr, item) => [...arr, item];
// ЧИСТАЯ: трансформирует данные без мутаций
const formatUser = (user) => ({
...user,
fullName: `${user.firstName} ${user.lastName}`,
age: new Date().getFullYear() - user.birthYear
});
// Внимание: new Date() делает функцию нечистой! Передавайте год явно:
const formatUserPure = (user, currentYear) => ({
...user,
fullName: `${user.firstName} ${user.lastName}`,
age: currentYear - user.birthYear
});
Практическое применение в React
// Reducer в useReducer/Redux — обязан быть чистым
function cartReducer(state, action) {
switch (action.type) {
case 'ADD_ITEM':
return {
...state,
items: [...state.items, action.payload],
total: state.total + action.payload.price
};
case 'REMOVE_ITEM':
return {
...state,
items: state.items.filter(i => i.id !== action.payload),
total: state.items
.filter(i => i.id !== action.payload)
.reduce((sum, i) => sum + i.price, 0)
};
default:
return state;
}
}
// Вычисляемые данные — useMemo опирается на чистоту
const expensiveCalc = useMemo(
() => items.filter(i => i.active).map(i => i.value * 1.2),
[items]
);
Мемоизация благодаря чистоте
function memoize(fn) {
const cache = new Map();
return function(...args) {
const key = JSON.stringify(args);
if (cache.has(key)) return cache.get(key);
const result = fn(...args);
cache.set(key, result);
return result;
};
}
const memoFib = memoize(function fib(n) {
return n <= 1 ? n : memoFib(n - 1) + memoFib(n - 2);
});
console.log(memoFib(40)); // быстро, без повторных вычислений
Тестируемость чистых функций
// Тест тривиален — нет моков, нет setup
import { calcTax, addItemPure } from './utils';
test('calcTax returns correct value', () => {
expect(calcTax(100, 0.2)).toBe(120);
expect(calcTax(50, 0)).toBe(50);
});
test('addItemPure does not mutate original array', () => {
const original = [1, 2, 3];
const result = addItemPure(original, 4);
expect(result).toEqual([1, 2, 3, 4]);
expect(original).toEqual([1, 2, 3]); // не изменился
});
Подводные камни
- Скрытая нечистота через Date/Math.random:
new Date()иMath.random()внутри функции делают её недетерминированной — передавайте их как параметры. - Мутация объектов-аргументов: spread-оператор создаёт поверхностную копию; вложенные объекты всё ещё разделяются — используйте structuredClone или immer для глубокого копирования.
- Замыкание на внешнюю переменную: функция, читающая переменную из outer scope, становится нечистой при изменении той переменной.
- console.log — side effect: строго говоря, вывод в консоль нарушает чистоту, хотя на практике это допустимо при отладке.
- Производительность иммутабельности: создание новых объектов вместо мутаций нагружает GC; для высоконагруженных структур используйте persistent data structures (immutable.js, immer).
- Ошибочное доверие к useMemo: React не гарантирует сохранение мемоизированного значения — он может сбросить кэш. useMemo — оптимизация, а не семантическая гарантия.
Common mistakes
- Смешивать «чистая функция» с похожим механизмом без критерия выбора.
- Игнорировать риск: неверно оценить границы применения темы «чистая функция» и получить хрупкое решение.
- Показывать только синтаксис и не объяснять поведение в runtime или сборке.
What the interviewer is testing
- Объясняет предсказуемость вычислений без побочных эффектов.
- Показывает на примере, как работает: чистая функция возвращает одинаковый результат для одинаковых аргументов и не меняет внешнее состояние; это упрощает тестирование, мемоизацию и reasoning в UI.
- Называет production-нюанс и граничный случай для темы «чистая функция».