W ciągu ostatnich lat, JavaScript bardzo dynamicznie się rozwija i nie mam tu na myśli bibliotek i framework’ów. Kwestia pozostawania na bieżąco z nowościami to jedno, a zrozumienie podstaw to drugie. Celem tego artykułu nie jest wyjaśnienie lecz wskazanie i przedstawienie najważniejszych koncepcji języka JavaScript, które powinieneś znać.

Scope (Zakres)

Mogłoby się wydawać że zakres (eng. scope) to tak podstawowy temat, że nie powinien znaleźć się na tej liście. Jednak wiem z własnego doświadczenia, że pełne zrozumienie tego mechanizmu jest dość wymagające i odróżnia dobrych programistów od świetnych.

Najpierw wyjaśnimy sobie czym jest zakres. Zakres to po prostu zestaw zasad określających gdzie i w jaki sposób przechowywane są zmienne. Brzmi bardzo skomplikowanie ale na podstawowym poziomie takie nie jest. Często dość intuicyjnie orientujemy się kiedy mamy dostęp do wskazanej zmiennej a kiedy nie. Problem jednak pojawia się w sytuacji gdy do gry wchodzą mechanizmy takie jak hoisting (podnoszenie) czy wręcz legendarne closure (domknięcia).

Zrozumienie zakresu najlepiej zacząć od całkowitych fundamentów działania JavaScriptu. Mam tu na myśli zagadnienia takie jak kontekst wykonania (Execution Context) oraz stos wywołań (Call Stack).

Na moim kanale youtube znajdziesz całą mini-serię dotyczącą zakresu. Wyjaśniam tam krok po kroku powyższe zagadnienia, które finalnie doprowadzają do pełnego zrozumienia zakresu. Link do serii: Zaawansowany JavaScript - #1/4 Execution Context - YouTube

Istotne jest to, abyś nie ignorował tematu zakresu, nawet jeżeli jesteś początkującym programistą. Wiele Ci to ułatwi.

Prototype

Drugi temat który powinieneś opanować to prototypy. Dlaczego? Ponieważ jest to nieodłączny element każdego obiektu w JavaScripcie a jak (prawdopodobnie) wiesz w JavaScripcie niemal wszystko jest obiektem.

Co dają nam prototypy? Wyobraź sobie że masz wiele obiektów tej samej klasy i potrzebujesz dodać do nich konkretną funkcjonalność. Zamiast dodawać ją do każdej instancji z osobna, dodajesz ją bezpośrednio do prototypu. Ze względu na to, że prototyp jest powiązany z każdym obiektem, Twój problem jest rozwiązany. Nie muszę chyba mówić, że pozytywnie wpływa to również na wydajność kodu.

W tym temacie potrzebujesz zrozumieć jeszcze czym jest prototype chain, czyli łańcuch prototypów. W momencie gdy opanujesz ten temat, Twoja znajomość JavaScriptu przejdzie na kolejny poziom.

Jednym z lepszych źródeł z którego dowiesz się czym są prototypy jest książka You don’t know JS (You-Dont-Know-JS/ch5.md at 2nd-ed · getify/You-Dont-Know-JS · GitHub)

Klasy (ES6)

Jedną z pierwszych bardzo zauważalnych zmian w JavaScripcie w ostatnich latach były klasy. Co prawda jest to tylko tzw. syntatic sugar i w rzeczywistości klasy w JS opierają się o dziedziczenie prototypów.

Nie zmienia to jednak faktu: Klasy są trzecim z pięciu zagadnień JavaScriptu, które w mojej opinii powinieneś mieć w jednym palcu. A razem z nimi powinieneś poznać zagadnienia takie jak: dziedziczenie, enkapsulacja oraz obiekty i instancje. To wszystko to najważniejsze elementy najpopularniejszego paradygmatu programowania: programowania obiektowego.

I właśnie z tego powodu, uważam że zrozumienie klas jest tak ważne.

