Zum Inhalt
wannacode

Funktionen

Kurz gesagt: Eine Funktion ist ein Codeblock mit einem Namen, der eine Aufgabe erledigt: Du schreibst sie einmal und rufst sie über ihren Namen so oft auf, wie du sie brauchst.

Problem

Eine Änderung, drei Stellen

Du schreibst das Kassenprogramm für einen kleinen Laden. Jeder Kassenbon beginnt mit dem Namen des Ladens und der Telefonnummer, also hast du diese beiden Zeilen überall hinkopiert, wo ein Bon gedruckt wird.

Der Laden ändert seine Telefonnummer. Du korrigierst sie an zwei Stellen und übersiehst die dritte:

console.log("Eckladen");
console.log("Tel. 030 123 4567");
console.log("Brot      1,20 €");


console.log("Eckladen");
console.log("Tel. 030 123 4567");
console.log("Milch     2,10 €");


console.log("Eckladen");
console.log("Tel. 030 765 4321");
console.log("Kaffee    3,50 €");
Ausgabe
Eckladen
Tel. 030 123 4567
Brot      1,20 €
Eckladen
Tel. 030 123 4567
Milch     2,10 €
Eckladen
Tel. 030 765 4321
Kaffee    3,50 €

Der dritte Kunde bekommt einen Bon mit der alten Nummer. Je mehr Kopien es gibt, desto leichter übersieht man eine.

Die Idee

Einmal schreiben, mit Namen aufrufen

Leg den Teil, der sich wiederholt, an eine Stelle und gib ihm einen Namen. Das ist eine Funktion: ein Codeblock mit einem Namen, der eine Aufgabe erledigt.

Du schreibst die Funktion einmal. Wo du sie dann brauchst, schreibst du nur ihren Namen mit Klammern: printHeader();. Das nennt man die Funktion aufrufen.

Ändert der Laden seine Telefonnummer wieder, korrigierst du eine Zeile in der Funktion, und jeder Bon stimmt.

Sieh es dir an

Was bei einem Aufruf passiert

Das Programm läuft Zeile für Zeile. Erreicht es einen Aufruf, springt es in die Funktion, führt ihren Rumpf aus und kehrt direkt hinter den Aufruf zurück. Folge der Kugel: Sie ist die Stelle, an der das Programm gerade ist.

function printHeader() {
  console.log("Eckladen");
  console.log("Tel. 030 123 4567");
}


printHeader();
console.log("Brot      1,20 €");
printHeader();
console.log("Milch     2,10 €");
Schritt für Schritt, in Worten
  1. function speichert die Funktion nur. Die erste Zeile, die etwas tut, ist printHeader().
  2. Ein Aufruf: Die Ausführung springt in die Funktion.
  3. Die Funktion gibt den Kopf des Kassenbons aus.
  4. Die Funktion ist fertig: Die Ausführung kehrt direkt hinter den Aufruf zurück.
  5. Das Programm macht weiter: Es gibt das Brot aus.
  6. Ein zweiter Aufruf: derselbe Code, ohne ihn noch einmal zu schreiben.
  7. Der Kopf wird noch einmal ausgegeben.
  8. Zurück im Programm, weiter zur nächsten Zeile.

Beim zweiten Mal schreibst du den Kopf nicht noch einmal. Du rufst dieselbe Funktion auf, und sie gibt dieselben zwei Zeilen aus.

Die Idee

Wie man eine Funktion schreibt

Hier ist das ganze Programm, damit du siehst, wo die Funktion steht:

shop.js
function printHeader() {
  console.log("Eckladen");
  console.log("Tel. 030 123 4567");
}


printHeader();
console.log("Brot      1,20 €");
Ausgabe
Eckladen
Tel. 030 123 4567
Brot      1,20 €
function„hier ist eine Funktion“printHeaderName()nimmt nichtsder Rumpf
  • function sagt, dass eine Funktion folgt. Sie wird nur unter einem Namen gespeichert, nicht ausgeführt.
  • Der Name sagt, was die Funktion tut, deshalb ist er ein Verb: printHeader, printFooter. Namen in JavaScript beginnen mit einem Kleinbuchstaben, und jedes weitere Wort beginnt mit einem Großbuchstaben.
  • Die leeren Klammern bedeuten, dass die Funktion nichts von außen nimmt. Wir füllen sie in der nächsten Lektion.
  • Der Rumpf steht zwischen { und }.
  • Hier steht die Funktion über den Zeilen, die sie aufrufen, weil das leichter zu lesen ist.
Genauer, für Neugierige

Eine Funktion, die mit function geschrieben ist, kann auch aus einer Zeile darüber aufgerufen werden: Bevor JavaScript die Datei ausführt, sammelt es alle solchen Funktionen ein. Für die Formen, die du später siehst (const printHeader = () => { … }), gilt das nicht, deshalb ist es eine gute Gewohnheit, die Funktion über den Aufruf zu stellen.

Probier es aus

In welcher Reihenfolge?

Was gibt das Programm aus?

function printThanks() {
  console.log("Vielen Dank!");
}


console.log("Bestellung Nr. 1024");
printThanks();
console.log("Bestellung Nr. 1025");
printThanks();
Antwort

Probier es aus

Was fehlt?

Diese Funktion gibt den unteren Teil des Bons aus. Was gehört in die Lücke?

 printFooter() {
  console.log("Bis zum nächsten Mal!");
}

Probier es aus

Finde den Fehler

Das Programm läuft, gibt aber nur „Bestellung Nr. 1024“ aus, ohne „Vielen Dank!“. In welcher Zeile ist der Fehler?

Wähle die Zeile mit dem Fehler.

Übung

Der Kassenbon und das Dreieck

Löse sie in deinem Editor. Zu jeder gibt es eine Beispielausgabe, mit der du deine vergleichen kannst.

1. Kassenbon. Schreib drei Funktionen:

  • printLine() gibt mit einer Schleife eine Linie aus 20 Bindestrichen aus;
  • printHeader() gibt den Namen des Ladens, die Telefonnummer und die Linie aus;
  • printFooter() gibt die Linie und „Vielen Dank!“ aus.

Gib darunter zwei Bons aus: den Kopf, eine Zeile mit einem Einkauf, den unteren Teil.

Beispielausgabe
Eckladen
Tel. 030 123 4567
--------------------
Brot      1,20 €
--------------------
Vielen Dank!
Eckladen
Tel. 030 123 4567
--------------------
Milch     2,10 €
--------------------
Vielen Dank!

2. Dreieck. Schreib eine Funktion printTriangle(), die mit verschachtelten Schleifen ein Dreieck aus Sternen ausgibt, 4 Zeilen hoch:

Beispielausgabe
   *
  ***
 *****
*******

In der nächsten Lektion wird die Höhe zu einem Parameter: eine Funktion für ein Dreieck in jeder Höhe, die du willst.

Test

Teste dich

1. Wann läuft der Code im Rumpf einer Funktion?
2. Was macht function printThanks() { … }?
3. Eine Funktion wird an drei Stellen aufgerufen. Wie oft ist ihr Code geschrieben?
4. Was macht printThanks; ohne Klammern?

Erstellt von Ivo Gergov im Rahmen der Kampagne von Evo Tech für zugängliche Programmierausbildung ·