Функциональное программирование на JavaScript: основы и практическое применение. Часть 1

Функциональное программирование (ФП) в JavaScript — это мощный инструмент, который помогает писать чистый, предсказуемый и легко поддерживаемый код. Ведущий разработчик IBS Юрий Таратов подготовил для коллег обучающий курс об особенностях этого подхода и готов поделиться его адаптированной версией с читателями VC.

Начинающие фронтенд-разработчики познакомятся с основами ФП и смогут избежать типичных ошибок, особенно в сложных проектах. Более опытным специалистам этот материал поможет освежить знания и углубить понимание ФП. Для комфортного погружения в тему потребуется знание JavaScript (ES6+), а также навыки работы с функциями, массивами и объектами.

Функциональное программирование (ФП) — это парадигма программирования, основанная на использовании функций как основных строительных блоков для написания кода.

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

Императивное программирование, в отличие от ФП, сосредоточено на описании шагов для выполнения задачи («как»), а объектно ориентированное — организует код вокруг объектов и их взаимодействий.

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

1. Function Declaration (декларативное объявление)

function add(a, b) { return a + b; }

Особенности:

доступна во всей области видимости (hoisting), даже до ее объявления;
имеет собственный this, зависящий от контекста вызова.

2. Function Expression (функциональное выражение)

const subtract = function(a, b) { return a - b; };

Особенности:

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

3. Arrow Function (стрелочная функция)

const multiply = (a, b) => a * b;

Особенности:

видимость функции ограничена областью видимости переменной, которой она присвоена;
нельзя использовать функцию до ее объявления;
не имеет своего this, берет this из внешнего контекста;
не имеет arguments;
не может быть использована с new.

4. IIFE (Immediately Invoked Function Expression, немедленно вызываемая функция)

(function() { console.log("Executed immediately!"); })();

Особенности:

вызывается сразу после определения только один раз;
IIFE уничтожается после выполнения, если ее результат нигде не сохранен;
если IIFE что-то возвращает (переменное значение или функцию), то этот результат можно сохранить и использовать;
может использоваться для создания локальной области видимости.

5. Object Methods (методы объекта)

const obj = { greet() { console.log("Hello!"); } };

Особенности:

может использовать this, если вызывается через объект.

6. Class Methods (классовые методы)

class Person { constructor(name) { this.name = name; } sayHello() { return `Hello, my name is ${this.name}`; } }

Особенности:

методы хранятся в prototype, а не в самом объекте;
используют this, связанный с экземпляром класса.

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

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

// С побочным эффектом let counter = 0; function increment() { counter++; } // Чистая функция function increment(counter) { return counter + 1; }

Преимущества:

код становится более предсказуемым и простым для понимания;
упрощается написание тестов.

2. Иммутабельность (неизменяемость данных)

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

// Мутация const arr = [1, 2, 3]; arr.push(4); // Изменяет оригинальный массив // Без мутации const arr = [1, 2, 3]; const newArr = [...arr, 4]; // Создает новый массив

Дополнительные инструменты:

Object.freeze для создания неизменяемых объектов;
использование библиотек, таких как Immutable.js.

Преимущества:

предотвращение ошибок, связанных с изменением данных;
улучшение читаемости и предсказуемости кода.

3. Функции высшего порядка

Функция высшего порядка — это функция, которая принимает в качестве аргументов другие функции и возвращает функцию в качестве результата.

Пример с передачей функции в качестве аргумента:

const numbers = [1, 2, 3]; const doubling = n => n * 2; const doubledArr = numbers.map(doubling); // Пример map const isEvenNumber = n => n % 2 === 0; const evenNumbers = numbers.filter(isEvenNumber); // Пример filter

Пример с возвратом функции в качестве результата:

function createMultiplier(multiplier) { return function(value) { return value * multiplier; }; } // Создаем функцию для удвоения значения const double = createMultiplier(2); // Создаем функцию для утроения значения const triple = createMultiplier(3); console.log(double(5)); // Вывод: 10 console.log(triple(5)); // Вывод: 15

Преимущества:

уменьшение объема кода за счет использования встроенных методов;
повышение читаемости благодаря декларативному стилю;
возможность писать сложные вычисления простыми и читаемыми функциями.

Во второй части речь пойдет об основах работы с функциями и типичных ошибках начинающих разработчиков.

Функциональное программирование на JavaScript: основы и практическое применение. Часть 1

Что такое функциональное программирование?

Преимущества функционального программирования

Вспомним основные способы объявления функций в JavaScript

Рассмотрим ключевые концепции функционального программирования