Функциональный vs ООП в JS: что выбрать в 2024?

Две стороны одной медали: Функциональный vs объектно-ориентированный подход в JavaScript

Если вы когда-нибудь задумывались, почему одни разработчики пишут код, который выглядит как математическая формула, а другие — как инструкция по сборке мебели из Икеи, то вы наткнулись на извечный спор: функциональное программирование (ФП) против объектно-ориентированного программирования (ООП) в JavaScript.

JavaScript — уникальный язык. Он родился как скриптовый язык для кнопочек, а вырос в монстра, который умеет всё. Он мультипарадигмальный: вы можете писать на нём в процедурном, ООП или функциональном стиле. И вот тут начинается самое интересное. Какой подход выбрать новичку? А опытному разработчику? Давайте разберёмся без фанатизма, на реальных примерах.

Коротко о главном: что есть что?

Объектно-ориентированный подход (ООП) — это про "сущности". У вас есть объекты (кот, машина, пользователь), у них есть свойства (цвет, скорость, имя) и методы (мяукать, ехать, логиниться). Вы группируете данные и поведение вместе. Классика: class Car { drive() {} }.

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

Ирония в том, что JavaScript не идеален ни для того, ни для другого "из коробки", но он позволяет элегантно использовать оба стиля. Вопрос лишь в том, когда какой применять.

ООП в JavaScript: от прототипов до ES6 классов

Когда-то давно, в эпоху IE6, ООП в JS выглядело пугающе. Всё строилось на прототипах — механизме, при котором объекты наследуют свойства от других объектов. Это было мощно, но не интуитивно.

С приходом ES6 (ES2015) в язык добавили синтаксический сахар — class. Но важно понимать: под капотом это те же прототипы. Классы сделали код чище и понятнее для тех, кто пришёл из Java или C++.

Пример ООП: Класс "Пользователь"

class User {
  constructor(name, email) {
    this.name = name;
    this.email = email;
    this.loggedIn = false;
  }

  login() {
    this.loggedIn = true;
    return `${this.name} вошел в систему`;
  }

  logout() {
    this.loggedIn = false;
    return `${this.name} вышел`;
  }
}

const admin = new User('Анна', 'anna@example.com');
console.log(admin.login()); // Анна вошел в систему

Всё логично: данные (name, email) живут вместе с методами (login, logout). Состояние объекта меняется через его же методы. Это классическая инкапсуляция.

Проблемы ООП в JS

• Контекст this. Потеря контекста — бич новичков. Если передать метод как callback, this "сломается". Приходится использовать .bind(), стрелочные функции или замыкания.
• Наследование. Глубокие иерархии классов ("Проблема ромба") ведут к путанице. Часто композиция (mixins) оказывается лучше наследования.
• Состояние. Мутирующее состояние (когда мы меняем свойства объекта) — главный источник багов в больших проектах. Один метод может случайно изменить то, что не должен.

Функциональный подход: чистота и предсказуемость

Функциональщики смотрят на ООП с лёгкой усмешкой. Их девиз: "Данные — это данные, функции — это функции. Не мешайте их в кучу".

Ключевые концепции функционального программирования в JavaScript:

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

Пример ФП: Работа с массивом пользователей

const users = [
  { name: 'Иван', age: 25, active: true },
  { name: 'Мария', age: 17, active: false },
  { name: 'Петр', age: 30, active: true }
];

// Чистая функция для фильтрации
const getActiveUsers = (usersList) => usersList.filter(user => user.active);

// Чистая функция для трансформации
const getNames = (usersList) => usersList.map(user => user.name);

// Композиция
const getActiveUserNames = (usersList) => {
  return getNames(getActiveUsers(usersList));
};

console.log(getActiveUserNames(users)); // ['Иван', 'Петр']
// Исходный массив users не изменился!

Обратите внимание: мы не меняем исходный массив. .filter() и .map() возвращают новые массивы. Это и есть неизменяемость. Такой код проще тестировать: вы передали данные, получили результат, никаких сюрпризов.

Сильные стороны ФП

• Предсказуемость. Чистые функции легко отлаживать. Если функция работает не так — проблема только внутри неё.
• Параллелизм. В современном мире (веб-воркеры, сервер-сайд) отсутствие общего состояния упрощает работу в многопоточном режиме.
• Тестирование. Не нужно мокать состояние объекта. Просто вызвал функцию с аргументами — проверил результат.

А что же выбрать? Практические советы

Спойлер: не надо выбирать что-то одно. Лучшие JavaScript-разработчики — это полиглоты. Они умеют сочетать подходы. Реальные проекты редко бывают "чисто ООП" или "чисто ФП". Обычно это гибрид.

Когда использовать ООП

• UI-компоненты. React (с хуками) ушёл в сторону функциональщины, но классовые компоненты никуда не делись. Для сложных виджетов с внутренним состоянием ООП всё ещё удобен.
• Модели данных с поведением. Если у вас есть сущность "Заказ", которая сама знает, как считать сумму, применить скидку и отправить уведомление — класс выглядит естественно.
• Работа с фреймворками. Angular