4. Unterrichtsblock: Funktionen und Arrays

Heute lernst du zwei Werkzeuge, mit denen Programme übersichtlich werden: Funktionen bündeln Code, den du wiederverwenden willst. Arrays speichern mehrere Werte in einer Liste. Arbeite weiter in deinem js-projekt aus dem letzten Block.

Funktionen: Code wiederverwenden

Eine Funktion ist ein benannter Codeblock. Du schreibst ihn einmal und rufst ihn beliebig oft auf. Eine Funktion definierst du mit function, einem Namen, runden Klammern und geschweiften Klammern für den Inhalt.

function begruesse() {
  console.log("Hallo und willkommen!");
}

begruesse();   // Aufruf: jetzt läuft der Code
begruesse();   // noch einmal

Die Funktion macht nichts, solange niemand sie aufruft. Aufgerufen wird sie durch ihren Namen mit Klammern, zum Beispiel direkt im Code oder per Klick auf einen Button:

<button onclick="begruesse()">Begrüßen</button>

Parameter und return

Damit eine Funktion flexibel ist, bekommt sie Parameter: Platzhalter in den Klammern. Beim Aufruf übergibst du Argumente, also die echten Werte.

function begruesse(name) {          // name ist der Parameter
  console.log("Hallo " + name + "!");
}

begruesse("Lina");      // "Lina" ist das Argument
begruesse("Max");

Mit return gibt eine Funktion einen Wert an den Aufrufer zurück. Danach endet die Funktion.

function addiere(a, b) {
  return a + b;
}

const summe = addiere(3, 4);
console.log(summe);              // 7
console.log(addiere(10, 5));     // 15

Beispiel: Eine Funktion, die Fahrenheit in Celsius umrechnet. Probiere sie aus:

function fahrenheitZuCelsius(f) {
  return (f - 32) * 5 / 9;
}

console.log(fahrenheitZuCelsius(68));    // 20

Lokale Variablen: Wo gilt eine Variable?

Eine Variable, die du in einer Funktion anlegst, gibt es nur dort (lokal). Nach dem Ende der Funktion ist sie weg. Variablen außerhalb aller Funktionen sind global: Sie gelten überall, auch in Funktionen. Auch die Parameter einer Funktion sind lokal.

const gruss = "Hallo";            // global

function zeigeText(name) {           // name ist lokal
  const satz = gruss + " " + name;   // satz ist lokal, gruss ist sichtbar
  console.log(satz);
}

zeigeText("Lina");
console.log(gruss);                  // funktioniert: global
console.log(satz);                   // Fehler: satz gibt es nur in der Funktion

Arrays: Listen von Werten

Ein Array speichert mehrere Werte in einer Reihenfolge. Die Werte stehen in eckigen Klammern, getrennt durch Kommas. Jedes Element hat eine Nummer, den Index. Der erste Index ist 0.

const filme = ["Matrix", "Shrek", "Inception"];

console.log(filme[0]);        // Matrix
console.log(filme[2]);        // Inception
console.log(filme.length);    // 3 (Anzahl der Elemente)
filme[1] = "Toy Story";       // Element ändern
console.log(filme);

Wähle einen Index und sieh, was im Array steht:

Obwohl ein Array mit const angelegt ist, darfst du seine Elemente ändern und Elemente hinzufügen. Nur das ganze Array darfst du nicht neu zuweisen:

const zahlen = [1, 2, 3];
zahlen[0] = 10;       // erlaubt
zahlen.push(4);       // erlaubt
zahlen = [5, 6];      // Fehler: Assignment to constant variable

Wichtige Array-Werkzeuge

const einkauf = ["Brot", "Milch"];
einkauf.push("Käse");
console.log(einkauf.length);                 // 3
console.log(einkauf.join(", "));             // Brot, Milch, Käse
console.log(einkauf.includes("Milch"));      // true
const letztes = einkauf.pop();               // Käse wird entfernt
console.log(letztes);

Funktionen und Arrays zusammen

Funktionen können Arrays als Argument bekommen und Werte daraus zurückgeben:

function letztesElement(liste) {
  return liste[liste.length - 1];
}

const tage = ["Mo", "Di", "Mi", "Do", "Fr"];
console.log(letztesElement(tage));            // Fr
console.log(letztesElement([3, 8, 5]));       // 5

Eine Funktion kann auch ein Array verändern, das sie bekommt, zum Beispiel mit push:

const liste = [];

function fuegeHinzu(text) {
  liste.push(text);
  console.log(liste.join(", "));
}

fuegeHinzu("Brot");
fuegeHinzu("Milch");

Math: Runden und Würfeln

Das Objekt Math ist schon eingebaut und enthält Werkzeuge für Zahlen. Du rufst sie mit Math. davor auf.

Mit Math.random() und Math.floor() würfelst du:

function wuerfeln(seiten) {
  return Math.floor(Math.random() * seiten) + 1;   // Zahl von 1 bis seiten
}

console.log(wuerfeln(6));      // z. B. 4
console.log(wuerfeln(20));     // z. B. 13

Abschlussaufgaben

Jetzt wird es anspruchsvoller. Nimm dir Zeit, es müssen nicht alle Aufgaben geschafft werden.

Kurz zusammengefasst

Funktionen bündeln Code. Parameter machen sie flexibel, return gibt ein Ergebnis zurück. Arrays speichern Listen, der erste Index ist 0, und mit length, push, pop und join arbeitest du damit. Beides zusammen macht Programme übersichtlich.