{"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\/da\/blog\/news\/oops-i-did-it-again-otladka-rasprostranennyh-oshibok-v-javascript","title":{"rendered":"Oops, I did it again: fejlfinding af almindelige JavaScript-fejl","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"

\"Oops,
\n
\nNogle gange kan det v\u00e6re sv\u00e6rt at skrive JavaScript-kode, og nogle bliver endda skr\u00e6mt, hvilket mange udviklere kender til. Under arbejdet opst\u00e5r der uundg\u00e5eligt fejl, og nogle af dem gentager sig ofte. I denne artikel, der henvender sig til begyndende udviklere, beskrives disse fejl og m\u00e5der at l\u00f8se dem p\u00e5. Til illustrative form\u00e5l er navne p\u00e5 funktioner, egenskaber og objekter taget fra en popul\u00e6r sang<\/a><\/noindex>. Alt dette hj\u00e6lper med hurtigt at huske, hvordan man retter almindelige fejl.
\n<\/a><\/noindex><\/p>\n

Vi minder om:<\/b> til alle l\u00e6sere af 'Habr' \u2014 rabat p\u00e5 10.000 rubler ved tilmelding til et hvilket som helst Skillbox-kursus med rabatkoden 'Habr'.<\/i><\/p>\n

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

<\/p>\n

TypeError: egenskab ikke defineret<\/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 giver fejlen Uncaught TypeError: Cannot read property \u2018lucky\u2019 of undefined. Problemet er, at objektet girl ikke har en egenskab called named, selvom der findes en egenskab called name. Da egenskaben girl.named ikke er defineret, kan man ikke f\u00e5 adgang til den, da den formelt set ikke eksisterer. Men hvis man erstatter girl.named.lucky med girl.name, s\u00e5 fungerer det, og programmet returnerer Lucky.<\/p>\n
Man kan l\u00e6se mere om egenskaberne her<\/a><\/noindex>.<\/p>\n
M\u00e5der at rette TypeError-fejl p\u00e5<\/h3>\n
\nTypeError-fejl opst\u00e5r, n\u00e5r programm\u00f8ren fors\u00f8ger at udf\u00f8re handlinger med data, der ikke svarer til en bestemt type. Som eksempel kan man tage brugen af .bold(), foresp\u00f8rgsel p\u00e5 en egenskab undefined eller kald af en funktion, som faktisk ikke er en funktion.<\/p>\n
S\u00e5 hvis man pr\u00f8ver at kalde girl (), vil der opst\u00e5 en fejl Uncaught TypeError: yourVariable.bold is not a function og girl is not a function, da der faktisk kaldes et objekt, ikke en funktion.<\/p>\n
For at rette fejlene er det n\u00f8dvendigt at unders\u00f8ge variablerne. Hvad er girl? Hvad er girl.named? Det kan man finde ud af ved at analysere koden, vise variablerne ved hj\u00e6lp af console.log med debugger-kommandoen eller ved at kalde variabelnavnet i konsollen. Man skal sikre sig, at man har mulighed for at arbejde med den datatyp, der er indeholdt i variablen. Hvis den ikke passer, skal man \u00e6ndre den, for eksempel ved at tilf\u00f8je en betingelse eller en try..catch-blok \u2014 og f\u00e5 kontrol over udf\u00f8relsen af operationen.<\/p>\n
Stakoverl\u00f8b<\/h3>\n
\nHvis man tror p\u00e5 forfatterne af sangen Baby One More Time (det er Britney Spears, ja), betyder ordet hit i denne sammenh\u00e6ng, at sangeren \u00f8nsker, at nogen ringer til hende igen (her er en forklaring af selve sangens kontekst \u2014 bem\u00e6rkning fra overs\u00e6tteren). Det er meget muligt, at dette \u00f8nske f\u00f8rer til et \u00f8get antal opkald i virkeligheden. Men i programmering er det rekursion, en metode der kan for\u00e5rsage en fejl ved stak-overl\u00f8b.<\/p>\n
Fejl ser s\u00e5ledes ud:<\/p>\n
Error: Out of stack space (Edge)
\nInternalError: too much recursion (Firefox)
\nRangeError: Maximum call stack size exceeded (Chrome)
\n <\/i>
\nStak-overl\u00f8b opst\u00e5r, hvis udvikleren ikke har taget h\u00f8jde for basisv\u00e6rdien i rekursionen, eller hvis koden ikke henviser til den forudsete situation.<\/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 tilf\u00e6lde kan stillBelieve aldrig antage v\u00e6rdien false, s\u00e5 der vil hver gang ske et opkald til oneMoreTime, men funktionen vil aldrig afslutte sit udf\u00f8rsel.<\/p>\n
Hvis man derimod begynder at h\u00e5be p\u00e5 to venner, vil det mindske loneliness (ensomhed), og man kan slippe for at vente p\u00e5 opkaldet.<\/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
\nSom eksempel kan man n\u00e6vne situationer med uendelige l\u00f8kker, hvor systemet ikke giver en fejlmeddelelse, men siden, hvor JavaScript-koden udf\u00f8res, blot fryser. Det sker, hvis while-l\u00f8kken ikke har en afslutningsbetingelse.<\/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 s\u00e5ledes:<\/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
Fejlretning af uendelige l\u00f8kker og rekursioner<\/h3>\n
\nHvis der opst\u00e5r et problem med en uendelig l\u00f8kke, skal man i Chrome eller Edge lukke fanen, mens man i Firefox skal lukke browservinduet. Herefter skal man omhyggeligt analysere koden. Hvis man ikke kan finde problemet, b\u00f8r man tilf\u00f8je kommandoen debugger i l\u00f8kken eller funktionen og tjekke v\u00e6rdierne p\u00e5 variablerne. Hvis resultatet ikke svarer til forventningen, skal man erstatte det, hvilket kan g\u00f8res nemt.<\/p>\n
I eksemplet ovenfor b\u00f8r debugger tilf\u00f8jes som den f\u00f8rste linje i funktionen eller l\u00f8kken. Derefter skal debuggervinduet \u00e5bnes i Chrome for at analysere variablerne i scope. Med knappen next kan man spore \u00e6ndringerne for hver iteration. Det er enkelt at g\u00f8re, og i de fleste tilf\u00e6lde er problemet fundet.<\/p>\n
For mere information kan du l\u00e6se her (til Chrome<\/a><\/noindex>) og her (til Firefox<\/a><\/noindex>).<\/p>\n
Syntaksfejl<\/h3>\n
\nEn af de mest almindelige fejl i JavaScript er SyntaxError. Disse kan undg\u00e5s ved hj\u00e6lp af udvidelser til teksteditorer. For eksempel fremh\u00e6ver Bracket Pair Colorizer parenteser i koden med forskellige farver, og Prettier eller et lignende analysev\u00e6rkt\u00f8j g\u00f8r det nemt at finde fejl. Den bedste l\u00f8sning for at mindske sandsynligheden for en SyntaxError er at have minimal indlejring.<\/p>\n
Del dine tanker i kommentarerne: Hvad g\u00f8r du for at undg\u00e5 fejl eller hurtigt opdage og rette dem?<\/p>\n
Skillbox anbefaler:<\/b><\/p>\n