JavaScript - Funktion Parameter

Willkommen, angehende Programmierer! Heute tauchen wir in die aufregende Welt der JavaScript-Funktion parameter ein. Als dein freundlicher Nachbarschafts-Computerlehrer bin ich hier, um dich durch dieses wichtige Thema zu führen. Also hole dir dein Lieblingsgetränk, setze dich bequem hin und lassen wir gemeinsam dieses Coding-Abenteuer beginnen!

Funktion Parameter und Argumente

Lassen wir mit den Grundlagen beginnen. In JavaScript sind Funktionen wie kleine Maschinen, die spezifische Aufgaben ausführen. Manchmal brauchen diese Maschinen Eingaben, um ihre Arbeit ordnungsgemäß zu erledigen. Hier kommen die Parameter ins Spiel!

Was sind Parameter?

Parameter sind Variablen, die in der Funktionsdeklaration aufgelistet sind. Sie dienen als Platzhalter für die Werte, die an die Funktion übergeben werden, wenn sie aufgerufen wird.

Schauen wir uns ein einfaches Beispiel an:

function greet(name) {
console.log("Hello, " + name + "!");
}

greet("Alice");

In diesem Beispiel ist name der Parameter. Wenn wir die Funktion mit greet("Alice") aufrufen, ist "Alice" das Argument. Die Funktion verwendet dieses Argument, um die Begrüßung zu personalisieren.

Mehrere Parameter

Funktionen können mehrere Parameter haben. Lassen wir unsere Grußfunktion erweitern:

function greet(name, time) {
console.log("Good " + time + ", " + name + "!");
}

greet("Bob", "morning");

Hier haben wir zwei Parameter: name und time. Beim Aufruf der Funktion geben wir zwei Argumente in der gleichen Reihenfolge wie die Parameter definiert sind.

Standardparameter

Manchmal möchtest du einen Standardwert für einen Parameter setzen. Dies ist nützlich, wenn du möchtest, dass die Funktion auch funktioniert, wenn kein Argument übergeben wird:

function greet(name = "friend") {
console.log("Hello, " + name + "!");
}

greet(); // Ausgabe: Hello, friend!
greet("Charlie"); // Ausgabe: Hello, Charlie!

In diesem Fall wird name standardmäßig auf "friend" gesetzt, wenn kein Argument übergeben wird.

Argument-Objekt

Nun kommen wir zu etwas Fortgeschrittenerem: das arguments-Objekt. Dies ist eine lokale Variable, die in allen Funktionen verfügbar ist. Es enthält ein array-ähnliches Objekt der an die Funktion übergebenen Argumente.

function sumAll() {
let total = 0;
for (let i = 0; i < arguments.length; i++) {
total += arguments[i];
}
return total;
}

console.log(sumAll(1, 2, 3, 4)); // Ausgabe: 10

Diese Funktion kann eine beliebige Anzahl von Argumenten akzeptieren und sie alle zusammenaddieren. Pretty neat, right?

Übergabe von Argumenten per Wert

In JavaScript werden, wenn primitive Datentypen (wie Zahlen, Strings oder Booleans) an eine Funktion übergeben werden, diese per Wert übergeben. Das bedeutet, dass die Funktion eine Kopie des Wertes erhält, nicht die ursprüngliche Variable.

function changeValue(x) {
x = 5;
console.log("Inside function: " + x);
}

let num = 10;
console.log("Before function call: " + num);
changeValue(num);
console.log("After function call: " + num);

Ausgabe:

Before function call: 10
Inside function: 5
After function call: 10

Wie du siehst, ändert die Änderung von x innerhalb der Funktion die ursprüngliche Variable num nicht.

Übergabe von Argumenten per Referenz

Objekte hingegen werden per Referenz übergeben. Das bedeutet, dass wenn du das Objekt innerhalb der Funktion änderst, das ursprüngliche Objekt auch geändert wird.

function changeName(person) {
person.name = "Jane";
console.log("Inside function: " + person.name);
}

let myPerson = {name: "John"};
console.log("Before function call: " + myPerson.name);
changeName(myPerson);
console.log("After function call: " + myPerson.name);

Ausgabe:

Before function call: John
Inside function: Jane
After function call: Jane

Hier ändert die Änderung der name-Eigenschaft innerhalb der Funktion das ursprüngliche myPerson-Objekt.

Ein Wort der Vorsicht

Dieses Verhalten kann sowohl mächtig als auch gefährlich sein. Es ermöglicht dir, komplexe Datenstrukturen effizient zu ändern, aber es kann auch zu unerwünschten Nebeneffekten führen, wenn du nicht vorsichtig bist. Sei immer darauf bedacht, ob du mit Primitiven oder Objekten arbeitest!

Alles zusammenfügen

Lassen wir mit einem unterhaltsamen Beispiel abschließen, das mehrere Konzepte, die wir gelernt haben, kombiniert:

function createSuperHero(name, power = "flying", weaknesses) {
let hero = {
name: name,
power: power,
weaknesses: []
};

for (let i = 2; i < arguments.length; i++) {
hero.weaknesses.push(arguments[i]);
}

return hero;
}

let myHero = createSuperHero("Captain Awesome", "super strength", "kryptonite", "public speaking");
console.log(myHero);

Diese Funktion erstellt ein Superhelden-Objekt. Sie verwendet Standardparameter, das arguments-Objekt und arbeitet sowohl mit Primitiven als auch mit Objekten. Probiere es aus und sieh, was du erhältst!

Schlussfolgerung

Glückwunsch! Du hast deine JavaScript-Fähigkeiten durch das Beherrschen von Funktion parameter gesteigert. Denke daran, Übung macht den Meister, also habe keine Angst, diese Konzepte in deinem eigenen Code auszuprobieren.

Hier ist eine schnelle Referenztabelle der Methoden, die wir behandelt haben:

Methode	Beschreibung
Basic Parameters	function name(param1, param2) {...}
Default Parameters	function name(param = defaultValue) {...}
Arguments Object	arguments[i] um Argumente zuzugreifen
Pass by Value	Gilt für Primitiven (Zahlen, Strings, Booleans)
Pass by Reference	Gilt für Objekte und Arrays

Frohes Coden und möge deine Funktionen immer bugfrei laufen!

Credits: Image by storyset