Zum Inhalt springen
aviral gupta
Kontakt aufnehmen

// B4.1 · ca. 30 Min. · Einstieg

Funktionen deklarieren und aufrufen

Nach dieser Lektion deklarieren Sie eine Funktion mit Parametern, rufen sie mit Argumenten auf, wissen, wann sie vor ihrer Zeile aufrufbar ist, und übergeben eine Funktion an eine andere.

Lektion 1 von 5 in B4 Funktionen

Anfang des Moduls

Danach können Sie

  • Eine Funktion mit Parametern deklarieren und mit Argumenten aufrufen, die nach Position zugeordnet werden
  • Wissen, dass eine Funktionsdeklaration gehoben wird, ein const-Funktionsausdruck aber nicht vor seiner Zeile aufrufbar ist
  • Eine Funktion als Wert an eine andere übergeben und den Fehler „is not a function“ lesen

  1. Aufwärmen · Aufgabe 1 von 7

    Zum Aufwärmen: Ein Programm deklariert function greet(name) { … }. Welche Zeile ruft sie auf?

  2. Vorhersagen · Aufgabe 2 von 7

    Sagen Sie es vorher, bevor Sie weiterlesen: Was gibt dieser Code aus?

    console.log("one");
function sayTwo() {
  console.log("two");
}
console.log("three");

  3. Üben · Aufgabe 3 von 7

    Ergänzen Sie den Aufruf, sodass das Programm 49 ausgibt, das Quadrat von 7.

    function square(n) {
  return n * n;
}
console.log(____);
    console.log();

  4. Üben · Aufgabe 4 von 7

    In function area(width, height) { return width * height; } und der Zeile area(4, 5);: Ordnen Sie jedem Begriff zu, was er ist.

  5. Üben · Aufgabe 5 von 7

    Die Funktion steht in einer const, unterhalb des Aufrufs. Was passiert?

    console.log(double(4));
const double = function (n) {
  return n * 2;
};

  6. Denksport · Aufgabe 6 von 7

    Knobelaufgabe. speak erhält als erstes Argument eine Funktion. Was gibt der Code aus?

    function shout(text) {
  return text.toUpperCase() + "!";
}
function whisper(text) {
  return text.toLowerCase() + "...";
}
function speak(style, text) {
  return style(text);
}
console.log(speak(whisper, "HELLO"));
console.log(speak(shout, "hi"));

  7. Anwenden · Aufgabe 7 von 7

    Mini-Aufgabe. Deklarieren Sie eine Funktion tip(bill, percent), die das Trinkgeld zurückgibt: bill * percent / 100. Rufen Sie sie dreimal mit verschiedenen Argumenten auf und geben Sie jedes Ergebnis mit einer Beschriftung aus, etwa Tip on 40 at 10%: 4. Setzen Sie dann einen Aufruf über die Deklaration und führen Sie das Programm erneut aus: Es läuft weiter, weil Deklarationen gehoben werden.

    Prüfen Sie Ihr Ergebnis anhand dieser Liste

Selbst programmieren

Lesen Sie das ausgearbeitete Beispiel und lösen Sie dann die Übungen. Ihr Code läuft in Ihrem Browser oder auf Ihrem Computer und wird nie hochgeladen.

Ausgearbeitetes Beispiel

Ein kleiner Laden

Vier Funktionen für einen Laden: withVat schlägt 19 % Mehrwertsteuer auf, formatPrice macht aus einem Betrag Text, roundUp ist ein Funktionsausdruck, und printEach erhält eine Liste von Preisen und eine Funktion, die es auf jeden anwendet. Die erste Zeile ruft zwei Deklarationen auf, bevor sie im Code stehen: Hoisting macht das möglich. Führen Sie das Programm aus und übergeben Sie dann withVat an printEach, um die langen Nachkommastellen zu sehen.

main.js

// A small shop: functions declared once, called many times.
console.log("Net 10 ->", formatPrice(withVat(10)));

function withVat(net) {
  return net * 1.19;
}

function formatPrice(amount) {
  return amount.toFixed(2) + " EUR";
}

const roundUp = function (amount) {
  return Math.ceil(amount);
};

function printEach(prices, change) {
  for (const p of prices) {
    console.log(p, "->", change(p));
  }
}

printEach([4.5, 20], formatPrice);
printEach([4.5, 20.2], roundUp);

