{"id":103,"date":"2021-09-15T09:00:00","date_gmt":"2021-09-15T09:00:00","guid":{"rendered":"https:\/\/webdevs.blog\/pl\/?p=103"},"modified":"2026-02-20T07:28:18","modified_gmt":"2026-02-20T07:28:18","slug":"wyjatki-na-przykladzie-js","status":"publish","type":"post","link":"https:\/\/webdevs.blog\/pl\/wyjatki-na-przykladzie-js\/","title":{"rendered":"Wyj\u0105tki na przyk\u0142adzie JS"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

B\u0142\u0119dy w programowaniu to co\u015b normalnego wi\u0119c praca programisty jest \u015bci\u015ble powi\u0105zana z
debugowaniem. W zale\u017cno\u015bci od j\u0119zyka w kt\u00f3rym programujemy niekt\u00f3re typy b\u0142\u0119d\u00f3w mo\u017cna wykry\u0107
jeszcze przed sam\u0105 kompilacj\u0105 kodu lecz istniej\u0105 tak\u017ce takie sytuacje w kt\u00f3rych b\u0142\u0105d uwidacznia si\u0119
dopiero w trakcie trwania programu (lub aplikacji). Wyj\u0105tek jest w\u0142a\u015bnie takim typem b\u0142\u0119du, przyk\u0142adem
mo\u017ce by\u0107 tablica indeksowana od 0 do x-1 u\u017cywana w p\u0119tli od 1 do x – kod si\u0119 skompiluje (zak\u0142adaj\u0105c, \u017ce
semantyka jest poprawna) ale przy pr\u00f3bie wykonana takiej p\u0119tli dojdzie do odwo\u0142ania od nieistniej\u0105cego
elementu (tab[x]) co spowoduje do rzucenia wyj\u0105tku. Tak, wyj\u0105tkami si\u0119 rzuca i powinni\u015bmy je traktowa\u0107
jako podpowied\u017a co posz\u0142o nie tak w naszej aplikacji. Mi\u0119dzy r\u00f3\u017cnymi j\u0119zykami s\u0105 drobne r\u00f3\u017cnice w sk\u0142adni
ale idea pozostaje ta sama.<\/p>\n\n\n\n

Om\u00f3wmy obs\u0142ug\u0119 wyj\u0105tk\u00f3w na przyk\u0142adzie JS\u2019a. Ca\u0142a \u201cimpreza\u201d polega na wykorzystaniu przynajmniej
dw\u00f3ch z trzech<\/em> dost\u0119pnych blok\u00f3w :<\/p>\n\n\n

try<\/span> {\n  var<\/span> i = 0<\/span>;\n  i++;\n  \/\/ tutaj umieszczamy kod kt\u00f3ry chcemy wykona\u0107,<\/span>\n  \/\/ kt\u00f3ry mo\u017ce ale nie musi rzuci\u0107 wyj\u0105tkiem<\/span>\n  \/\/ wyj\u0105tki mog\u0105 by\u0107 rzucane \"automatycznie\"<\/span>\n  \/\/ np odwo\u0142uj\u0105c si\u0119 do nieistniej\u0105cego obiektu lub funkcji<\/span>\n  \/\/ ale mog\u0105 by\u0107 te\u017c rzucane przez nas:<\/span>\n  if<\/span> ( i != 0<\/span> ) {\n    \/\/ za pomoc\u0105 s\u0142owa kluczowego \"throw\" mo\u017cemy rzuci\u0107 w\u0142asny wyj\u0105tek<\/span>\n    \/\/ przekazuj\u0105c rzucany obiekt<\/span>\n    throw<\/span> \"i jest r\u00f3\u017cne od zera!\"<\/span>; \/\/ wi\u0119cej o rzucanych obiektach w dalszej cz\u0119\u015bci wpisu<\/span>\n  }\n} catch<\/span>( error ) {\n  \/\/ to jest blok \u0142api\u0105cy wyj\u0105tek - jego kod wykona si\u0119 TYLKO I WY\u0141\u0104CZNIE je\u015bli<\/span>\n  \/\/ w bloku \"try\" zosta\u0142 rzucony wyj\u0105tek<\/span>\n  \/\/ w zmiennej \"error\" b\u0119dziemy mieli rzucony obiekt<\/span>\n  \/\/ na podstawie kt\u00f3rego mo\u017cemy podejmowa\u0107 dalsze decyzje<\/span>\n} finally<\/span> {\n  \/\/ jedyny nieobowi\u0105zkowy blok, je\u015bli istnieje jego kod wykona si\u0119 ZAWSZE<\/span>\n  \/\/ niezale\u017cnie czy zosta\u0142 rzucony wyj\u0105tek czy nie<\/span>\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Mo\u017cna by powiedzie\u0107 fajnie, \u017ce jest taki bajer ale po co mi on<\/em>? Najprostszym przyk\u0142adem
\u201cpo co\u201d mo\u017ce by\u0107 sytuacja z kt\u00f3r\u0105 spotka\u0142 si\u0119 zapewne ka\u017cdy z nas – wrzucamy edytowane przez nas
skrypty na stron\u0119 i nagle po\u0142owa rzeczy przestaje dzia\u0142a\u0107 a w konsoli pe\u0142no b\u0142\u0119d\u00f3w. Dlaczego tak si\u0119
sta\u0142o? Moim zdaniem lepiej b\u0119dzie odpowiedzie\u0107 na pytanie co si\u0119 dzieje je\u015bli wyj\u0105tek jest rzucany? Ot\u00f3\u017c w
takim przypadku dalszy kod (czyli ten znajduj\u0105cy si\u0119 poni\u017cej miejsca w kt\u00f3rym zosta\u0142 rzucony) nie zostaje
wykonany a zamiast tego przechodzimy do najbli\u017cszego bloku catch czyli je\u015bli na samym pocz\u0105tku
naszego skryptu wyst\u0105pi jaki\u015b wyj\u0105tek dalsza cz\u0119\u015b\u0107 si\u0119 po prostu nie wykona.<\/p>\n\n\n\n
Wspomina\u0142em ju\u017c o rzucanych obiektach i o tym, \u017ce robimy to za pomoc\u0105 throw, powiedzmy sobie teraz
kilka s\u0142\u00f3w w\u0142a\u015bnie o tym. Domy\u015blnie mamy wbudowanych kilka klas kt\u00f3rymi mo\u017cemy rzuca\u0107 np klasa
Error kt\u00f3rej obiekt mo\u017cemy stworzy\u0107 dwojako:<\/p>\n\n\n
const<\/span> x = Error<\/span>( 'Jestem stworzony przy pomocy wyowa\u0142ania funkcji!'<\/span> );\n\/\/ ma te sam\u0105 funkcj\u0119 jak to:<\/span>\nconst<\/span> y = new<\/span> Error<\/span>( 'Jestem stworzony przy pomocy s\u0142owa kluczowego \"new\"!'<\/span> );\nthrow<\/span> x; \/\/ rzucamy wyj\u0105tek<\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Wi\u0119cej informacji na temat tej oraz \u201csiostrzanych\u201d klas mo\u017cecie znale\u017a\u0107 np. tutaj<\/a>. Jak ju\u017c widzieli\u015bcie na
samym pocz\u0105tku nie jeste\u015bmy ograniczeni tylko do tych klas. Rzuci\u0107 mo\u017cemy jakimkolwiek obiektem –
nawet zwyk\u0142em tekstem throw „rzucam stringiem!”;, pozostaje tylko kwestia p\u00f3\u017aniejszego
odpowiedniego obs\u0142u\u017cenia wyj\u0105tku bo je\u015bli odwo\u0142amy si\u0119 do nieistniej\u0105cej metody lub pola spowoduje to
rzucenie kolejnego wyj\u0105tku.<\/p>\n\n\n\n
Skoro wiemy (mniej lub bardziej) czym wyj\u0105tki s\u0105 u\u015bwiadommy sobie teraz kolejn\u0105 wa\u017cn\u0105 rzecz dla JS\u2019a
czyli kolejkowanie zada\u0144 oraz istnienie tzw. stosu. Wyst\u0105pienie wyj\u0105tku powoduje przerwanie aktualnie
wykonywanego zadania (czyli wszystkiego co aktualnie jest na stosie) ale nie blokuje to nast\u0119pnych
zakolejkowanych zada\u0144, np. je\u015bli podczas obs\u0142ugi eventu click<\/code> rzucimy wyj\u0105tkiem to b\u0119dzie on rzucany za
ka\u017cdym klikni\u0119ciem. Wi\u0119cej o kolejce zada\u0144 i stosie mo\u017cecie pos\u0142ucha\u0107 w tej prezentacji<\/a>.
Dla zrozumienia problemu zapoznajcie si\u0119 z tym kodem.<\/a><\/p>\n\n\n\n
Podsumowuj\u0105c, wyj\u0105tki i ich obs\u0142uga je\u015bli wykorzystana \u015bwiadomy w odpowiedni spos\u00f3b mo\u017ce by\u0107 naszym
przyjacielem.<\/p>\n\n\n\n
\n\n\n\n
Po napisaniu tego wpisu nasz CTO podrzuci\u0142 s\u0142uszn\u0105 uwag\u0119, \u017ce od ES2019 mo\u017cemy u\u017cywa\u0107 skr\u00f3conego bloku try-catch (bez specyfikowania zmiennej e<\/code>\/error<\/code>):<\/p>\n\n\n
try<\/span> {\n  request = JSON<\/span>.parse(rawRequest);\n} catch<\/span> {\n  alert('Request was malformed'<\/span>);\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n","protected":false},"excerpt":{"rendered":"
B\u0142\u0119dy w programowaniu to co\u015b normalnego wi\u0119c praca programisty jest \u015bci\u015ble powi\u0105zana zdebugowaniem. W zale\u017cno\u015bci od j\u0119zyka w kt\u00f3rym programujemy niekt\u00f3re typy b\u0142\u0119d\u00f3w mo\u017cna wykry\u0107jeszcze przed sam\u0105 kompilacj\u0105 kodu lecz istniej\u0105 tak\u017ce takie sytuacje w kt\u00f3rych b\u0142\u0105d uwidacznia si\u0119dopiero w trakcie trwania programu (lub aplikacji). Wyj\u0105tek jest w\u0142a\u015bnie takim typem b\u0142\u0119du, przyk\u0142ademmo\u017ce by\u0107 tablica indeksowana […]<\/p>\n","protected":false},"author":9,"featured_media":190,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,10,4],"tags":[54,58,36],"class_list":["post-103","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dobre-praktyki","category-js","category-web-development","tag-bug","tag-js","tag-web-development"],"_links":{"self":[{"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/posts\/103","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/comments?post=103"}],"version-history":[{"count":4,"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/posts\/103\/revisions"}],"predecessor-version":[{"id":707,"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/posts\/103\/revisions\/707"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/media\/190"}],"wp:attachment":[{"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/media?parent=103"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/categories?post=103"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/tags?post=103"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}