Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що таке декларативний підхід?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

**Декларативний підхід** - це стиль програмування, за якого ти **описуєш,** ***що має бути зроблено*****, а не** ***як саме це зробити крок за кроком*****.**

---

### Просте визначення

> **Декларативний підхід** = "*Що я хочу отримати*"
> **Імперативний підхід** = "*Як я хочу це отримати*"

---

### Приклад на JavaScript

#### Імперативний стиль:

(ти керуєш процесом - *як саме* досягти мети)

```javascript
const numbers = [1, 2, 3, 4, 5];
const doubled = [];

for (let i = 0; i < numbers.length; i++) {
  doubled.push(numbers[i] * 2);
}

console.log(doubled);
```

#### Декларативний стиль:

(ти просто описуєш, *що хочеш отримати*)

```javascript
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);
console.log(doubled);
```

Тут ти не пояснюєш **"як саме обійти масив"**, ти просто **кажеш: "хочу масив, де кожен елемент помножений на 2"**.

---

### Ще приклад - робота з DOM

#### Імперативно (чистий JS):

```javascript
const el = document.createElement("h1");
el.textContent = "Hello, world!";
document.body.appendChild(el);
```

#### Декларативно (React):

```javascript
function App() {
  return <h1>Hello, world!</h1>;
}
```

> Ти не описуєш процес створення і вставки елемента в DOM - React робить це за тебе.

---

### Де використовується декларативний підхід

- **React** - UI описується декларативно через JSX
- **SQL** - "Вибери всі рядки, де вік > 18" (а не як пройти по таблиці)
- **CSS** - "Зроби текст червоним" (а не інструкції з відмальовування пікселів)
- **HTML** - "Ось заголовок, ось кнопка" (а не як їх відмалювати)

---

### Переваги декларативного підходу

Код легше читати і розуміти - "що" важливіше, ніж "як"
Менше помилок, пов'язаних із ручним керуванням станом
Простіше масштабувати і підтримувати
Легше тестувати, тому що кожен компонент можна розглядати як чисту функцію

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати279 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.