Sådan gør du JavaScript-kode lettere at læse

En JavaScript Beautifier er et begreb for en metode, der gør JavaScript-kode mere overskuelig ved at formatere den. Koden ændres typisk ikke i sin funktion, men mellemrum, linjeskift og indryk bliver sat mere konsekvent. Det kan være en hjælp, når kode er skrevet kompakt, kopieret fra en anden kilde eller svær at gennemgå. På dansk kan metoden beskrives som formatering eller forskønnelse af kode, men navnet handler om læsbarhed snarere end udseende alene.

Hvad formatering af JavaScript indebærer

JavaScript består af instruktioner, udtryk, funktioner og blokke, som fortolkes efter sprogets regler. Mellemrum og linjeskift kan ofte ændres uden at påvirke resultatet, men ikke altid: De kan være betydningsfulde inde i tekststrenge, kommentarer eller bestemte konstruktioner. Derfor er formatering ikke det samme som at ændre koden vilkårligt.

En almindelig opsætning placerer hver instruktion på sin egen linje, indrykker indholdet i en blok og bruger ensartet afstand omkring operatorer. En blok markeres ofte med krøllede parenteser. Indryk gør det lettere at se, hvilke instruktioner der hører til en funktion, en betingelse eller en løkke. En ensartet stil hjælper også med at opdage manglende parenteser og uventet indlejring, selv om formatering i sig selv ikke beviser, at koden er korrekt.

Sådan formaterer du koden i hånden

1. Find kodens struktur. Se efter funktioner, betingelser, løkker og blokke, der begynder med en krøllet parentes og afsluttes med den tilhørende parentes. Kontrollér først, at parenteserne ser ud til at høre sammen.
2. Del koden op i passende linjer. Sæt normalt hver selvstændig instruktion på en ny linje. Bevar tekststrenge og kommentarer præcis, så deres indhold ikke ændres.
3. Indryk indholdet i blokke. Flyt instruktionerne i en blok et fast trin ind fra linjen med den åbne parentes. Når blokken slutter, skal indrykket gå tilbage til det foregående niveau.
4. Brug mellemrum konsekvent. Sæt luft omkring operatorer, hvor det gør udtrykket lettere at læse, og undgå tilfældige blandinger af indryk og afstand. Vælg en fast stil for semikolon og linjeskift, og hold dig til den.
5. Gennemgå resultatet. Sammenlign den formaterede version med udgangspunktet. Tjek især tekststrenge, kommentarer og parenteser, så ingen instruktioner eller tegn er blevet ændret ved en fejl.

Tag for eksempel en betingelse med en blok: Betingelsens linje står først, instruktionerne under den står indrykket, og den afsluttende krøllede parentes står på samme indrykningsniveau som betingelsen. Det princip kan gentages inde i funktioner og andre blokke. Ved indlejrede blokke får hvert niveau et ekstra indryk, så hierarkiet fremgår visuelt.

Hvor formateret kode bruges

Læsbar JavaScript er nyttig ved fejlfinding, gennemgang og vedligeholdelse. Når flere personer arbejder med samme kode, gør en fælles formateringsstil forskelle mellem ændringer tydeligere og mindsker støj i sammenligninger. Den samme struktur kan hjælpe, når ældre kode skal forstås, eller når et lille udsnit skal forklares i dokumentation.

Formatering ændrer ikke automatisk uklare navne, fejl i logikken eller usikker håndtering af data. Det er derfor vigtigt at skelne mellem pænere opsætning og egentlig forbedring af programmet. En JavaScript Beautifier beskriver først og fremmest en måde at præsentere koden på, så dens struktur og indhold er lettere at undersøge.