Kwalifikacja: INF.04 - Projektowanie, programowanie i testowanie aplikacji
Zawód: Technik programista
Co zostanie wyświetlone po wykonaniu poniższego kodu JavaScript?
| const promise = new Promise((resolve, reject) => { setTimeout(() => { resolve('success'); }, 1000); }); promise .then(res => { console.log(res); return 'first then'; }) .then(res => { console.log(res); }); |
Odpowiedzi
Informacja zwrotna
Podany kod JavaScript korzysta z obietnic (Promises), co jest nowoczesnym podejściem do zarządzania asynchronicznością w JavaScript. W momencie, gdy tworzymy nową obietnicę, wykorzystujemy funkcję `setTimeout`, która po 1 sekundzie wywołuje metodę `resolve`, przekazując tekst 'success'. To jest pierwszy krok, w którym obietnica zostaje spełniona. Następnie, w łańcuchu `then`, pierwsza funkcja `then` przyjmuje wynik obietnicy, czyli 'success', loguje go na konsolę, a następnie zwraca nowy tekst 'first then'. Druga funkcja `then` odbiera ten wynik i również go loguje. W rezultacie na konsoli pojawią się kolejno: 'success' oraz 'first then'. Taki sposób tworzenia łańcuchów obietnic jest zgodny z najlepszymi praktykami programowania asynchronicznego w JavaScript, ponieważ pozwala na czytelniejsze i bardziej zrozumiałe zarządzanie kodem asynchronicznym, eliminując złożoność związaną z tzw. „callback hell”. Warto zaznaczyć, że obietnice mogą być stosowane do radzenia sobie z żądaniami sieciowymi, operacjami na plikach czy innymi długotrwałymi procesami, co czyni je niezbędnym narzędziem w nowoczesnym programowaniu webowym.
W przypadku błędnych odpowiedzi można zauważyć kilka typowych nieporozumień dotyczących działania obietnic w JavaScript. Odpowiedzi sugerujące, że najpierw zostanie wyświetlony 'first then' lub że będzie tylko jeden wynik, są wynikiem niezrozumienia, jak działa asynchroniczność oraz jak obietnice przetwarzają wyniki. Obietnice w JavaScript są zaprojektowane tak, aby zarządzać operacjami asynchronicznymi, co oznacza, że kod wewnątrz obietnicy nie blokuje wykonania innych operacji. W momencie, gdy obietnica jest utworzona, kod wykonuje się dalej, a funkcja `setTimeout` działa w tle. Gdy po upływie określonego czasu obietnica jest spełniona, następuje przekazanie wyniku do łańcucha `then`, a nie jakiegokolwiek innego miejsca w kodzie. To oznacza, że wyniki są zwracane w kolejności, w jakiej są zadeklarowane, co w tym przypadku prowadzi do wyświetlenia najpierw 'success', a potem 'first then'. Takie podejście do asynchroniczności jest fundamentalne w JavaScript, a jego zrozumienie jest kluczowe dla każdego programisty. Błędne odpowiedzi pochodzą często z mylnego przekonania, że wyniki obietnic są natychmiastowe lub że działają w tej samej kolejności, co kod synchroniczny. Dlatego ważne jest, aby zrozumieć, że asynchroniczność zmienia sposób, w jaki operacje są wykonywane i jak wyniki są zwracane.