Kodestil

Vores kode skal være så ren og let at læse som muligt.

Det er faktisk programmeringens kunst – at tage en kompleks opgave og kode den på en måde, der både er korrekt og menneskelæselig. En god kodestil hjælper meget med det.

Syntaks

Her er et snydeark med nogle foreslåede regler (se nedenfor for flere detaljer):

Lad os nu diskutere reglerne og årsagerne til dem i detaljer.

Krøllede parenteser

I de fleste JavaScript-projekter skrives krøllede parenteser i “Egyptian” stil med den åbne parentes på samme linje som det tilsvarende nøgleord – ikke på en ny linje. Der skal også være et mellemrum før den åbne parentes, sådan her:

if (betingelse) {
  // gør dette
  // ...og dette
  // ...og dette
}

En enkeltlinjekonstruktion, såsom if (betingelse) doSomething(), er et vigtig “edge case”. Skal vi overhovedet bruge parenteser her?

Her er de annoterede varianter, så du kan bedømme deres læsbarhed for dig selv:

1. 😠 Begyndere gør nogle gange dette. De krøllede parenteser er ikke nødvendige:

   if (n < 0) {alert(`At opløfte i potens ${n} er ikke understøttet`);}

2. 😠 Split op til en ny linje uden parenteser. Man kan risikere at lave en fejl, når man tilføjer nye linjer:

   if (n < 0)
     alert(`At opløfte i potens ${n} er ikke understøttet`);

3. 😏 En linje uden parenteser – acceptabelt, hvis det er kort:

   if (n < 0) alert(`At opløfte i potens ${n} er ikke understøttet`);

4. 😃 Den mest læsbare variant:

   if (n < 0) {
     alert(`At opløfte i potens ${n} er ikke understøttet`);
   }

For kort kode er en enkelt linje tilladt, f.eks. if (cond) return null. Men en kodeblok (den sidste variant) er normalt mere læsbar.

Linjelængde

Ingen bryder sig om at læse en lang horisontal linje kode. Det er bedste praksis at opdele dem.

For eksempel:

// backtick quotes ` tillader at opdele strengen i flere linjer
let str = `
  ECMA International's TC39 er en gruppe af JavaScript-udviklere,
  implementører, akademikere og flere, der samarbejder med fællesskabet
  for at vedligeholde og udvikle definitionen af JavaScript.
`;

Og for if udsagn:

if (
  id === 123 &&
  moonPhase === 'Waning Gibbous' &&
  zodiacSign === 'Libra'
) {
  letTheSorceryBegin();
}

Den maksimale linjelængde bør aftales på teamniveau. Det er normalt 80 eller 120 tegn.

Indrykninger

Der findes to typer indrykninger:

• Horisontale indrykninger: 2 eller 4 mellemrum.

  En horisontal indrykning laves ved hjælp af enten 2 eller 4 mellemrum eller det horisontale tab-symbol (tasten Tab). Hvilken man vælger er en gammel hellig krig. Mellemrum er mere almindelige nu om dage.

  En fordel ved mellemrum frem for tabulatorer er, at mellemrum tillader mere fleksible konfigurationer af indrykninger end tabulator-symbolet.

  For eksempel kan vi justere parametrene med den åbne parentes, sådan her:

  show(parametre,
       justeret, // 5 mellemrum indrykning til venstre
       en,
       efter,
       en,
       anden
    ) {
    // ...
  }