Ausführen mit

node main.js

Ausgabe

Net 10 -> 11.90 EUR
4.5 -> 4.50 EUR
20 -> 20.00 EUR
4.5 -> 5
20.2 -> 21
  • formatPrice(withVat(10)) führt zuerst den inneren Aufruf aus: Sein Ergebnis, etwa 11.9, wird zum Argument von formatPrice.
  • Zeile 2 ruft withVat und formatPrice vor ihren Deklarationen auf; das klappt, weil Deklarationen gehoben werden.
  • printEach erhält formatPrice und roundUp ohne Klammern und ruft jede als change(p) auf.
  • roundUp ist eine const und wird deshalb erst nach ihrer Zeile verwendet.
Ändern und ausführen

Tab rückt ein, Umschalt+Tab rückt aus. Um den Editor mit der Tastatur zu verlassen, drücken Sie Esc und dann Tab.

Beim ersten Ausführen lädt Ihr Browser den JavaScript-Runner herunter (bis zu 0.1 MB) und speichert ihn im Cache. Ihr Code läuft in der eigenen Engine Ihres Browsers und bleibt auf Ihrem Gerät.

Übungen

Übung 1 von 2

Ihre ersten zwei Funktionen

Vervollständigen Sie greet(name) so, dass sie "Hello, " gefolgt vom Namen und "!" zurückgibt: greet("Ada") ergibt Hello, Ada!. Vervollständigen Sie rectangleArea(width, height) so, dass sie width mal height zurückgibt. Lassen Sie das Wort export vor jeder Funktion stehen: Damit können die Tests auf dieser Seite Ihre Funktionen importieren und aufrufen. Module und export lernen Sie in Modul I3.

Tab rückt ein, Umschalt+Tab rückt aus. Um den Editor mit der Tastatur zu verlassen, drücken Sie Esc und dann Tab.

Beim ersten Ausführen lädt Ihr Browser den JavaScript-Runner herunter (bis zu 0.1 MB) und speichert ihn im Cache. Ihr Code läuft in der eigenen Engine Ihres Browsers und bleibt auf Ihrem Gerät.

Hinweise
  1. Hinweis 1

    Führen Sie die Tests aus: Beide Funktionen geben undefined zurück, weil ihr Rumpf leer ist.

  2. Hinweis 2

    Verbinden Sie in greet die Teile mit +: "Hello, " + name + "!".

  3. Hinweis 3

    Jeder Rumpf braucht eine Zeile, die mit return beginnt, etwa return width * height;.

Eine Lösung zeigen

Ein möglicher Lösungsweg. Ihrer kann anders aussehen und trotzdem alle Prüfungen bestehen.

// Return "Hello, " followed by the name and "!".
export function greet(name) {
  return "Hello, " + name + "!";
}

// Return the area of a rectangle: width times height.
export function rectangleArea(width, height) {
  return width * height;
}
Auf dem eigenen Computer ausführen

Installieren Sie ECMAScript 2026 oder neuer. Speichern Sie diese Dateien in einem Ordner, öffnen Sie dort ein Terminal und führen Sie die Befehle unten aus.

main.js

// Return "Hello, " followed by the name and "!".
export function greet(name) {
}

// Return the area of a rectangle: width times height.
export function rectangleArea(width, height) {
}

main.test.js

import {test} from 'node:test';
import assert from 'node:assert/strict';
import {greet, rectangleArea} from './main.js';

test('greet("Ada") gibt Hello, Ada! zurück', () => {
  assert.equal(greet('Ada'), 'Hello, Ada!', `greet("Ada") hat ${JSON.stringify(greet('Ada'))} zurückgegeben, erwartet "Hello, Ada!"`);
});

test('greet funktioniert mit jedem Namen', () => {
  assert.equal(greet('Linus'), 'Hello, Linus!', `greet("Linus") hat ${JSON.stringify(greet('Linus'))} zurückgegeben, erwartet "Hello, Linus!"`);
});

test('rectangleArea(3, 4) gibt 12 zurück', () => {
  assert.equal(rectangleArea(3, 4), 12, `rectangleArea(3, 4) hat ${rectangleArea(3, 4)} zurückgegeben, erwartet 12`);
});

test('rectangleArea verwendet beide Argumente', () => {
  assert.equal(rectangleArea(5, 2), 10, `rectangleArea(5, 2) hat ${rectangleArea(5, 2)} zurückgegeben, erwartet 10`);
});

