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-нюанс и граничный случай для темы «чистая функция».

Sources

Related topics