Imperatywnie kontra deklaratywnie w JavaScript/ES6

Poziom średnio-zaawansowany

Dziś mały artykuł o podejściu do pisania kodu. Czy piszesz swój kod JS deklaratywnie, czy raczej imperatywnie? Być może niektórzy nie zwracają uwagi, a jednak warto. Podobnie jak w przypadku metodologii pisania i organizacji stylów CSS.

Deklaratywnie vs imperatywnie w JavaScript/ES6

Programowanie deklaratywne jest paradygmatem programowania – podejściem do budowania struktury i elementów programów, który wyraża logikę obliczeń bez opisu jej przepływu sterowania. W przeciwieństwie do programów napisanych imperatywnie, programista opisuje warunki, jakie musi spełniać końcowe rozwiązanie (co chcemy osiągnąć), a nie szczegółową sekwencję kroków, które do niego prowadzą (jak to zrobić).

Wiele języków, które stosują podejście deklaratywne, próbuje zminimalizować lub wyeliminować efekty uboczne, opisując co program musi wykonać w swoim zakresie dziedziny, zamiast opisywać, jak osiągnąć to jako sekwencję prymitywów języka programowania. Z kolei imperatywnie – implementujemy algorytmy w wyraźnych krokach.

Nuda. Spójrzmy na to po prostu.

Kod imperatywny definiuje co oraz jak ma być zrobione, np.:

– idź do kuchni
– pokrój chleb
– wyjmij masło z lodówki
– …
– …
– połóż kanapkę na stole

Z kolei w świecie programowania deklaratywnego opisujemy czego potrzebujemy:

– chcę kanapkę

Lub innymi słowy, imperatywnie wyrażamy dokładne instrukcje jak do nas dojechać (skręć tu, jedź tam, itd). Deklaratywnie piszemy: „przyjedź do mnie pod adres XYZ”. Itd.

Gdzie haczyk? Po prostu budując nasz program deklaratywnie, opisujemy czego potrzebujemy. Program składamy (komponujemy) z poszczególnych elementów. Elementy te mogą istnieć we frameworku lub bibliotece, open-source lub w naszych własnych bibliotekach. Jeśli nie są dostępne, piszemy je. Imperatywnie? Tak, w końcu dojdziemy do takiego poziomu abstrakcji.

Wydawnictwo Strefa Kursów

Najprościej mówiąc, gdy nie ma już niższego poziomu abstrakcji, musimy napisać kod (funkcje, biblioteki, komponenty, etc), który implementuje to, czego potrzebujemy. Na wyższym poziomie abstrakcji będziemy korzystać z tego, budując program deklaratywnie, jak i modyfikując go łatwiej.

Znów bla blah. Najlepiej spójrzmy na przykłady kodu JS.

Przykłady

I = imperatywnie

D = deklaratywnie.

Przykład:

// I
function makeWidget(options) {
  const element = document.createElement('div');
  element.style.backgroundColor = options.bgColor;
  element.style.width = options.width;
  element.style.height = options.height;
  element.textContent = options.txt;
  return element;
}

// D
function makeWidget(type, txt) {
  return new Element(type, txt);
}

Zamiast pisać wszystko krok po kroku, używamy rozwiązania „Element”, które implementuje do, czego potrzebujemy.

Przykład – operacje na elementach tablicy:

// I
const numbers = [1, 2, 3, 4, 5];
const doubled = [];

for (let i = 0; i < numbers.length; i += 1) {
  const newNumber = numbers[i] * 2;
  doubled.push(newNumber);
}
console.log(doubled); // => [2,4,6,8,10]

// D
const numbersD = [1, 2, 3, 4, 5];
const doubledD = numbersD.map((n) => {
  return n * 2;
});
console.log(doubledD); // => [2,4,6,8,10]

BTW skorzystaliśmy tutaj z metody map.

Przykład poniżej z kolei, korzysta z metody reduce:

// I
const numbers = [1, 2, 3, 4, 5];
let total = 0;

for (let i = 0; i < numbers.length; i += 1) {
  total += numbers[i];
}
console.log(total); // => 15


// D
const numbers = [1, 2, 3, 4, 5];
const total = numbers.reduce((sum, n) => {
  return sum + n;
}, 0);
console.log(total); // => 15

Itd.

W wielu sytuacjach kod imperatywny jest OK, z pewnością kiedy piszemy logikę biznesową, zwykle będzie to kod imperatywny, jako że nie ma wtedy bardziej ogólnej abstrakcji dla danego przypadku. Kod ten opisze jak dana operacja ma być wykonana. A dalej, na wyższym poziomie abstrakcji, oszczędzamy czas, definiując głównie co ma być zrobione, korzystając z opracowanych rozwiązań.

Linki

https://en.wikipedia.org/wiki/Declarative_programming

https://codeburst.io/declarative-vs-imperative-programming-a8a7c93d9ad2

https://www.netguru.co/blog/imperative-vs-declarative

https://medium.freecodecamp.com/imperative-vs-declarative-programming-283e96bf8aea#.9fmxv73fc

http://stackoverflow.com/questions/33655534/difference-between-declarative-and-imperative-in-react-js

Programowanie funkcyjne z JavaScriptem

Podsumowanie

A podsumowanie z innej beczki.

UWAGA! Idą zmiany. Na lepsze. Za jakiś czas blog pojawi się w nowej odsłonie. To znaczy nowocześniejszej i ładniejszej, jeśli chodzi o wygląd, oraz bardziej „kompaktowej”, jeśli chodzi o posty.

Ten artykuł jest ostatnim tego typu. Tematów jest co prawda ogrom, jednak ze względu na ilość zajęć dookoła, brakuje czasu na publikowanie większych artykułów.

Będzie za to coś innego. Mianowicie tipy. Zmienimy theme na ładniejszy, responsywny i nowoczesny. Jak na obecne czasy przystało. Do tego krótkie posty, za to nieco częściej.

Stary content zostanie, a skupimy się na tipach, czyli konkretach jak zrobić „coś tam”. Krótkie porady / przykłady / konkretne rozwiązania, bez zbędnego lania wody. A takich rozwiązań nie brakuje, co rusz, podczas pracy nad projektami, rozwiązujemy coś, co warto później opublikować. Może się to przydać innym.

I nie chodzi już tylko o JS, html5 i CSS, ale generalnie o programowanie (np. Rails, bazy danych, etc). Mając jakiś mały solution dla problemu, warto się podzielić 🙂

Do zobaczenia ponownie, za jakiś czas. Dziękuję!!!

Możesz skomentować leave a response, lub podać trackback z własnej strony.