Lekce 1.2

Imperativní vs. Deklarativní

Pokud se učíte JavaScript nebo se ponořujete do frameworků jako React, Vue nebo Svelte, téměř jistě jste narazili na termíny "Imperativní" a "Deklarativní". Tyto nejsou jen akademická módní slova; pochopení rozdílu je klíčové pro psaní čistšího, udržovatelnějšího kódu.

V jádru je rozdíl jednoduchý:

  • •Imperativní programování je jako mikromanagement. Říkáte počítači přesně, jak něco udělat, krok za krokem.
  • •Deklarativní programování je jako být projektový manažer. Říkáte počítači, jaký výsledek chcete, a necháte ho přijít na detaily implementace.

Otestujme vaše znalosti rychlým kvízem s 5 otázkami.

Co se naučíte
  • •Základní rozdíl mezi imperativním a deklarativním programováním
  • •Jak identifikovat imperativní a deklarativní kód
  • •Proč je React deklarativní
  • •Praktické příklady obou přístupů
  • •Jak přemýšlet deklarativně v Reactu
1

Otázka 1: Základní definice

Imperativní programování se zaměřuje na to, co děláte, a deklarativní programování se zaměřuje na to, jak to děláte.

Pravda nebo Nepravda?

Pravda

Nepravda

2

Otázka 2: Identifikace deklarativního kódu

Vyberte všechny vlastnosti, které platí pro deklarativní kód:

Vyberte všechny, které platí:

Často je abstrakcí nad imperativním kódem

Je obvykle nezávislý na kontextu

Je psán primárně pro lidi, ne pro počítače

Zdůrazňuje, jak se kód provádí

3

Otázka 3: Identifikace imperativního kódu

Vyberte všechny vlastnosti, které platí pro imperativní kód:

Vyberte všechny, které platí:

Spoléhá na kontext, což ztěžuje znovupoužití

Dává procedurální pokyny, jak něco udělat

Je obvykle snadno pochopitelné na první pohled

Je explicitní ohledně změn, které chce provést

4

Otázka 4: React a deklarativní paradigma

Co dělá React "Deklarativním"? Vyberte všechny, které platí.

Vyberte všechny, které platí:

Je snadné ručně manipulovat s DOM

Popisuje, jaké je UI na základě stavu

Umožňuje snadno sledovat tok kódu při jeho běhu

Je abstrakcí nad imperativním kódem

5

Otázka 5: Test úryvku kódu

Byl by následující kód považován za imperativní nebo deklarativní?

javascript
const container = document.getElementById("container")
const btn = document.createElement("button")

btn.className = "btn active"
btn.onclick = function() {
  // Using regular function to access 'this'
  if (this.classList.contains("active")) {
    this.classList.remove("active")
    this.classList.add("inactive")
  } else {
    this.classList.remove("inactive")
    this.classList.add("active")
  }
}

container.appendChild(btn)
Imperativní x Deklarativní

Imperativní

Deklarativní