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?
Abschnitt betitelt „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
Abschnitt betitelt „Funktionen definieren“In JavaScript gibt es mehrere Möglichkeiten, Funktionen zu definieren:
1. Funktionserklärung (Function Declaration)
Abschnitt betitelt „1. Funktionserklärung (Function Declaration)“function begrüssung() { console.log("Hallo, willkommen zur JavaScript-Welt!");}2. Funktionsausdruck (Function Expression)
Abschnitt betitelt „2. Funktionsausdruck (Function Expression)“const begrüssung = function () { console.log("Hallo, willkommen zur JavaScript-Welt!");};3. Pfeilfunktion (Arrow Function) - moderne Schreibweise
Abschnitt betitelt „3. Pfeilfunktion (Arrow Function) - moderne Schreibweise“const begrüssung = () => { console.log("Hallo, willkommen zur JavaScript-Welt!");};Funktionen aufrufen
Abschnitt betitelt „Funktionen aufrufen“Nach der Definition können Sie eine Funktion einfach aufrufen, indem Sie ihren Namen gefolgt von Klammern verwenden:
// Funktion definierenfunction begrüssung() { console.log("Hallo, willkommen zur JavaScript-Welt!");}
// Funktion aufrufenbegrüssung(); // Ausgabe: Hallo, willkommen zur JavaScript-Welt!Parameter und Argumente
Abschnitt betitelt „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
Abschnitt betitelt „Mehrere Parameter“Funktionen können auch mehrere Parameter haben:
function addiere(a, b) { console.log(a + b);}
addiere(5, 3); // Ausgabe: 8Standardwerte für Parameter
Abschnitt betitelt „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
Abschnitt betitelt „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: 8console.log(addiere(10, 20)); // Ausgabe: 30Eine 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: trueconsole.log(istVolljährig(16)); // Ausgabe: falseFunktionsscope und Variablen
Abschnitt betitelt „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 istFunktionen 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)
Abschnitt betitelt „Pfeilfunktionen (Arrow Functions)“Pfeilfunktionen bieten eine kürzere Syntax für Funktionsausdrücke und haben einige besondere Eigenschaften:
// Traditionelle Funktionconst verdopple = function (x) { return x * 2;};
// Gleichwertige Pfeilfunktionconst verdopplePfeil = (x) => { return x * 2;};
// Noch kürzer, wenn nur eine Anweisung vorhanden ist:const verdoppleKurz = (x) => x * 2;
console.log(verdoppleKurz(5)); // Ausgabe: 10Wann Pfeilfunktionen besonders nützlich sind
Abschnitt betitelt „Wann Pfeilfunktionen besonders nützlich sind“Pfeilfunktionen sind besonders nützlich für kurze Callback-Funktionen:
// Mit traditioneller Funktionlet zahlen = [1, 2, 3, 4, 5];let quadrate = zahlen.map(function (zahl) { return zahl * zahl;});
// Mit Pfeilfunktionlet quadratePfeil = zahlen.map((zahl) => zahl * zahl);
console.log(quadratePfeil); // Ausgabe: [1, 4, 9, 16, 25]Anonyme Funktionen und Callbacks
Abschnitt betitelt „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 TimersetTimeout(function () { console.log("Diese Nachricht erscheint nach 2 Sekunden.");}, 2000);
// Das gleiche mit PfeilfunktionsetTimeout(() => { console.log("Diese Nachricht erscheint nach 2 Sekunden.");}, 2000);Funktionen als Argumente
Abschnitt betitelt „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
Abschnitt betitelt „Praktische Anwendungsbeispiele“Beispiel 1: Temperaturumrechnung
Abschnitt betitelt „Beispiel 1: Temperaturumrechnung“function celsiusToFahrenheit(celsius) { return (celsius * 9) / 5 + 32;}
function fahrenheitToCelsius(fahrenheit) { return ((fahrenheit - 32) * 5) / 9;}
console.log(celsiusToFahrenheit(25)); // Ausgabe: 77console.log(fahrenheitToCelsius(77)); // Ausgabe: 25Beispiel 2: Textformatierung
Abschnitt betitelt „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
Abschnitt betitelt „Übung: Funktionen in der Praxis“Zusammenfassung
Abschnitt betitelt „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
returnWerte 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.