package.json

{
  "type": "module"
}

package.json sagt Node.js, dass die .js-Dateien Module sind; lassen Sie die Datei im Ordner.

Programm ausführen:

node main.js

Prüfungen ausführen (learnrun.js muss im selben Ordner liegen):

node --test
learnrun.js herunterladen

Übung 2 von 2

Zählen mit einer übergebenen Funktion

countWhere(items, check) soll die Einträge zählen, für die check(item) wahr ist. Die Tests übergeben jedes Mal eine andere Prüffunktion, etwa eine, die prüft, ob eine Zahl größer als 5 ist. Der Startcode zählt jeden Eintrag. Finden Sie heraus, warum, und korrigieren Sie ihn, sodass countWhere([3, 8, 12, 1], isBig) 2 zurückgibt.

Tab rückt ein, Umschalt+Tab rückt aus. Um den Editor mit der Tastatur zu verlassen, drücken Sie Esc und dann Tab.

Beim ersten Ausführen lädt Ihr Browser den JavaScript-Runner herunter (bis zu 0.1 MB) und speichert ihn im Cache. Ihr Code läuft in der eigenen Engine Ihres Browsers und bleibt auf Ihrem Gerät.

Hinweise
  1. Hinweis 1

    Führen Sie die Tests aus: Der Startcode gibt für vier Zahlen 4 zurück. Ist if (check) jemals falsch?

  2. Hinweis 2

    check enthält eine Funktion, und eine Funktion ist ein truthy Wert. Das if muss verwenden, was die Funktion für diesen Eintrag zurückgibt.

  3. Hinweis 3

    Rufen Sie sie mit dem Eintrag auf: if (check(item)) { … }.

Eine Lösung zeigen

Ein möglicher Lösungsweg. Ihrer kann anders aussehen und trotzdem alle Prüfungen bestehen.

// Count the items for which check(item) is true.
export function countWhere(items, check) {
  let count = 0;
  for (const item of items) {
    if (check(item)) {
      count++;
    }
  }
  return count;
}
Auf dem eigenen Computer ausführen

Installieren Sie ECMAScript 2026 oder neuer. Speichern Sie diese Dateien in einem Ordner, öffnen Sie dort ein Terminal und führen Sie die Befehle unten aus.

main.js

// Count the items for which check(item) is true.
export function countWhere(items, check) {
  let count = 0;
  for (const item of items) {
    if (check) {
      count++;
    }
  }
  return count;
}

main.test.js

import {test} from 'node:test';
import assert from 'node:assert/strict';
import {countWhere} from './main.js';

const isBig = function (n) {
  return n > 5;
};

test('zählt die Zahlen über 5', () => {
  const got = countWhere([3, 8, 12, 1], isBig);
  assert.equal(got, 2, `countWhere([3, 8, 12, 1], isBig) hat ${got} zurückgegeben, erwartet 2`);
});

test('funktioniert mit einer anderen Prüffunktion', () => {
  const isEmpty = function (s) {
    return s === "";
  };
  const got = countWhere(["a", "", "b", ""], isEmpty);
  assert.equal(got, 2, `das Zählen der leeren Strings hat ${got} ergeben, erwartet 2`);
});

test('ergibt 0 für eine leere Liste', () => {
  const got = countWhere([], isBig);
  assert.equal(got, 0, `countWhere([], isBig) hat ${got} zurückgegeben, erwartet 0`);
});

package.json

{
  "type": "module"
}

package.json sagt Node.js, dass die .js-Dateien Module sind; lassen Sie die Datei im Ordner.

Programm ausführen:

node main.js

Prüfungen ausführen (learnrun.js muss im selben Ordner liegen):

node --test
learnrun.js herunterladen

Häufige Fehler

Eine const-Funktion vor ihrer Zeile aufrufen

console.log(greet("Ada"));

const greet = function (name) {
  return "Hello, " + name;
};

Was Node.js ausgibt

ReferenceError: Cannot access 'greet' before initialization

Warum, und die Lösung

Nur Funktionsdeklarationen werden gehoben. greet ist eine const mit einem Funktionsausdruck, und wie jede const ist sie erst nach ihrer Zeile nutzbar. Setzen Sie den Aufruf unter die Definition, oder schreiben Sie eine Deklaration: function greet(name) { … }, die überall in der Datei aufrufbar ist.

