Funktionen

Funktionen sind wiederverwendbare Codeblöcke, die eine bestimmte Aufgabe ausführen. Sie sind wie kleine Maschinen, die Eingaben (Parameter) nehmen, etwas damit tun und oft ein Ergebnis zurückgeben. Funktionen helfen uns, unseren Code zu organisieren, zu strukturieren und Wiederholungen zu vermeiden.

Warum Funktionen verwenden?

• Wiederverwendbarkeit: Schreiben Sie den Code einmal und nutzen Sie ihn immer wieder
• Übersichtlichkeit: Unterteilen Sie komplexe Programme in kleinere, verständliche Teile
• Wartbarkeit: Ändern Sie die Implementierung an einer Stelle, ohne den Rest des Codes anzufassen
• Abstraktion: Nutzen Sie Funktionen, ohne genau wissen zu müssen, wie sie intern arbeiten

Funktionen definieren

In JavaScript gibt es mehrere Möglichkeiten, Funktionen zu definieren:

1. Funktionserklärung (Function Declaration)

function begrüssung() {
  console.log("Hallo, willkommen zur JavaScript-Welt!");
}

2. Funktionsausdruck (Function Expression)

const begrüssung = function () {
  console.log("Hallo, willkommen zur JavaScript-Welt!");
};

3. Pfeilfunktion (Arrow Function) - moderne Schreibweise

const begrüssung = () => {
  console.log("Hallo, willkommen zur JavaScript-Welt!");
};

Funktionen aufrufen

Nach der Definition können Sie eine Funktion einfach aufrufen, indem Sie ihren Namen gefolgt von Klammern verwenden:

// Funktion definieren
function begrüssung() {
  console.log("Hallo, willkommen zur JavaScript-Welt!");
}

// Funktion aufrufen
begrüssung(); // Ausgabe: Hallo, willkommen zur JavaScript-Welt!

Parameter und Argumente

Funktionen können Parameter akzeptieren - Variablen, die beim Aufruf der Funktion mit Werten (Argumenten) gefüllt werden:

function personBegrüssen(name) {
  console.log("Hallo, " + name + "! Willkommen zur JavaScript-Welt!");
}

personBegrüssen("Maria"); // Ausgabe: Hallo, Maria! Willkommen zur JavaScript-Welt!
personBegrüssen("Thomas"); // Ausgabe: Hallo, Thomas! Willkommen zur JavaScript-Welt!

Mehrere Parameter

Funktionen können auch mehrere Parameter haben:

function addiere(a, b) {
  console.log(a + b);
}

addiere(5, 3); // Ausgabe: 8

Standardwerte für Parameter

Sie können Standardwerte für Parameter festlegen, falls keine Argumente übergeben werden:

function begrüsseMit(name = "Gast", gruss = "Hallo") {
  console.log(`${gruss}, ${name}!`);
}

begrüsseMit(); // Ausgabe: Hallo, Gast!
begrüsseMit("Maria"); // Ausgabe: Hallo, Maria!
begrüsseMit("Thomas", "Guten Tag"); // Ausgabe: Guten Tag, Thomas!

Rückgabewerte mit return

Funktionen können mit dem return-Statement einen Wert zurückgeben:

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

let ergebnis = addiere(5, 3);
console.log(ergebnis); // Ausgabe: 8
console.log(addiere(10, 20)); // Ausgabe: 30

Eine Funktion kann nur einen Wert zurückgeben. Nach dem return-Statement wird die Funktion sofort beendet:

function istVolljährig(alter) {
  if (alter >= 18) {
    return true;
  }
  return false;
}

console.log(istVolljährig(20)); // Ausgabe: true
console.log(istVolljährig(16)); // Ausgabe: false

Funktionsscope und Variablen

Variablen, die innerhalb einer Funktion definiert werden, sind ausserhalb der Funktion nicht zugänglich:

function zeigeNachricht() {
  let nachricht = "Hallo von innen!";
  console.log(nachricht);
}

zeigeNachricht(); // Ausgabe: Hallo von innen!
// console.log(nachricht); // Würde einen Fehler verursachen, da 'nachricht' nicht zugänglich ist

Funktionen können jedoch auf Variablen zugreifen, die ausserhalb definiert wurden:

let globaleNachricht = "Ich bin global!";

function zeigeGlobaleNachricht() {
  console.log(globaleNachricht);
}

zeigeGlobaleNachricht(); // Ausgabe: Ich bin global!

Pfeilfunktionen (Arrow Functions)

Pfeilfunktionen bieten eine kürzere Syntax für Funktionsausdrücke und haben einige besondere Eigenschaften:

// Traditionelle Funktion
const verdopple = function (x) {
  return x * 2;
};

// Gleichwertige Pfeilfunktion
const verdopplePfeil = (x) => {
  return x * 2;
};

// Noch kürzer, wenn nur eine Anweisung vorhanden ist:
const verdoppleKurz = (x) => x * 2;

console.log(verdoppleKurz(5)); // Ausgabe: 10

Wann Pfeilfunktionen besonders nützlich sind

Pfeilfunktionen sind besonders nützlich für kurze Callback-Funktionen:

