Suggest an edit

Improve this article

Refine the answer for “What is the declarative approach?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

**Declarative approach** is a programming style in which you **describe** ***what should be done*****, not** ***how exactly to do it step by step*****.**

---

### Simple definition

> **Declarative approach** = "*What I want to get*"
> **Imperative approach** = "*How I want to get it*"

---

### Example in JavaScript

#### Imperative style:

(you control the process - *how exactly* to reach the goal)

```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);
```

#### Declarative style:

(you simply describe *what you want to get*)

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

Here you do not explain **"how exactly to iterate the array"**, you simply **say: "I want an array where each element is multiplied by 2"**.

---

### Another example - working with the DOM

#### Imperative (plain JS):

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

#### Declarative (React):

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

> You do not describe the process of creating and inserting the element into the DOM - React does it for you.

---

### Where the declarative approach is used

- **React** - the UI is described declaratively through JSX
- **SQL** - "Select all rows where age > 18" (not how to iterate the table)
- **CSS** - "Make the text red" (not instructions for rendering pixels)
- **HTML** - "Here is a heading, here is a button" (not how to render them)

---

### Advantages of the declarative approach

The code is easier to read and understand - "what" matters more than "how"
Fewer errors related to manual state management
Easier to scale and maintain
Easier to test, because each component can be treated as a pure function
</content>

Markdown · drag & drop images · ⌘B / ⌘I shortcuts316 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.