К какой парадигме программирования относится JS

К какой парадигме программирования относится JS

JavaScript — мультипарадигменный язык программирования, что означает, что он поддерживает несколько разных подходов к написанию кода. Это одна из его главных сильных сторон и одновременно источник конфликтов между программистами.

Основные парадигмы в JavaScript

1. Объектно-ориентированное программирование (ООП)

JS поддерживает ООП через прототипы (prototype-based, а не class-based как в Java). Это отличает его от классических ООП языков.

// ES5 — прототипный ООП
function Animal(name) {
  this.name = name;
}

Animal.prototype.speak = function() {
  console.log(`${this.name} издает звук`);
};

const dog = new Animal('Собака');
dog.speak(); // Собака издает звук

// ES6+ — синтаксический сахар (класс)
class Animal {
  constructor(name) {
    this.name = name;
  }
  
  speak() {
    console.log(`${this.name} издает звук`);
  }
}

class Dog extends Animal {
  speak() {
    console.log(`${this.name} лает`);
  }
}

const dog = new Dog('Бобик');
dog.speak(); // Бобик лает

ОООП в JS опирается на:

• Инкапсуляцию (приватные свойства через замыкания или #)
• Наследование (через прототипы или классы)
• Полиморфизм (переопределение методов)

class Shape {
  getArea() {
    throw new Error('Метод должен быть переопределён');
  }
}

class Circle extends Shape {
  constructor(radius) {
    super();
    this.radius = radius;
  }
  
  getArea() {
    return Math.PI * this.radius ** 2;
  }
}

class Rectangle extends Shape {
  constructor(width, height) {
    super();
    this.width = width;
    this.height = height;
  }
  
  getArea() {
    return this.width * this.height;
  }
}

const shapes = [new Circle(5), new Rectangle(10, 20)];
shapes.forEach(shape => console.log(shape.getArea()));

2. Функциональное программирование (ФП)

JS имеет отличную поддержку ФП с функциями первого класса, замыканиями и неизменяемостью данных.

// Функции как значения
const add = (a) => (b) => a + b; // Каррирование
const add5 = add(5);
console.log(add5(3)); // 8

// Композиция функций
const compose = (...fns) => (value) => 
  fns.reduceRight((acc, fn) => fn(acc), value);

const double = (x) => x * 2;
const addOne = (x) => x + 1;
const pipeline = compose(addOne, double);

console.log(pipeline(5)); // (5 * 2) + 1 = 11

// Неизменяемость (immutability)
const user = { name: 'John', age: 30 };
const updatedUser = { ...user, age: 31 }; // не меняем original

// Map, filter, reduce
const numbers = [1, 2, 3, 4, 5];
const result = numbers
  .filter(n => n % 2 === 0)  // [2, 4]
  .map(n => n * 2)            // [4, 8]
  .reduce((sum, n) => sum + n, 0); // 12

3. Процедурное (императивное) программирование

Традиционный подход с последовательностью команд и состоянием:

// Процедурный стиль
function calculateTotal(items) {
  let total = 0;
  for (let i = 0; i < items.length; i++) {
    total += items[i].price * items[i].quantity;
  }
  return total;
}

// Функциональный стиль
const calculateTotal = (items) => 
  items.reduce((sum, item) => sum + item.price * item.quantity, 0);

4. Асинхронное/реактивное программирование

С введением Promise, async/await и возможности работы с Observable (RxJS):

// Promise-based
fetch('/api/data')
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));

// async/await
async function fetchData() {
  try {
    const res = await fetch('/api/data');
    const data = await res.json();
    console.log(data);
  } catch (err) {
    console.error(err);
  }
}

// Реактивное программирование (RxJS)
import { from } from 'rxjs';
import { map, filter } from 'rxjs/operators';

from([1, 2, 3, 4, 5])
  .pipe(
    filter(n => n % 2 === 0),
    map(n => n * 2)
  )
  .subscribe(console.log); // 4, 8

Сравнение парадигм в контексте фронтенда

React и ООП:

// Class component (ООП)
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  
  increment() {
    this.setState({ count: this.state.count + 1 });
  }
  
  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.increment()}>+</button>
      </div>
    );
  }
}

React и ФП (Hooks):

// Функциональный компонент (ФП)
function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}

Какую парадигму выбрать?

1. Для объектной логики — ООП:

class User {
  constructor(name, email) {
    this.name = name;
    this.email = email;
  }
  
  isValid() {
    return this.email.includes('@');
  }
}

2. Для обработки данных — ФП:

const users = [...];
const validEmails = users
  .filter(user => user.isValid())
  .map(user => user.email);

3. Для асинхронных операций — async/await:

async function loadUsers() {
  const users = await fetchUsers();
  return users.filter(u => u.active);
}

4. Для UI — функциональные компоненты с Hooks:

function UserList() {
  const [users, setUsers] = useState([]);
  
  useEffect(() => {
    fetchUsers().then(setUsers);
  }, []);
  
  return <ul>{users.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
}

Правильный выбор парадигмы

Золотая середина (практический подход):

// Комбинирование парадигм
class UserManager {
  constructor(userRepository) {
    this.userRepository = userRepository; // Зависимость
  }
  
  async getActiveUsers() {
    const users = await this.userRepository.findAll(); // async
    
    return users
      .filter(user => user.active)  // ФП
      .map(user => user.normalize()) // ООП
      .sort((a, b) => a.name.localeCompare(b.name)); // процедурное
  }
}

Выводы

1. JavaScript мультипарадигменный — это его сила и сложность
2. ООП используется для инкапсуляции и организации кода
3. ФП использует для обработки данных и избежания побочных эффектов
4. Асинхронность встроена в язык (Promise, async/await)
5. Выбирай нужную парадигму для задачи — не пытайся писать всё в одном стиле
6. Современный фронтенд (React, Vue) тяготеет к функциональному подходу

Лучший стиль — прагматичный: используй то, что решает задачу чище, проще и понятнее.