{"id":32769,"date":"2019-10-31T21:48:48","date_gmt":"2019-10-31T18:48:48","guid":{"rendered":"https:\/\/prohoster.info\/blog\/oops-i-did-it-again-otladka-rasprostranennyh-oshibok-v-javascript\/"},"modified":"2019-10-31T21:48:48","modified_gmt":"2019-10-31T18:48:48","slug":"oops-i-did-it-again-otladka-rasprostranennyh-oshibok-v-javascript","status":"publish","type":"post","link":"https:\/\/prohoster.info\/pl\/blog\/news\/oops-i-did-it-again-otladka-rasprostranennyh-oshibok-v-javascript","title":{"rendered":"Oops, znowu to zrobi\u0142em: debugowanie powszechnych b\u0142\u0119d\u00f3w w JavaScript","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"

\"Oops,
\n
\nCzasami pisanie kodu JavaScript jest trudne, a czasami wr\u0119cz przera\u017caj\u0105ce, co jest znane wielu programistom. W trakcie pracy nieuniknione s\u0105 b\u0142\u0119dy, z kt\u00f3rych niekt\u00f3re zdarzaj\u0105 si\u0119 do\u015b\u0107 cz\u0119sto. W artykule, skierowanym do pocz\u0105tkuj\u0105cych programist\u00f3w, om\u00f3wione s\u0105 te b\u0142\u0119dy i sposoby ich rozwi\u0105zania. Dla ilustracji nazwy funkcji, w\u0142a\u015bciwo\u015bci i obiekt\u00f3w s\u0105 zaczerpni\u0119te z popularnej piosenki<\/a><\/noindex>. Wszystko to pomaga szybko zapami\u0119ta\u0107, jak naprawia\u0107 powszechne b\u0142\u0119dy.
\n<\/a><\/noindex><\/p>\n

Przypominamy:<\/b> dla wszystkich czytelnik\u00f3w \u201eHabra\u201d \u2014 zni\u017cka 10 000 rubli przy zapisie na dowolny kurs Skillbox z kodem promocyjnym \u201eHabra\u201d.<\/i><\/p>\n

Skillbox poleca:<\/b> Praktyczny kurs \u201eMobilny programista PRO\u201d<\/a><\/noindex>.\n<\/p><\/blockquote>\n

<\/p>\n

TypeError: w\u0142a\u015bciwo\u015b\u0107 nie jest zdefiniowana<\/h3>\n

<\/p>\n

let girl = {\n    name: \"Lucky\",\n    location: \"Hollywood\",\n    profession: \"star\",\n    thingsMissingInHerLife: true,\n    lovely: true,\n    cry: function() {\n        return \"cry, cry, cries in her lonely heart\"\n    }\n}\nconsole.log(girl.named.lucky)<\/code><\/pre>\n
\nPrzyk\u0142ad kodu podanego powy\u017cej wywo\u0142uje b\u0142\u0105d Uncaught TypeError: Cannot read property \u2018lucky\u2019 of undefined. Problem polega na tym, \u017ce obiekt girl nie ma w\u0142a\u015bciwo\u015bci named, chocia\u017c ma w\u0142a\u015bciwo\u015b\u0107 name. Poniewa\u017c w\u0142a\u015bciwo\u015b\u0107 girl.named nie jest zdefiniowana, nie mo\u017cna uzyska\u0107 do niej dost\u0119pu, poniewa\u017c formalnie nie istnieje. Jednak\u017ce, je\u015bli zast\u0105pimy girl.named.lucky przez girl.name, wszystko zadzia\u0142a i program zwr\u00f3ci Lucky.<\/p>\n
Wi\u0119cej o w\u0142a\u015bciwo\u015bciach mo\u017cna przeczyta\u0107 tutaj<\/a><\/noindex>.<\/p>\n
Sposoby usuwania b\u0142\u0119d\u00f3w TypeError<\/h3>\n
\nB\u0142\u0119dy TypeError pojawiaj\u0105 si\u0119, gdy programista pr\u00f3buje wykona\u0107 operacje na danych, kt\u00f3re nie odpowiadaj\u0105 okre\u015blonemu typowi. Na przyk\u0142ad mo\u017cna wzi\u0105\u0107 zastosowanie .bold(), zapytanie w\u0142a\u015bciwo\u015bci undefined lub wywo\u0142anie funkcji, kt\u00f3ra w rzeczywisto\u015bci nie jest funkcj\u0105.<\/p>\n
Tak, je\u015bli spr\u00f3bujesz wywo\u0142a\u0107 girl (), pojawi si\u0119 b\u0142\u0105d Uncaught TypeError: yourVariable.bold is not a function oraz girl is not a function, poniewa\u017c w rzeczywisto\u015bci wywo\u0142ywany jest obiekt, a nie funkcja.<\/p>\n
Aby usun\u0105\u0107 b\u0142\u0119dy, nale\u017cy zbada\u0107 zmienne. Czym jest girl? A czym jest girl.named? Mo\u017cna to ustali\u0107, analizuj\u0105c kod, wypisuj\u0105c zmienne za pomoc\u0105 console.log, korzystaj\u0105c z komendy debugger lub wywo\u0142uj\u0105c nazw\u0119 zmiennej w konsoli. Nale\u017cy upewni\u0107 si\u0119, \u017ce mo\u017cliwe jest operowanie typem danych, kt\u00f3ry znajduje si\u0119 w zmiennej. Je\u015bli nie pasuje, zmie\u0144 go, na przyk\u0142ad dodaj warunek lub blok try..catch \u2014 i przejmij kontrol\u0119 nad wykonaniem operacji.<\/p>\n
Przepe\u0142nienie stosu<\/h3>\n
\nJe\u015bli uwierzy\u0107 autorom piosenki Baby One More Time (to Britney Spears, tak), to s\u0142owo hit w tym kontek\u015bcie oznacza pragnienie piosenkarki, by zadzwoniono do niej jeszcze raz (to wyja\u015bnienie samego kontekstu piosenki, \u2014 przyp. t\u0142umacza). Mo\u017ce si\u0119 zdarzy\u0107, \u017ce to pragnienie doprowadzi do zwi\u0119kszenia liczby po\u0142\u0105cze\u0144 w rzeczywisto\u015bci. Ale w programowaniu to rekursja, kt\u00f3ra mo\u017ce wywo\u0142a\u0107 b\u0142\u0105d w przypadku przepe\u0142nienia stosu wywo\u0142a\u0144.<\/p>\n
B\u0142\u0119dy wygl\u0105daj\u0105 nast\u0119puj\u0105co:<\/p>\n
B\u0142\u0105d: Brak miejsca na stosie (Edge)
\nInternalError: zbyt wiele rekursji (Firefox)
\nRangeError: Przekroczono maksymalny rozmiar stosu wywo\u0142a\u0144 (Chrome)
\n <\/i>
\nPrzepe\u0142nienie stosu wyst\u0119puje, je\u015bli programista nie uwzgl\u0119dni\u0142 przypadku bazowego w rekursji lub je\u015bli kod nie odnosi si\u0119 do przewidzianego przypadku.<\/p>\n
function oneMoreTime(stillBelieve=true, loneliness=0) {\n    if (!stillBelieve && loneliness < 0) return\n    loneliness++\n    return oneMoreTime(stillBelieve, loneliness)\n}<\/code><\/pre>\n
\nW tym przypadku stillBelieve nigdy nie mo\u017ce przyj\u0105\u0107 warto\u015bci false, dlatego ka\u017cde wywo\u0142anie oneMoreTime b\u0119dzie mia\u0142o miejsce, ale wykonanie funkcji nigdy si\u0119 nie zako\u0144czy.<\/p>\n
Je\u015bli jednak zaczniemy liczy\u0107 na dw\u00f3ch przyjaci\u00f3\u0142, to zmniejszy to loneliness (samotno\u015b\u0107), i nie b\u0119dzie potrzeby czeka\u0107 na telefon.<\/p>\n
function oneMoreTime(stillBelieve=true, loneliness=0) {\n    if (!stillBelieve && loneliness < 0) return\n    loneliness--\n    stillBelieve = false\n    return oneMoreTime(stillBelieve, loneliness)\n}<\/code><\/pre>\n
\nPrzyk\u0142adem mog\u0105 by\u0107 przypadki niesko\u0144czonych p\u0119tli, kiedy system nie wy\u015bwietla komunikatu o b\u0142\u0119dzie, a strona, na kt\u00f3rej dzia\u0142a kod JavaScript, po prostu zawiesza si\u0119. Tak si\u0119 dzieje, je\u015bli p\u0119tla while nie ma warunku zako\u0144czenia.<\/p>\n
let worldEnded = false\n \nwhile (worldEnded !== true) {\n  console.log(\"Keep on dancin' till the world ends\")\n}<\/code><\/pre>\n
\nProblem mo\u017cna rozwi\u0105za\u0107 w nast\u0119puj\u0105cy spos\u00f3b:<\/p>\n
let worldEnded = false\n \nwhile (worldEnded !== true) {\n  console.log(\"Keep on dancin' till the world ends\")\n  worldEnded = true\n}<\/code><\/pre>\n
<\/p>\n
Debugowanie niesko\u0144czonych p\u0119tli i rekursji<\/h3>\n
\nJe\u015bli wyst\u0105pi\u0142 problem z niesko\u0144czon\u0105 p\u0119tl\u0105, w Chrome lub Edge nale\u017cy zamkn\u0105\u0107 kart\u0119, a w Firefox \u2014 okno przegl\u0105darki. Nast\u0119pnie nale\u017cy dok\u0142adnie przeanalizowa\u0107 kod. Je\u015bli nie uda\u0142o si\u0119 znale\u017a\u0107 problemu, warto doda\u0107 polecenie debugger do p\u0119tli lub funkcji i sprawdzi\u0107 warto\u015b\u0107 zmiennych. Je\u015bli wynik nie odpowiada oczekiwanemu, nale\u017cy go zamieni\u0107, co mo\u017cna \u0142atwo zrobi\u0107.<\/p>\n
W przyk\u0142adzie podanym powy\u017cej, debugger nale\u017cy doda\u0107 na pierwszej linii funkcji lub p\u0119tli. Nast\u0119pnie trzeba otworzy\u0107 zak\u0142adk\u0119 debugera w Chrome, analizuj\u0105c zmienne w zakresie. Za pomoc\u0105 przycisku next mo\u017cna \u015bledzi\u0107 ich zmiany przy ka\u017cdej iteracji. Wszystko to jest proste do wykonania, a w wi\u0119kszo\u015bci przypadk\u00f3w problem jest zlokalizowany.<\/p>\n
Wi\u0119cej na ten temat mo\u017cna przeczyta\u0107 tutaj (dla Chrome<\/a><\/noindex>) oraz tutaj (dla Firefox<\/a><\/noindex>).<\/p>\n
B\u0142\u0105d sk\u0142adni<\/h3>\n
\nJednym z najcz\u0119\u015bciej wyst\u0119puj\u0105cych b\u0142\u0119d\u00f3w w JavaScript jest SyntaxError. Mo\u017cna ich unikn\u0105\u0107 dzi\u0119ki rozszerzeniom edytora tekstu. Tak, Bracket Pair Colorizer zaznacza nawiasy w kodzie r\u00f3\u017cnymi kolorami, a Prettier lub podobne narz\u0119dzie analizy pozwala szybko znale\u017a\u0107 b\u0142\u0119dy. Najlepszym sposobem na zmniejszenie prawdopodobie\u0144stwa wyst\u0105pienia SyntaxError jest minimalna z\u0142o\u017cono\u015b\u0107.<\/p>\n
Podziel si\u0119 w komentarzach: co robisz, aby unika\u0107 b\u0142\u0119d\u00f3w lub szybko je wykrywa\u0107 i naprawia\u0107?<\/p>\n
Skillbox poleca:<\/b><\/p>\n