Das Ergebnis statt der Funktion übergeben

function double(n) {
  return n * 2;
}
function applyTo(value, change) {
  return change(value);
}
console.log(applyTo(5, double(5)));

Was Node.js ausgibt

TypeError: change is not a function

Warum, und die Lösung

double(5) wird sofort aufgerufen, also erhält applyTo in change die Zahl 10, und change(value) versucht, eine Zahl aufzurufen. Die Meldung nennt den Wert, der aufgerufen wurde. Übergeben Sie die Funktion selbst, ohne Klammern: applyTo(5, double).

Ein falsch geschriebenes Schlüsselwort

fuction greet(name) {
  return "Hi " + name;
}
console.log(greet("Bo"));

Was Node.js ausgibt

SyntaxError: Unexpected identifier 'greet'

Warum, und die Lösung

fuction ist kein Schlüsselwort, also liest JavaScript es als Namen, und ein zweiter Name, greet, direkt dahinter ergibt keinen Sinn. Weil die Datei nicht gelesen werden kann, läuft gar nichts. Die Meldung zeigt auf greet, der Fehler ist aber das Wort davor: Schreiben Sie function.

JavaScript im Browser: die eigene Engine Ihres Browsers in einem abgeschotteten Worker. Syntaxfehler findet acorn 8.18.0, MIT. Lizenz und Quellcode

Abschlussquiz

5 Fragen, ohne Hinweise. Ab 80 % ist die Lektion abgeschlossen.

Erledigen Sie zuerst alle Aufgaben oben, um das Abschlussquiz freizuschalten.

Problem melden

Etwas ist falsch oder unklar? Beschreiben Sie es kurz, dann wird es geprüft und korrigiert.

#

Mindestens 20 Zeichen.

Nur, wenn Sie eine Antwort wünschen.

Kernideen

Einmal deklarieren, oft aufrufen

Eine Funktionsdeklaration besteht aus dem Schlüsselwort function, einem Namen, Parametern in runden Klammern und einem Rumpf in geschweiften Klammern: function square(number) { return number * number; }. Die Deklaration allein führt nichts aus. Erst ein Aufruf, der Name mit runden Klammern, führt den Rumpf aus: square(5). Parameter sind die Namen in der Definition, Argumente die Werte im Aufruf, nach Position zugeordnet: In square(5) erhält der Parameter number den Wert 5. return gibt einen Wert zurück, und der Aufruf wird zu diesem Wert: console.log(square(5)) gibt 25 aus. Lektion B4.3 behandelt return genauer. Rufen Sie eine Funktion so oft auf, wie Sie wollen, jedes Mal mit anderen Argumenten.

Deklarationen werden gehoben, Ausdrücke nicht

JavaScript richtet jede Funktionsdeklaration ein, bevor die erste Zeile läuft. Sie können eine deklarierte Funktion also schon oberhalb ihrer Zeile aufrufen. Das nennt man Hoisting. Eine Funktion lässt sich auch als Ausdruck schreiben und in einer Konstante speichern: const double = function (n) { return n * 2; };. Diese Konstante gibt es erst, wenn ihre Zeile gelaufen ist. Ein Aufruf von double darüber stoppt das Programm mit ReferenceError: Cannot access 'double' before initialization, demselben Fehler wie bei jeder zu früh gelesenen const. Deklarationen eignen sich für Hilfsfunktionen, die überall in der Datei nutzbar sein sollen; einen Ausdruck müssen Sie vor dem Aufruf definieren.

Funktionen sind Werte

Eine Funktion ist ein Wert, wie eine Zahl oder ein String. Sie können sie in einer Konstante speichern und als Argument an eine andere Funktion übergeben: printEach(prices, formatPrice). Ohne Klammern übergeben Sie die Funktion selbst; formatPrice(4.5) würde sie sofort aufrufen und nur ihr Ergebnis übergeben. Die empfangende Funktion ruft sie über ihren Parameter auf: change(p). Ist der übergebene Wert keine Funktion, scheitert dieser Aufruf mit TypeError: change is not a function. Derselbe TypeError entsteht, wenn Sie eine Zahl oder eine falsch geschriebene Methode aufrufen. Der Name in der Meldung ist der Wert, der aufgerufen wurde.

Quellen

Zuletzt geprüft am 3. Oktober 2026