// Mit traditioneller Funktion
let zahlen = [1, 2, 3, 4, 5];
let quadrate = zahlen.map(function (zahl) {
  return zahl * zahl;
});

// Mit Pfeilfunktion
let quadratePfeil = zahlen.map((zahl) => zahl * zahl);

console.log(quadratePfeil); // Ausgabe: [1, 4, 9, 16, 25]

Anonyme Funktionen und Callbacks

Funktionen, die keinen Namen haben, nennt man anonyme Funktionen. Sie werden oft als Callbacks verwendet:

// Eine anonyme Funktion als Callback für einen Timer
setTimeout(function () {
  console.log("Diese Nachricht erscheint nach 2 Sekunden.");
}, 2000);

// Das gleiche mit Pfeilfunktion
setTimeout(() => {
  console.log("Diese Nachricht erscheint nach 2 Sekunden.");
}, 2000);

Funktionen als Argumente

In JavaScript können Funktionen als Argumente an andere Funktionen übergeben werden:

function machEtwas(callback) {
  console.log("Etwas wird getan...");
  callback();
}

function fertig() {
  console.log("Fertig!");
}

machEtwas(fertig);
// Ausgabe:
// Etwas wird getan...
// Fertig!

Dies ist ein grundlegendes Konzept für die asynchrone Programmierung in JavaScript.

Praktische Anwendungsbeispiele

Beispiel 1: Temperaturumrechnung

function celsiusToFahrenheit(celsius) {
  return (celsius * 9) / 5 + 32;
}

function fahrenheitToCelsius(fahrenheit) {
  return ((fahrenheit - 32) * 5) / 9;
}

console.log(celsiusToFahrenheit(25)); // Ausgabe: 77
console.log(fahrenheitToCelsius(77)); // Ausgabe: 25

Beispiel 2: Textformatierung

function formatiereName(vorname, nachname) {
  return (
    vorname.charAt(0).toUpperCase() +
    vorname.slice(1).toLowerCase() +
    " " +
    nachname.charAt(0).toUpperCase() +
    nachname.slice(1).toLowerCase()
  );
}

console.log(formatiereName("mAx", "mUSTERMANN")); // Ausgabe: Max Mustermann

Übung: Funktionen in der Praxis

Aufgabe: Funktionen erstellen und verwenden

Üben Sie das Erstellen und Verwenden von Funktionen mit diesen Aufgaben. Probieren Sie die Lösungen in der Browser-Konsole oder einem Code-Editor aus:

1. Grundlegende Funktion:

   • Erstellen Sie eine Funktion grüsseUser, die einen Namen als Parameter akzeptiert und eine Grussnachricht ausgibt
   • Rufen Sie die Funktion mit verschiedenen Namen auf

2. Funktion mit Rückgabewert:

   • Schreiben Sie eine Funktion berechneUmsatzsteuer, die einen Preis (ohne Steuer) akzeptiert und den Steuerbetrag (19%) zurückgibt
   • Erstellen Sie eine zweite Funktion berechneGesamtpreis, die den Nettopreis und die vorherige Funktion verwendet, um den Bruttopreis zu berechnen und zurückzugeben
   • Testen Sie die Funktionen mit verschiedenen Preisen

3. Pfeilfunktionen:

   • Wandeln Sie diese reguläre Funktion in eine Pfeilfunktion um:

   function istGerade(zahl) {
     return zahl % 2 === 0;
   }

   • Testen Sie beide Versionen mit verschiedenen Zahlen

4. Funktionen mit Standardparametern:

   • Erstellen Sie eine Funktion erstelleNutzer, die drei Parameter akzeptiert: name, alter und beruf
   • Der Parameter beruf soll den Standardwert “Student” haben
   • Die Funktion soll ein Objekt mit diesen Eigenschaften zurückgeben
   • Testen Sie die Funktion mit verschiedenen Argumenten

5. Callback-Funktion:

   • Schreiben Sie eine Funktion verarbeiteZahlen, die ein Array von Zahlen und eine Callback-Funktion akzeptiert
   • Die Callback-Funktion soll auf jede Zahl im Array angewendet werden
   • Die Ergebnisse sollen in einem neuen Array zurückgegeben werden
   • Testen Sie Ihre Funktion mit verschiedenen Callbacks (z.B. Verdoppeln, Quadrieren)

Zusammenfassung

• Funktionen sind wiederverwendbare Codeblöcke, die eine bestimmte Aufgabe ausführen
• Sie helfen uns, Code zu organisieren und Wiederholungen zu vermeiden
• Funktionen können Parameter akzeptieren und mit return Werte zurückgeben
• Es gibt verschiedene Arten, Funktionen zu definieren: Funktionserklärungen, Funktionsausdrücke und Pfeilfunktionen
• Variablen innerhalb einer Funktion haben einen lokalen Scope
• Funktionen können als Argumente an andere Funktionen übergeben werden (Callbacks)

Im nächsten Kapitel werden wir uns mit Arrays und Objekten beschäftigen, die grundlegende Datenstrukturen in JavaScript sind und häufig zusammen mit Funktionen verwendet werden.