So schreibst Du lesbaren und effizienten Code

Ein Code ist komplex. Du schreibst wenig Text, der viel Bedeutung mit sich bringt.

Jeder Buchstabe und jedes Zeichen müssen an die richtige Stelle gesetzt werden, damit dein Programm funktioniert.

Für ein Computer ist es leicht den Code zu verstehen, doch unser menschliches Gehirn arbeitet nicht so effizient.

Wenn wir Code schreiben sollten wir daher darauf achten, dass es auch von anderen Programmierern verstanden werden kann.

Und nicht nur das: Oft kommt es vor, dass wir einen Programmcode monatelang nicht anfassen und plötzlich müssen wir eine Änderung machen. Doch wieso verstehen wir unseren eigenen Code nach einigen Monaten nicht mehr? Das liegt daran, dass unser Code nicht gut lesbar ist.

Ein guter Code hingegen lässt sich leicht lesen und bei Wartungsarbeiten oder neuen Features leicht erweitern bzw. ändern.

Du solltest dir daher angewöhnen, deinen Code effizient und lesbar zu schreiben, denn:

• Effizienter Code lässt sich leicht abändern
• Lesbarer Code ist für andere Programmierer leicht verständlich.

Während du das Programmiern lernst, wirst du merken, dass es ein Balance-Akt, diese beiden Aspekte anzuwenden. Ich möchte dir in diesem Artikel einen einfachen App-Code zeigen, den ich geschrieben habe. Mit jeder Version dieser App möchte ich dir zeigen, wie du den Code effizienter und lesbarer machst.

Wie sieht ein unproduktiver Code aus?

function start() {
  hintergrund('weltraum');

  figur('pizza', 400, 400, 0.3);
  figur('pizza', 400, 350, 0.3);
  figur('pizza', 400, 300, 0.3);
  figur('pizza', 400, 250, 0.3);
  figur('pizza', 400, 200, 0.3);
  figur('pizza', 400, 150, 0.3);
  figur('pizza', 400, 100, 0.3);
}

Das folgende Code-Beispiel macht das, was es soll:

1. Wir schreiben unseren Code in die "Standard" Funktion namens function start() {
2. Der Code füllt deinen Bildschirm mit dem Hintergrundbild "weltraum"
3. Und er zeigt die Figur "pizza" 7 mal übereinander an. (Jede Pizza wird im Koordinatensystem auf die Koordinate X 400 gesetzt. Auf der Y-Koordinate fangen wir bei Y 400 an und haben bei jeder weiteren Figur einen Abstand von 50 Pixeln.)
4. Die Start-Funktion wird mit der geschweiften Klammer geschlossen }

So sieht die Pizza-App im Editor aus:

Der Code funktioniert, doch wo ist das Problem?

Das Problem mit bei diesem Programm ist, dass es sich nicht einfach anpassen oder ändern lässt. Wenn Du z.B. 4 weitere Pizza-Figuren hinzufügen möchtest, dann müsstest Du den Figuren-Code erneut 4 mal im Code eintippen. Noch aufwendiger wird es, wenn du die Figur 20 weitere Male einfügen möchtest.

Uff, jetzt müsstest Du den Code 20 Mal im Code-Editor eintippen oder kopieren/einfügen.

Code vereinfachen durch Variablen, Schleifen und Funktionen

Wie können wir den Code denn vereinfachen und effizienter machen?

Durch den Einsatz unserer Programmierer-Werkzeuge können wir die geschriebenen Code-Zeilen drastisch reduzieren.

Du kannst dir merken, dass sich die gleiche Code-Zeile nicht zu oft wiederholen sollte. Nutze stattdessen deine Programmier-Werkzeuge wie Variablen, Schleifen und Funktionen.

Hier ist das gleiche Code-Beispiel mit mehr Flexibilität und besserer Lesbarkeit:

function start() {
 hintergrund('weltraum');
 i = 7;
 wiederhole(6, stapeln);
}

function stapeln() {
  figur('pizza', 400, (i * 50) + 50, 0.3);  
  i = i - 1;
}

Was habe ich geändert, um den Code effizienter zu gestalten?

