JavaScript Academy · Урок

Чистые функции и побочные эффекты

Пишите предсказуемые функции, удобные для тестирования.

«Чистые функции и побочные эффекты» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 4 уроков всего.

Что делает функцию чистой

Чистая функция обладает двумя свойствами: при одинаковых входных данных она всегда возвращает одинаковый результат и не вызывает наблюдаемых побочных эффектов. Чистые функции предсказуемы и их легко тестировать.

function add(a, b) {
  return a + b;
}
console.log(add(2, 3));
console.log(add(2, 3)); // always 5

Детерминированный результат

Чистота означает детерминированность. Одинаковые аргументы всегда должны давать один и тот же результат, не зависящий от скрытого состояния, времени или случайности.

function double(n) {
  return n * 2;
}
console.log(double(10)); // always 20

Что такое побочный эффект

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

let total = 0;
function impureAdd(n) {
  total += n;     // side effect: mutates outer state
  return total;
}
console.log(impureAdd(5));
console.log(impureAdd(5)); // 5 then 10, not pure

Зависимость от внешнего состояния

Чтение изменяемого внешнего состояния также нарушает чистоту, поскольку результат меняется, даже когда аргумент остаётся прежним.

let rate = 1.5;
function priceImpure(x) {
  return x * rate; // depends on outside variable
}
console.log(priceImpure(10)); // 15
rate = 2;
console.log(priceImpure(10)); // 20 - different result

Как сделать функцию чистой

Передавайте функции в качестве аргументов всё, что ей нужно. Теперь её результат зависит только от входных данных.

function price(x, rate) {
  return x * rate;
}
console.log(price(10, 1.5)); // 15
console.log(price(10, 2));   // 20

Изменение аргументов делает функцию нечистой

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

function impurePush(arr, x) {
  arr.push(x);   // mutates caller array
  return arr;
}
const a = [1, 2];
impurePush(a, 3);
console.log(a); // [1, 2, 3] - caller changed

Возврат новых значений

Чистая версия создаёт и возвращает новое значение вместо изменения входного.

function pureAppend(arr, x) {
  return [...arr, x];
}
const a = [1, 2];
const b = pureAppend(a, 3);
console.log(a); // [1, 2] unchanged
console.log(b); // [1, 2, 3]

Преимущества чистоты

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

function square(n) { return n * n; }
console.log([1, 2, 3].map(square)); // [1, 4, 9]

Изоляция нечистых операций

Избежать всех побочных эффектов невозможно: приложения должны вести журналы, получать данные и отображать содержимое. Цель — вынести эффекты к границам приложения, сохранив основную логику чистой.

function computeTotal(items) {
  return items.reduce((s, i) => s + i.price, 0);
}
const total = computeTotal([{ price: 5 }, { price: 7 }]);
console.log(total); // 12 - pure core, log at the edge

Референциальная прозрачность

Чистый вызов можно заменить его результатом без изменения поведения программы. add(2, 3) в любом месте взаимозаменяем с 5. Это свойство называется референциальной прозрачностью.

function add(a, b) { return a + b; }
const x = add(2, 3) + add(2, 3);
const y = 5 + 5;
console.log(x === y); // true

Как обнаружить нечистоту

Обращайте внимание на такие признаки: console, Math.random, Date.now, присваивания внешним переменным или изменение аргументов. Любой из них делает функцию нечистой.

function pureRoll(seed) {
  return (seed * 1103515245 + 12345) % 100;
}
console.log(pureRoll(42)); // deterministic, testable

Быстрая проверка

Распознавание чистых функций.

Итоги

Чистые функции детерминированы и не имеют побочных эффектов: они не изменяют внешнее состояние, не выполняют ввод-вывод и не изменяют аргументы. Передавайте зависимости через аргументы и возвращайте новые значения вместо изменения существующих. Чистота обеспечивает тестируемость, мемоизацию, референциальную прозрачность и безопасность параллельного выполнения. Сохраняйте основную логику чистой, а эффекты выносите к границам.

Часто задаваемые вопросы

Урок «Чистые функции и побочные эффекты» бесплатный?

Да — полный текст урока «Чистые функции и побочные эффекты» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 4 уроков всего.

Чему я научусь в уроке «Чистые функции и побочные эффекты»?

Пишите предсказуемые функции, удобные для тестирования. Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать JavaScript Academy?

Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Чистые функции и побочные эффекты»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке JavaScript Academy?

Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к JavaScript Academy