{"id":5772,"date":"2024-04-02T09:14:34","date_gmt":"2024-04-02T07:14:34","guid":{"rendered":"https:\/\/www.clickstorm.de\/blog\/?p=5772"},"modified":"2024-04-02T09:14:34","modified_gmt":"2024-04-02T07:14:34","slug":"call-by-reference-value-javascript","status":"publish","type":"post","link":"https:\/\/www.clickstorm.de\/blog\/call-by-reference-value-javascript\/","title":{"rendered":"Call-by-Value vs. Call-by-Reference in JavaScript"},"content":{"rendered":"

JavaScript (JS), als eine vielseitige und dynamische Sprache, stellt zwei Kernkonzepte f\u00fcr die Daten\u00fcbergabe in Funktionen bereit: Call-by-Value<\/em> und Call-by-Reference<\/em>. Diese Konzepte sind entscheidend f\u00fcr das Verst\u00e4ndnis, wie die Sprache mit Daten umgeht, und sind sowohl f\u00fcr Programmieranf\u00e4nger als auch f\u00fcr fortgeschrittene Entwickler von gro\u00dfer Bedeutung. In diesem Artikel beleuchten wir diese Konzepte mit pr\u00e4zisen Erkl\u00e4rungen und Beispielen, um ein klares Verst\u00e4ndnis ihrer Funktionsweise und Anwendung zu vermitteln.<\/p>\n

Backen eines Marmorkuchens<\/h2>\n

Stell dir vor, du besitzt das Rezept f\u00fcr einen leckeren Marmorkuchen, welches du gerne mit einem Freund teilen m\u00f6chtest.<\/p>\n

Fotokopie des Rezepts<\/h3>\n

Call-by-Value<\/em> entspricht dem Vorgang, eine Fotokopie Ihres Rezepts anzufertigen und diese Ihrem Freund zu geben. Ihr Freund hat jetzt eine Kopie des Rezepts. Wenn er \u00c4nderungen daran vornimmt, etwa Zutaten hinzuf\u00fcgt oder wegl\u00e4sst, hat das keinen Einfluss auf Ihr originales Rezept. Du kannst dir also sicher sein, dass du das n\u00e4chste Mal, wenn du einen Kuchen backst, weiterhin das unver\u00e4nderte Originalrezept verwendest und die \u00c4nderungen deines Freundes bleiben auf seine Kopie beschr\u00e4nkt.<\/p>\n

Das Originalrezept verleihen<\/h3>\n

Angenommen du schickst deinem Freund nun den Link zu deiner Google Docs Rezeptesammlung – nat\u00fcrlich mit Bearbeitungsrechten. Dies w\u00fcrde dem Prinzip von Call-by-Reference<\/em> entsprechen, da jede \u00c4nderung, die dein Freund am Rezept vornimmt, auch deine originale Datei ver\u00e4ndert. Wenn du diese nun zu einem sp\u00e4teren Zeitpunkt \u00f6ffnen und feststellen solltest, dass aus der Prise Salz ein Essl\u00f6ffel wurde, dann w\u00e4re es wohl am kl\u00fcgsten (und am\u00fcsantesten), deinen Freund zuerst den Kuchen kosten zu lassen.<\/p>\n

Das h\u00f6rt sich doch gar nicht so schwer an, oder? Sehen wir uns nun diesen Vorgang einmal genauer an.<\/p>\n

Daten\u00fcbergabe aus technischer Sicht<\/h2>\n

\"Pass<\/p>\n

Wie funktioniert Call-by-Value<\/em>?<\/h3>\n

Bei Call-by-Value<\/em> wird der Wert einer Variablen als Kopie in die Funktion \u00fcbertragen. Jegliche \u00c4nderungen, die innerhalb der Funktion an diesem Wert vorgenommen werden, bleiben ohne Auswirkungen auf die urspr\u00fcngliche Variable au\u00dferhalb der Funktion. Hierf\u00fcr wird ein separater Speicherplatz zugewiesen, was bedeutet, dass die Funktion in einem eigenen, neuen Speicherbereich operiert. Ein \u00e4hnliches Konzept sehen wir auch im Artikel \u00fcber ECMAScript 2023\/24<\/a> unter dem Abschnitt „Change Array by Copy“. Dieses kurze Codebeispiel wird im Folgenden die Funktionsweise der Variablen\u00fcbergabe verdeutlichen.
\nCodebeispiel:<\/p>\n

function modifyValue(val) {\r\n  val = \u201cNeuer Wert\u201d;\r\n  console.log(\u201cIn der Funktion: \u201c, val);\r\n}\r\nlet myVal = \u201cAlter Wert\u201d;\r\nmodifyValue(myVal);\r\nconsole.log(\"Au\u00dferhalb der Funktion: \", myVal);<\/pre>\n
Ergebnis:
\nIn der Funktion: Neuer Wert<\/strong>
\nAu\u00dferhalb der Funktion: Alter Wert<\/strong><\/p>\n
Wie funktioniert Call-by-Reference<\/em>?<\/h3>\n
Bei Call-by-Reference<\/em> erfolgt die \u00dcbergabe einer Variablen an eine Funktion durch ihre Referenz, also ihre Speicheradresse. \u00c4nderungen, die innerhalb der Funktion an dieser Referenz vorgenommen werden, reflektieren sich unmittelbar in der Originalvariable. Anstatt eine separate Kopie des Wertes zu bearbeiten, werden hierbei alle \u00c4nderungen auch das Ursprungsobjekt betreffen.
\nTechnisch gesehen verwendet JavaScript immer Call-by-Value<\/em>, aber im Falle von Objekten (einschlie\u00dflich Arrays und Funktionen) wird der Wert der Referenz \u00fcbergeben. Das bedeutet, dass die Funktion mit der Adresse (Referenz) des Objekts arbeitet, aber die Referenz selbst ist eine Kopie.
\nCodebeispiel:<\/p>\n
function modifyObject(obj) {\r\n  obj.key = \u201cNeuer Wert\u201d;\r\n  console.log(\"In der Funktion: \", obj);\r\n}\r\nlet myObj = { key: \u201cAlter Wert\u201d };\r\nmodifyObject(myObj);\r\nconsole.log(\"Au\u00dferhalb der Funktion: \", myObj);<\/pre>\n
Ergebnis:
\nIn der Funktion: { key: „Neuer Wert<\/strong>“ }
\nAu\u00dferhalb der Funktion: { key: „Neuer Wert<\/strong>“ }<\/p>\n
Das Tassenproblem<\/h3>\n
Eines der am h\u00e4ufigsten verwendeten Analogien ist das F\u00fcllen einer Tasse. Angenommen, du hast eine leere Tasse. Nun m\u00f6chtest du diese mit der Funktion fillCup() mit einem leckeren Tee oder Kaffee bef\u00fcllen. Bei Aufruf der Funktion sieht die Tasse wie folgt aus:<\/p>\n
\"Beispiel-Call-By-Value<\/p>\n
Wenn die Referenz in der Funktion \u00fcbergeben wird, ver\u00e4ndert sich nicht nur die Variable innerhalb der Funktion, sondern die urspr\u00fcngliche Variable wird ebenfalls ver\u00e4ndert. Bei einem Call by Value Aufruf wird hingegen nur die Variable innerhalb der Funktion ver\u00e4ndert, die urspr\u00fcngliche beh\u00e4lt ihren Wert.<\/p>\n
H\u00e4ufige Missverst\u00e4ndnisse<\/h3>\n
In der JavaScript-Entwicklung existieren h\u00e4ufig Missverst\u00e4ndnisse bez\u00fcglich der Handhabung von primitiven Datentypen und Objekten sowie dem Unterschied zwischen Mutation und Reassignment. Deshalb schauen wir uns dies nun ebenfalls kurz an:<\/p>\n
Primitive Datentypen vs. Objekte<\/h4>\n
Call-by-Value<\/em> vs. Call-by-Reference<\/em>:<\/strong><\/p>\n