• Die ersten beiden Codezeilen sind unverändert: function start() { und Hintergrundbild "weltraum" einfügen
• Danach setzen wir eine Zählervariable namens i. Wir geben der Variable i den Wert 7, da wir 7 Pizzen anzeigen wollen. i = 7;
• Jetzt rufen wir die wiederhole-Funktion auf. Das ist eine sogenannte Schleife. Sie wird solange ausgeführt, bis eine Bedingung erfüllt wird. In unserem Fall bekommt die wiederhole()-Funktion den Wert 6. Warum 6 und nicht 7? Die Schleife fängt bei 0 an zu zählen. Um die Schleife 7-mal zu durchlaufen müssen wir also die Zahl 6 angeben (0,1,2,3,4,5,6 = 7 Wiederholungen). Im nächsten Parameter soll unsere Funktion "stapeln" aufgerufen werden. Diese erstellen wir im nächsten Schritt.
• Jetzt wird die function start() wieder mit der geschweiften Klammer geschlossen }
• Jetzt erstellen wir die Funktion function stapeln() . Hier definieren wir eine Funktion, die uns die Pizza-Figur anzeigen wird. Wir öffnen die Funktion mit der geschweiften Klammer-auf {
• In der nächsten Zeile (Zeile 8) setze ich die Pizza-Figur "pizza". Wie auch im vorherigen Beispiel, wird die Figur auf die X-Koordinate "400" gesetzt. Das entspricht ungefähr der horizontalen Bildschirm-Mitte.
• Im letzten Beispiel haben wir die Y-Koordinate jedes mal selbst setzen müssen. damit die Pizzen übereinander gestapelt werden. Um den Code zu vereinfachen, setzen wir die Y-Koordinate nun automatisch. Da wir die Pizzen übereinander stapeln wollen, müssen wir die Y-Koordinaten jeweils um 50 Pixel versetzen. Das geschieht mit der einfachen Formel (i * 50) + 50.
• Schauen wir uns in Ruhe an, was diese Formel macht: Wir haben unsere Zählervariable i. Beim ersten Programmdurchlauf hat die Variable den Wert 7 (siehe 3. Zeile). Das bedeutet hier wird folgende Rechnung durchgeführt: (7 * 50) + 50. Wenn wir hier einfaches Kopfrechnen (... oder den Taschenrechner) anwenden bekommen wir die Summe (350) + 50 = 400. Das bedeutet, dass die Y-Koordinate beim ersten Programmdurchlauf den Wert "400" bekommt. Auf dem Bildschirm wird die Figur also fast am unteren Spielfeld-Rand angezeigt.
• Im Anschluss ändern wir unsere Zählevariable i. Wir subtrahieren hier bei jedem Programmdurchlauf den Wert 1. Im ersten Durchlauf war der Wert i = 7. Sobald diese Code-Zeile durchläuft hat i den Wert 6.  (Wenn die wiederholen-Schleife 7 mal durchgelaufen ist, hat i den Wert 1 ... und wir haben 7 Pizzen die jeweils um 50 Pixel versetzt übereinander gestapelt wurden)

Ich gebe zu, dass das jetzt eine sehr ausführliche Erklärung für einen relativ simplen Code war.

Zusammen mit einer leeren Zeile (für die Lesbarkeit) hat dieses Programm jedoch nur noch 10 Code-Zeilen. Im Vergleich zu vorher, haben wir eine Codezeile gespart, die Lesbarkeit verbessert und spätere Anpassungen an unserem Programm vereinfacht.

Für den Anfang: Schreibe Code der funktioniert.

Wenn Du grade erst mit dem Programmieren anfängst, schreibe einfach Code der funktioniert. Das Wichtigste ist zunächst die Funktionalität zu verstehen. Danach kannst du dich um die Effizienz und Lesbarkeit deines Codes kümmern.

Grundlegend gilt, dass effizienter Code oft schwer zu lesen ist, da er komplex aussieht. Wie du siehst ist es manchmal schwer, die richtige Balance zwischen Effizienz und Lesbarkeit zu bekommen. Mit ein wenig Erfahrung, wirst du diese Balance jedoch hinbekommen. Andere Leute, die deinen Code lesen und verstehen müssen, werden es dir Danken 🙂

Hier kannst Du dein neues Wissen direkt umsetzen: kids.codekiste.com