Tutaj po raz kolejny odsyłam Cię do You don’t know JS, która wprowadzi Cię w temat klas You-Dont-Know-JS/ch4.md at 2nd-ed · getify/You-Dont-Know-JS · GitHub

Jednak jednocześnie polecam Ci zapoznać się z pozostałymi koncepcjami programowania obiektowego, które jest (w mojej opinii) niezbędne do zrozumienia np. programowania funkcyjnego.

Promise / Async/Await

To że JavaScript to język asynchroniczny, prawdopodobnie słyszałeś. W każdym razie to o czym chciałem pisać, to umiejętność obsługi różnego rodzaju zdarzeń asynchronicznych, np. Zapytań do API.

Aplikacje JavaScript praktycznie w 100% na pewnym etapie muszą komunikować się z serwerem i tu właśnie do gry wchodzą zapytania asynchroniczne. Przez długi czas w tym celu wykorzystywaliśmy tzw. callbacki, czyli funkcje uruchamiane w momencie zakończenia zapytania. Natomiast obecnie mamy do dyspozycji mechanizmy takie jak obietnice oraz składnię async/await.

Aby odpowiednio zrozumieć ten temat, potrzebujesz wiedzieć wszystko na temat: asynchroniczności, API oraz wspomnianych mechanizmów takich jak obietnice oraz składni async/await i znać przynajmniej podstawy protokołu HTTP oraz tego jak działa backend.

W tym temacie doskonałym źródłem są moje filmy (wybacz skromność). Promise & Async/Await: JavaScript Promise #1 - Wprowadzenie - YouTube REST API: REST API Tutorial #1 - Czym jest REST API? - YouTube

Wzorce

No i na sam koniec, zostawiłem prawdopodobnie najbardziej złożony temat programowania, czyli wzorce projektowe. Dlaczego złożony? Wcale nie dlatego że wzorce projektowe są czymś trudnym w zrozumieniu ale ich wykorzystanie w praktyce już tak. Szczególnie w sytuacji gdy mamy do czynienia ze skomplikowaną aplikacją oraz jednocześnie korzystamy z wielu wzorców.

Szczerze mówiąc już od jakiegoś czasu mam w planach stworzenie solidnego kursu omawiającego wzorce, właśnie w JavaScripcie. Nie zmienia to jednak faktu, że taki kurs jeszcze nie powstał a ja mam dla Ciebie link, który znalazłem w trakcie researchu tego tematu: GitHub - sohamkamani/javascript-design-patterns-for-humans: An ultra-simplified explanation of design patterns implemented in javascript

Dlaczego wzorce projektowe? W prostych słowach jest to sposób aby “nie wymyślać koła na nowo”. Wzorce mają za zadanie rozwiązywać problemy, które posiada większość aplikacji. Tymi na które powinieneś zwrócić szczególną uwagę są wzorce takie jak: Module pattern, Prototype pattern, Observer pattern i Singleton (uwaga: obecnie uznawany jest jako antywzorzec ale chociażby z tego powodu warto go znać.

Podsumowanie

Mam nadzieję, że powyższy artykuł spełnił swoją rolę i wskazał Ci miejsca na które powinieneś skierować swój wzrok.

Jakiś z tych tematów sprawia Ci szczególną trudność? Będzie okazja to zmienić. Razem z Przemkiem i Marcinem przygotowujemy kurs (Opanuj JavaScript)[https://przeprogramowani.pl/kurs-js/], w którym skupię się na tych fundamentalnych zagadnieniach.

Jeżeli wszystkie wymienione przeze mnie tematy są dla Ciebie jasne - gratuluję! Twoja znajomość JavaScriptu jest naprawdę na wysokim poziomie.

Oczywiście to nie jest tak, że opanowanie tych 5 tematów sprawi, że o JavaScripcie będziesz wiedział wszystko, ale to chyba zrozumiałe, hm? :)