Що таке декларативний підхід?

ReactJunior~1 хв читання

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

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

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

Приклад на 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 - "Ось заголовок, ось кнопка" (а не як їх відмалювати)

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

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

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.