{"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\/ro\/blog\/news\/oops-i-did-it-again-otladka-rasprostranennyh-oshibok-v-javascript","title":{"rendered":"Oops, am f\u0103cut-o din nou: depanarea gre\u0219elilor comune \u00een JavaScript","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"

\"Oops,
\n
\nScrierea codului JavaScript poate fi uneori dificil\u0103 \u0219i chiar intimidant\u0103, ceea ce este familiar pentru mul\u021bi dezvoltatori. \u00cen procesul de lucru, apar inevitable erori, iar unele dintre acestea se repet\u0103 frecvent. Articolul, destinat dezvoltatorilor \u00eencep\u0103tori, discut\u0103 despre aceste erori \u0219i modalit\u0103\u021bile de a le solu\u021biona. Pentru ilustrarea clar\u0103, numele func\u021biilor, propriet\u0103\u021bilor \u0219i obiectelor sunt preluate din o melodie popular\u0103<\/a><\/noindex>. Toate acestea ajut\u0103 la memorarea rapid\u0103 a modului de corectare a celor mai comune erori.
\n<\/a><\/noindex><\/p>\n

V\u0103 reamintim:<\/b> pentru to\u021bi cititorii \u201eHabr\u201d \u2014 reducere de 10.000 de ruble la \u00eenscrierea la orice curs Skillbox cu codul de promovare \u201eHabr\u201d.<\/i><\/p>\n

Skillbox recomand\u0103:<\/b> Curs practic \u00abDezvoltator mobil PRO\u00bb<\/a><\/noindex>.\n<\/p><\/blockquote>\n

<\/p>\n

TypeError: proprietate nedefinit\u0103<\/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
\nExemplul de cod men\u021bionat mai sus genereaz\u0103 eroarea Uncaught TypeError: Cannot read property \u2018lucky\u2019 of undefined. Problema const\u0103 \u00een faptul c\u0103 obiectul girl nu are proprietatea named, de\u0219i exist\u0103 proprietatea name. \u0218i, deoarece proprietatea girl.named nu este definit\u0103, nu se poate accesa, deoarece formal nu exist\u0103. \u00cens\u0103, dac\u0103 \u00eenlocui\u021bi girl.named.lucky cu girl.name, totul va func\u021biona \u0219i programul va returna Lucky.<\/p>\n
Mai multe informa\u021bii despre propriet\u0103\u021bi pot fi citite aici<\/a><\/noindex>.<\/p>\n
Modalit\u0103\u021bi de eliminare a erorilor TypeError<\/h3>\n
\nErorile TypeError apar atunci c\u00e2nd programatorul \u00eencearc\u0103 s\u0103 efectueze ac\u021biuni asupra datelor care nu corespund unui anumit tip. De exemplu, pentru a aplica .bold(), a solicita o proprietate undefined sau a apela o func\u021bie care, de fapt, nu este o func\u021bie.<\/p>\n
A\u0219adar, dac\u0103 \u00eencerca\u021bi s\u0103 apela\u021bi girl(), ve\u021bi primi eroarea Uncaught TypeError: yourVariable.bold is not a function \u0219i girl is not a function, deoarece de fapt obiectul este apelat, nu func\u021bia.<\/p>\n
Pentru a elimina erorile, trebuie studiate variabilele. Ce este, a\u0219adar, girl? \u0218i ce este girl.named? Acestea pot fi identificate analiz\u00e2nd codul, afi\u0219\u00e2nd variabile cu ajutorul console.log, comenzii debugger sau apel\u00e2nd numele variabilei \u00een consol\u0103. Trebuie s\u0103 v\u0103 asigura\u021bi c\u0103 ave\u021bi posibilitatea de a opera cu tipul de date con\u021binut \u00een variabil\u0103. Dac\u0103 acesta nu este adecvat, schimba\u021bi-l, de exemplu, ad\u0103ug\u00e2nd o condi\u021bie sau un bloc try..catch - \u0219i ob\u021bine\u021bi control asupra execu\u021biei opera\u021biei.<\/p>\n
Supra\u00eenc\u0103rcarea stivei<\/h3>\n
\nDac\u0103 ne baz\u0103m pe autorii melodiei Baby One More Time (da, e vorba de Britney Spears), cuv\u00e2ntul hit \u00een acest context \u00eenseamn\u0103 dorin\u021ba c\u00e2nt\u0103re\u021bei de a primi un telefon din nou (acesta este un context explicativ, nota traduc\u0103torului). Este posibil ca aceast\u0103 dorin\u021b\u0103 s\u0103 duc\u0103 la o cre\u0219tere a apelurilor \u00een via\u021ba real\u0103. Dar \u00een programare, aceasta este recursivitate, capabil\u0103 s\u0103 provoace o eroare \u00een cazul suprasarcinii stivei de apeluri.<\/p>\n
Erorile arat\u0103 \u00een felul urm\u0103tor:<\/p>\n
Error: Out of stack space (Edge)
\nInternalError: too much recursion (Firefox)
\nRangeError: Maximum call stack size exceeded (Chrome)
\n <\/i>
\nSuprasarcina stivei apare dac\u0103 dezvoltatorul nu a luat \u00een considerare cazul de baz\u0103 \u00een recursie sau dac\u0103 codul nu abordeaz\u0103 cazul prev\u0103zut.<\/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
\n\u00cen acest caz, stillBelieve nu poate lua niciodat\u0103 valoarea false, astfel c\u0103 va avea loc constant apelul oneMoreTime, dar executarea func\u021biei nu se va \u00eencheia.<\/p>\n
Dac\u0103 \u00eencepem s\u0103 ne baz\u0103m pe doi prieteni, aceasta va reduce loneliness (singur\u0103tatea), iar apelul nu va mai fi a\u0219teptat.<\/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
\nUn exemplu ar fi cazurile cu bucle infinite, c\u00e2nd sistemul nu returneaz\u0103 un mesaj de eroare, iar pagina pe care se execut\u0103 codul JavaScript pur \u0219i simplu se blocheaz\u0103. Aceasta se \u00eent\u00e2mpl\u0103 dac\u0103 bucla while nu are o condi\u021bie de terminare.<\/p>\n
let worldEnded = false\n \nwhile (worldEnded !== true) {\n  console.log(\"Keep on dancin' till the world ends\")\n}<\/code><\/pre>\n
\nProblema poate fi rezolvat\u0103 astfel:<\/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
Debbuging buclelor infinite \u0219i recursiilor<\/h3>\n
\nDac\u0103 a ap\u0103rut o problem\u0103 cu o bucl\u0103 infinit\u0103, \u00een Chrome sau Edge trebuie s\u0103 \u00eenchide\u021bi tab-ul, iar \u00een Firefox \u2013 fereastra browser-ului. Dup\u0103 aceasta, trebuie s\u0103 analiza\u021bi cu aten\u021bie codul. Dac\u0103 nu a\u021bi reu\u0219it s\u0103 g\u0103si\u021bi problema, merit\u0103 s\u0103 ad\u0103uga\u021bi comanda debugger \u00een bucl\u0103 sau func\u021bie \u0219i s\u0103 verifica\u021bi valoarea variabilelor. Dac\u0103 rezultatul nu corespunde a\u0219tept\u0103rilor, acesta poate fi \u00eenlocuit, ceea ce se poate face u\u0219or.<\/p>\n
\u00cen exemplul men\u021bionat mai sus, debuggerul ar trebui ad\u0103ugat ca prima linie a func\u021biei sau a buclei. Apoi trebuie s\u0103 deschide\u021bi tab-ul de debug \u00een Chrome, analiz\u00e2nd variabilele din scope. Folosind butonul next, pute\u021bi urm\u0103ri modific\u0103rile acestora la fiecare itera\u021bie. Este simplu de realizat, iar \u00een cele mai multe cazuri, problema este identificat\u0103.<\/p>\n
Mai multe detalii despre toate acestea pot fi citite aici (pentru Chrome<\/a><\/noindex>) \u0219i aici (pentru Firefox<\/a><\/noindex>).<\/p>\n
Eroare de sintax\u0103<\/h3>\n
\nUna dintre cele mai comune erori \u00een JavaScript este SyntaxError. Evitarea acestora poate fi ajutat\u0103 de extensiile editorului de text. De exemplu, Bracket Pair Colorizer marcheaz\u0103 parantezele din cod cu culori diferite, iar Prettier sau un instrument de analiz\u0103 similar permite g\u0103sirea rapid\u0103 a erorilor. Cea mai bun\u0103 op\u021biune pentru a reduce probabilitatea apari\u021biei SyntaxError este o ad\u00e2ncire minim\u0103.<\/p>\n
\u00cemp\u0103rt\u0103\u0219i\u021bi \u00een comentarii: ce face\u021bi pentru a evita erorile sau pentru a le descoperi \u0219i elimina rapid?<\/p>\n
Skillbox recomand\u0103:<\/b><\/p>\n