JavaScript (JS) er et utbredt, fleksibelt og populært programmeringsspråk. Likevel er det kjent for å være utsatt for feil og problemer som ofte fører til frustrasjon blant utviklere.
JS er essensielt for å skape brukerinteraktivitet på klientsiden i de fleste nettapplikasjoner. Uten JavaScript ville nettsider oppleves som livløse og lite engasjerende. Likevel har mange utviklere et ambivalent forhold til språket, på grunn av dets uforutsigbarhet.
Feil i JavaScript kan føre til at applikasjoner oppfører seg uventet, noe som igjen påvirker brukeropplevelsen negativt. En forskningsstudie ved University of British Columbia (UBC) undersøkte årsakene til og virkningene av JavaScript-feil. Studiens resultater avslørte noen gjentagende mønstre som reduserer ytelsen til JS-programmer.
Følgende kakediagram illustrerer funnene fra forskningen:
I dette blogginnlegget skal vi se nærmere på noen av de vanligste årsakene til JavaScript-feil som ble avdekket i studien, samt andre vanlige feil. Vi skal også se på hvordan du kan gjøre applikasjonene dine mer robuste mot feil.
DOM-relaterte feil
Document Object Model (DOM) er avgjørende for interaktiviteten på nettsider. DOM-grensesnittet gir mulighet for å manipulere innholdet, stilen og strukturen til en nettside. JavaScript ble opprinnelig utviklet for å gjøre det mulig å skape interaktive HTML-nettsider, eller manipulere DOM.
Selv med fremveksten av backend JavaScript-teknologier som Node.js, utgjør arbeid med DOM fortsatt en stor del av hva språket brukes til. Derfor er DOM en viktig kilde til feil i JavaScript-applikasjoner.
Det er ikke overraskende at studien fant at DOM-relaterte problemer er ansvarlige for flertallet av feilene, nærmere bestemt 68 %.
En vanlig feil blant JavaScript-programmerere er å referere til et DOM-element før det er lastet inn, noe som fører til feil i koden.
<!DOCTYPE html>
<html>
<body>
<script>
document.getElementById("container").innerHTML = "Vanlige JS-feil";
</script>
<div id="container"></div>
</body>
</html>
Hvis koden over kjøres i en nettleser som Chrome, vil den generere en feilmelding som kan sees i utviklerkonsollen:
Feilen oppstår fordi JavaScript-kode vanligvis kjøres i den rekkefølgen den vises i dokumentet. Dermed er nettleseren ikke klar over det refererte
For å løse slike problemer finnes det ulike metoder. Den enkleste er å plassere
før script-taggen. Du kan også bruke et JavaScript-bibliotek som jQuery for å sikre at DOM-en er fullstendig lastet inn før den brukes.
<!DOCTYPE html>
<html>
<body>
<div id="container"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
document.getElementById("container").innerHTML = "Vanlige JS-feil";
</script>
</body>
</html>
Syntaksbaserte feil
Syntaksfeil oppstår når JavaScript-tolken ikke klarer å kjøre kode som inneholder syntaktiske feil. Hvis du skaper en applikasjon og tolken oppdager kodeelementer som ikke samsvarer med standardsyntaksen for JavaScript, vil den generere en feil. Ifølge studien er slike feil ansvarlige for 12 % av alle feil i språket.
Vanlige grammatiske feil som manglende parenteser eller feilaktige parentespar er hovedårsakene til syntaksfeil i JavaScript.
For eksempel kan man lett glemme å angi parentesene korrekt når man bruker betingede setninger for å håndtere flere forhold. Dette kan resultere i syntaksfeil.
La oss se på følgende eksempel:
if((x > y) && (y < 77) {
//mer kode her
}
Ja, den siste parentesen i den betingede setningen mangler. La du merke til feilen i koden over?
La oss rette opp i det:
if ((x > y) && (y < 77)) {
//mer kode her
}
For å unngå slike syntaksfeil, er det viktig å bruke tid på å lære de grammatiske reglene for JavaScript. Med tilstrekkelig øvelse vil du kunne gjenkjenne grammatiske feil lettere og unngå å sende dem med din utviklede applikasjon.
Feil bruk av nøkkelordene undefined/null
Noen JavaScript-utviklere har ikke full kontroll over hvordan de skal bruke nøkkelordene «undefined» og «null» korrekt. Studien viste at feil bruk av disse utgjør 5 % av alle JavaScript-feil.
Nøkkelordet «null» er en verdi som ofte brukes for å angi at en variabel ikke har en verdi. Overraskende nok er «null» også et JavaScript-objekt.
Her er et eksempel:
var codeJS = null;
console.log(codeJS);
//output er null
console.log(typeof codeJS);
//output er objekt
På den andre siden indikerer «undefined» at en variabel eller en annen egenskap som er deklarert, ikke har blitt tilordnet en verdi. Det kan også bety at ingenting er deklarert. «undefined» er en egen type.
Her er et eksempel:
var codeJS;
console.log(codeJS);
//output er undefined
console.log(typeof codeJS);
//output er undefined
Interessant nok, hvis man bruker likhetsoperatoren (==) og identitetsoperatoren (===) for å sammenligne «null» og «undefined», vil den sistnevnte ikke anse dem som like.
console.log(null==undefined); //output er true console.log(null===undefined); //output er false
Kunnskap om riktig bruk av «null» og «undefined» kan derfor hjelpe deg med å unngå feil i JavaScript-programmene dine.
Udefinerte metoder
En annen vanlig årsak til feil i JavaScript er å kalle en metode uten at den er definert i koden. Forskerne ved UBC fant ut at dette utgjør 4 % av alle JavaScript-feil.
Her er et eksempel:
var coder = {
name: "Peter",
age: 27,
speak() {
console.log(this.name);
}
};
coder.speakNow();
Dette er feilmeldingen som vises i Chrome-utviklerkonsollen:
Feilen oppstår fordi funksjonen `speakNow()` ikke er definert i JavaScript-koden.
Feil bruk av return-setningen
I JavaScript brukes `return`-setningen til å avslutte en funksjon og returnere en verdi. Hvis den brukes feil, kan den redusere applikasjonens ytelse. Studien viser at feil bruk av return-setningen er ansvarlig for 2 % av alle feil i JavaScript-applikasjoner.
En vanlig feil er for eksempel å bryte en `return`-setning på feil måte.
Selv om det kan være mulig å dele en JavaScript-setning over to linjer og likevel få ønsket resultat, kan det å bryte en `return`-setning føre til problemer i applikasjonen din.
Her er et eksempel:
function number(n) {
var add = 5;
return;
n + add;
}
console.log(number(10));
Når koden over kjøres, vises en `undefined`-feil i Chrome-utviklerkonsollen:
Du bør derfor unngå å bryte `return`-setninger i JavaScript-koden din.
Konklusjon
JavaScript er et kraftig språk på klientsiden som gir utmerkede muligheter for å skape funksjonalitet i moderne nettapplikasjoner. Men hvis du ikke forstår de underliggende mekanismene i språket, kan det gå ut over ytelsen til applikasjonene dine.
I tillegg trenger JavaScript-utviklere gode verktøy for å feilsøke ytelsen til applikasjonene sine og raskt oppdage feil.
En omfattende pakke med testverktøy kan hjelpe deg med å identifisere uregelmessigheter som påvirker ytelsen til nettstedet ditt. Dette er essensielt for å forbedre ytelsen og oppnå optimal brukeropplevelse.
Lykke til med feilfri JavaScript-programmering!
Artikkel skrevet av Alfrick Opidi