{"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\/no\/blog\/news\/oops-i-did-it-again-otladka-rasprostranennyh-oshibok-v-javascript","title":{"rendered":"Oops, jeg gjorde det igjen: feils\u00f8king av vanlige feil i JavaScript","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"

\"Oops,
\n
\nNoen ganger er det vanskelig \u00e5 skrive JavaScript-kode, og noen ganger kan det til og med v\u00e6re skremmende, noe mange utviklere kjenner seg igjen i. I l\u00f8pet av arbeidet oppst\u00e5r det uunng\u00e5elig feil, og noen av dem gjentar seg ofte. Denne artikkelen, rettet mot nybegynnere, beskriver disse feilene og m\u00e5tene \u00e5 l\u00f8se dem p\u00e5. For oversiktlighetens skyld er navnene p\u00e5 funksjoner, egenskaper og objekter hentet fra en popul\u00e6r sang<\/a><\/noindex>. Alt dette hjelper til med \u00e5 huske raskt hvordan man retter vanlige feil.
\n<\/a><\/noindex><\/p>\n

Vi minner om:<\/b> for alle lesere av \u00abHabr\u00bb \u2014 10 000 rubler rabatt ved p\u00e5melding til hvilket som helst Skillbox-kurs med kampanjekoden \u00abHabr\u00bb.<\/i><\/p>\n

Skillbox anbefaler:<\/b> Praktisk kursus \u00abMobiludvikler PRO\u00bb<\/a><\/noindex>.\n<\/p><\/blockquote>\n

<\/p>\n

TypeError: egenskap er ikke definert<\/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
\nEksemplet med koden ovenfor gir feilen Uncaught TypeError: Cannot read property \u2018lucky\u2019 of undefined. Problemet er at objektet girl ikke har egenskapen named, selv om det har egenskapen name. Siden egenskapen girl.named ikke er definert, kan man ikke f\u00e5 tilgang til den, fordi den formelt ikke eksisterer. Men hvis man erstatter girl.named.lucky med girl.name, vil alt fungere, og programmet vil returnere Lucky.<\/p>\n
Les mer om egenskaper kan man lese her<\/a><\/noindex>.<\/p>\n
Metoder for \u00e5 rette TypeError-feil<\/h3>\n
\nTypeError-feil oppst\u00e5r n\u00e5r programmereren pr\u00f8ver \u00e5 utf\u00f8re handlinger med data som ikke samsvarer med en bestemt type. Et eksempel kan v\u00e6re bruk av .bold(), foresp\u00f8rsel om en egenskap som er undefined, eller kall av en funksjon som faktisk ikke er en funksjon.<\/p>\n
S\u00e5 hvis du pr\u00f8ver \u00e5 kalle girl (), vil det oppst\u00e5 en feil Uncaught TypeError: yourVariable.bold is not a function og girl is not a function, ettersom det faktisk er objektet som kalles, ikke en funksjon.<\/p>\n
For \u00e5 rette opp feilene m\u00e5 man studere variablene. S\u00e5, hva er girl? Og hva er girl.named? Dette kan man finne ut ved \u00e5 analysere koden, skrive ut variablene med console.log, bruke debugger-kommandoen eller ved \u00e5 kalle navnet p\u00e5 variabelen i konsollen. Man m\u00e5 s\u00f8rge for at man har muligheten til \u00e5 operere med datatypen som er lagret i variabelen. Hvis det ikke passer, endre det, for eksempel ved \u00e5 legge til en betingelse eller en try..catch-blokk \u2014 og f\u00e5 kontroll over utf\u00f8relsen av operasjonen.<\/p>\n
Stakkoverl\u00f8p<\/h3>\n
\nHvis man tror p\u00e5 forfatterne av sangen Baby One More Time (ja, det er Britney Spears), s\u00e5 betyr ordet hit i denne sammenhengen at sangeren \u00f8nsker \u00e5 bli oppringt igjen (her er en forklaring p\u00e5 sangens kontekst, \u2014 kommentar fra oversetteren). Det er fullt mulig at dette \u00f8nsket vil f\u00f8re til en \u00f8kning i antall oppringninger i det virkelige liv. Men i programmering er dette rekursjon, noe som kan for\u00e5rsake en feil hvis stakken av oppringninger blir overfylt.<\/p>\n
Feilene ser slik ut:<\/p>\n
Feil: Ut av stakkplass (Edge)
\nInternalError: for mye rekursjon (Firefox)
\nRangeError: Maksimal stakkst\u00f8rrelse overskredet (Chrome)
\n <\/i>
\nStakkoverf\u00f8ring skjer hvis utvikleren ikke vurderer basisfallet i rekursjonen, eller hvis koden ikke h\u00e5ndterer det tiltenkte tilfellet.<\/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
\nI dette tilfellet kan never stillBelieve ta verdien false, s\u00e5 oneMoreTime vil bli kalt hver gang, men funksjonen vil aldri fullf\u00f8res.<\/p>\n
Hvis man imidlertid begynner \u00e5 h\u00e5pe p\u00e5 to venner, vil dette redusere loneliness (alenehet), og oppringningen vil ikke v\u00e6re n\u00f8dvendig.<\/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
\nEt eksempel kan v\u00e6re situasjoner med uendelige l\u00f8kker, hvor systemet ikke viser en feilmelding, men siden som kj\u00f8rer JavaScript-koden bare henger. Dette skjer hvis while-l\u00f8kken ikke har en avslutningsbetingelse.<\/p>\n
let worldEnded = false\n \nwhile (worldEnded !== true) {\n  console.log(\"Keep on dancin' till the world ends\")\n}<\/code><\/pre>\n
\nProblemet kan l\u00f8ses p\u00e5 f\u00f8lgende m\u00e5te:<\/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
Feils\u00f8king av uendelige l\u00f8kker og rekursjoner<\/h3>\n
\nHvis det oppst\u00e5r et problem med en uendelig l\u00f8kke, m\u00e5 man i Chrome eller Edge lukke fanen, mens man i Firefox m\u00e5 lukke nettleservinduet. Deretter m\u00e5 koden analyseres n\u00f8ye. Hvis man ikke finner problemet, kan man legge til kommandoen debugger i l\u00f8kken eller funksjonen for \u00e5 sjekke verdien av variablene. Hvis resultatet ikke samsvarer med forventet, b\u00f8r man endre det, og dette kan gj\u00f8res enkelt.<\/p>\n
I eksempelet som er angitt ovenfor, b\u00f8r debugger legges til som den f\u00f8rste linjen i funksjonen eller l\u00f8kken. Deretter m\u00e5 du \u00e5pne debuggervinduet i Chrome for \u00e5 analysere variablene i scope. Ved hjelp av knappen next kan du spore deres endring med hver iterasjon. \u00c5 gj\u00f8re alt dette er enkelt, og i de fleste tilfeller er problemet funnet.<\/p>\n
Mer om dette kan leses her (for Chrome<\/a><\/noindex>) og her (for Firefox<\/a><\/noindex>).<\/p>\n
Syntaxfeil<\/h3>\n
\nEn av de vanligste feilene i JavaScript er SyntaxError. For \u00e5 unng\u00e5 dem kan hjelpe utvidelser for tekstredigering. Slik markerer Bracket Pair Colorizer klammer i koden med forskjellige farger, og Prettier eller et lignende analyseverkt\u00f8y lar deg raskt finne feil. Den beste l\u00f8sningen for \u00e5 redusere sjansen for SyntaxError er minimal innrykk.<\/p>\n
Del i kommentarfeltet: hva gj\u00f8r du for \u00e5 unng\u00e5 feil eller raskt oppdage og rette dem?<\/p>\n
Skillbox anbefaler:<\/b><\/p>\n