JavaScript Parameter in Funktionen erklären?

Die Funktionsparameter sind Variablen, die meist erst Werte entgegennehmen, wenn die Funktion aufgerufen wird. Der Wert wird nicht in der Funktionsdeklaration festgelegt, sondern erst beim Funktionsaufruf.

// Deklaration
const add = (n) => { return n + 5; };

// Aufruf
add(10);

Es kann ebenso Anwendungsfälle geben bzw. vorkommen, das man einem oder mehreren Funktionsparameter bereits einen Wert mitgeben möchte. Zum Beispiel bei der Berechnung der Mehrwertsteuer von 7 oder 19 Prozent.

const calcVat = (amount, vatRate = 0.19) => {
  const vatAmount = amount * vatRate;
  const totAmount = amount + vatAmount;

  return{
    netto:  amount,
    mwst:   vatAmount,
    brutto: totAmount
  };
};

// Amount of 100 Euros, default VAT rate of 19%
calcVat(100);

// Amount of 100 Euros, different VAT rate of 7%
calcVat(100, 0.07);

Deine gezeigte Funktion könnte dann auch so aussehen.

const add = (num1, num2 = 5) => {
  return num1 + num2;
};

add(10); // result = 15
add(2, 8); // result = 10

Falls du dich bzgl. der Schreibweise wunderst, handelt es sich dabei um eine Arrow-Function. Du kannst es auch als „einfache” Funktion deklarieren.

• MDN Web Docs → JavaScript → Arrow function expressions

LG medmonk

Ich denke, zunächst solltest du dir nochmal klar machen, was der Sinn hinter einer Funktion ist.

Funktionen dienen dazu, mehrere Schritte zusammenzufassen, sodass man sie an verschiedenen Stellen wiederverwenden kann. In deinem Beispiel beinhaltet die Funktion nur einen Schritt, daher ist sie realistisch gesehen etwas sinnlos.

In der Realität können Funktionen relativ lang sein, da macht es dann natürlich deutlich mehr Sinn, einmal die Funktion zu schreiben, sodass man sie überall dort, wo man sie im Programm braucht, aufrufen kann, statt z.B. an 5 verschiedenen Stellen im Programm die gleichen 20 Zeilen Code zu haben.

Die Funktion im Beispiel funktioniert so, dass sie einen Wert entgegennimmt, und einen anderen Wert zurückgibt. Für dieses Beispiel müssen wir uns jetzt einfach vorstellen, dass es total kompliziert und aufwendig wäre, eine Zahl um 5 zu erhöhen. Statt überall im Programm, wo wir eine Zahl um 5 erhöhen wollen, diese "komplizierte" Berechnung durchzuführen, haben wir eben diese Funktion geschrieben, die eine beliebige Zahl um 5 erhöhen kann. Und damit das eben mit beliebigen Zahlen funktioniert, hat der Parameter erstmal keinen Wert und heißt eben nur n.

Nun können wir die Funktion an anderen Stellen im Programm aufrufen, indem wir einfach add( ... ) aufrufen, und die Zahl in die Klammern schreiben, die wir um 5 erhöhen wollen.

Man könnte also entweder direkt add(7) schreiben, und man bekommt 12 als return-wert. Oder man schreibt add(25), und man bekommt 30.

Natürlich kann man auch Eingaben eines Benutzers in die Funktion übergeben.

Verkürztes Beispiel (müsste in einen eigenen Eventhandler und somit in eine eigene Funktion eingebaut werden)

let input = event.target.value;
console.log(add(input));

So würde, egal welchen Wert der Nutzer eingibt, dieser um 5 erhöht in der Konsole ausgegeben werden.

Wie gesagt ist "um 5 erhöhen" keine sehr nützliche Funktion, aber wenn man sich eben tatsächlich vorstellt, dass die Funktion eine sehr komplexe Berechnung übernimmt, kann man sich besser vorstellen, warum man diese Berechnung nicht mehrfach ausformulieren möchte.

Vielleicht ist es auch Geschmackssache oder abhängig von eventuellen Frameworks, aber du kannst auch einfach:

function add (n) {
  return n + 5 
}

schreiben. Man kann Funktionen in Variablen packen, aber sofern es dafür keinen unmittelbaren Grund gibt, finde ich persönlich die klassische, "globale" Schreibweise eleganter.

Hi MarlonStrich,

durch den Funktionsaufruf kannst du Parameter in JavaScript übergeben. Woher die Parameter generiert werden ist egal. Du kannst die Parameter in einer Variable speichern und/oder aus einem input-Element holen.

Hier einige Beispiele:

const add = function (n) {
    return n + 5;
}
// Funktionsaufruf und Ausgabe
let ausgabe = add(5);
console.log(ausgabe);


// oder


let meinInput = document.getElementById('meineInputID');
meinInput.addEventListener('input', function() {
    let meinWert = meinInput.value;
    let ausgabe = add(meinWert);
    console.log(ausgabe);
});

Ich hoffe die Beispiele helfen dir die Antwort zu verstehen

Den Parameter gibts du in die Funktion, sobald du sie aufrufst. Das heißt:

add(5)

Returned value: 10 (weil 5+n und n = 5, also 5+5).

Bei dir würde ich aber statt der Variable eine globale Funktion erstellen, die Variable ist überflüssig bei dem, was du erzielen möchtest. Schreibe es also so:

function add(n) {
return n + 5
}
add(3)

Returned value: 8

Praxisbeispiel:

function randomInt(min, max) {

min = Math.ceil(min);

  max = Math.floor(max);

  return Math.floor(Math.random() * (max - min + 1)) + min;

}

damit lässt sich eine random Integer Zahl genieren, ohne sen ganzen Math.random gedöns. Das würde dann also so aussehen:

random(3, 5)

Possible returned numbers: 3, 4, 5

Du kannst es dann einfach in anderen JS-Funktionen benutzen.

Z.B.

console.log(add(10));

schreibt bei dem Beispiel 15 in die Browserkonsole.