Meta tags:
description=Wie JavaScript-Objekte per Referenz gespeichert und kopiert werden, wie man mit Object.assign und Spread klont und wie man sicher mit structuredClone() tief…;

Headings (most frequently used words):

werden, per, objects, und, kopieren, kopiert, referenz, klonen, mit, structuredclone, der, javascript, objektreferenzen, primitive, wert, gespeichert, vergleich, const, können, dennoch, verändert, flaches, das, problem, verschachtelten, tiefes, alte, json, trick, ein, hinweis, zur, garbage, collection, praxisbeispiel, state, vor, mutation, zusammenfassung, teste, dein, wissen, einschränkungen, von,

Text of the page (most frequently used words):
und (82), #object (47), #objects (37), die (37), das (36), user (35), let (29), javascript (25), der (23), ist (23), ein (22), dom (22), json (20), kopieren (20), werden (20), console (20), clone (20), kopiert (19), eine (19), log (19), name (19), api (19), mit (18), structuredclone (18), auf (16), lernen (15), man (15), the (15), sizes (15), referenz (12), verschachtelte (12), oder (12), nicht (12), const (11), per (11), dasselbe (11), john (11), funktionen (10), spread (10), von (10), einen (10), eigenschaften (10), state (9), wert (9), original (9), string (9), width (9), methoden (9), für (8), über (8), html (8), web (8), was (8), sind (8), kopie (8), variablen (8), wenn (8), klonen (7), obj (7), assign (7), sich (7), den (7), variable (7), cart (7), run (7), wie (7), copy (7), pete (7), alle (6), tools (6), kann (6), inhalt (6), zwei (6), referenzen (6), aber (6), nur (6), selbst (6), ebene (6), array (6), editable (6), sie (6), arrays (6), age (6), w3docs (5), gespeichert (5), this (5), stringify (5), true (5), weil (5), wird (5), beide (5), auch (5), reference (5), daten (5), nested (5), syntax (5), admin (5), events (5), formatter (5), color (5), code (4), generator (4), css (4), garbage (4), collection (4), trick (4), verschachtelten (4), vergleich (4), primitive (4), parse (4), knoten (4), erstellen (4), teilen (4), gleich (4), fehler (4), undefined (4), dem (4), eingebaute (4), symbol (4), unabhängig (4), obersten (4), new (4), änderung (4), speicher (4), noch (4), andere (4), klon (4), verwenden (4), einer (4), dieser (4), message (4), phrase (4), objekte (4), shadow (4), fetch (4), async (4), einführung (4), encoder (3), editor (3), quizze (3), übungen (3), php (3), dein (3), mutation (3), alte (3), tiefes (3), flaches (3), können (3), dennoch (3), page (3), prüfen (3), nach (3), nie (3), flache (3), kopien (3), korrekt (3), übung (3), false (3), zirkuläre (3), typen (3), schlüssel (3), getter (3), sodass (3), vollständig (3), als (3), muss (3), ändern (3), direkt (3), shared (3), tief (3), zurück (3), apple (3), bread (3), milk (3), eigenschaft (3), verweist (3), gibt (3), set (3), map (3), strings (3), 182 (3), height (3), functions (3), des (3), diese (3), references (3), separate (3), klont (3), enthält (3), zeigen (3), beiden (3), unabhängige (3), flag (3), document (3), data (3), browser (3), event (3), and (3), promise (3), function (3), objekt (3), operatoren (3), italiano (2), português (2), español (2), français (2), русский (2), deutsch (2), english (2), beautifier (2), diff (2), password (2), python (2), java (2), git (2), bücher (2), snippets (2), teste (2), wissen (2), zusammenfassung (2), praxisbeispiel (2), vor (2), hinweis (2), zur (2), problem (2), verändert (2), objektmethoden (2), mutiert (2), welche (2), aussage (2), leeren (2), ihr (2), identisch (2), gegeben (2), ergibt (2), null (2), bevorzuge (2), gegenüber (2), verarbeitet (2), viele (2), keine (2), entfernt (2), bindung (2), vergleicht (2), zeiger (2), dass (2), wir (2), möchte (2), sichere (2), push (2), nextstate (2), untouched (2), werkzeug (2), solange (2), ansatz (2), stillschweigend (2), sondertypen (2), typeerror (2), wandelt (2), datum (2), parsen (2), date (2), einfach (2), funktioniert (2), einfache (2), hat (2), echte (2), unaffected (2), via (2), war (2), tiefen (2), eines (2), würde (2), eigenen (2), datacloneerror (2), setter (2), aus (2), ergebnis (2), werte (2), arraybuffer (2), regexp (2), self (2), ohne (2), mutate (2), verwende (2), genau (2), shallow (2), same (2), changed (2), too (2), dupliziert (2), dieses (2), techniken (2), merged (2), rest (2), parameter (2), empty (2), change (2), ziel (2), immer (2), assignment (2), are (2), not (2), sperrt (2), niemals (2), einem (2), anderen (2), zugewiesen (2), haben (2), both (2), dann (2), verweisen (2), goodbye (2), hello (2), vollständiger (2), bigint (2), primitiven (2), sicher (2), objektreferenzen (2), workers (2), file (2), suche (2), muster (2), quantoren (2), anker (2), flags (2), components (2), animationen (2), url (2), microtasks (2), formulare (2), benutzerdefinierte (2), ereignisse (2), styles (2), klassen (2), generatoren (2), advanced (2), await (2), fehlerbehandlung (2), promises (2), chaining (2), error (2), erweitern (2), handling (2), class (2), prototypes (2), interaktive (2), elemente (2), property (2), arrow (2), hash (2), 2026, rechte, vorbehalten, entwickler, gemacht, sprache, datenschutzrichtlinie, kontakt, uns, unternehmen, probier, üben, kostenlose, tutorials, beispiele, seit, 2014, next, previous, yes, helpful, erhält, dates, deklaration, verschiedene, getrennten, handelt, geworfen, verlustbehafteten, erstellt, prototypen, tiefe, fixiert, beachte, spreaden, flach, jede, explizit, andernfalls, gerät, wieder, falle, zuvor, beschrieben, wurde, verschachtelt, vollständige, benötigt, greife, sowohl, wrong, mutates, place, right, build, with, leaving, intact, akademisch, modernem, react, redux, ähnlichem, lautet, standardregel, mutieren, neue, angewendeten, alltägliche, dafür, sobald, beginnt, herumzukopieren, lohnt, bedenken, zurückgewinnt, bleibt, eintrag, letzte, verschwindet, unerreichbar, kommt, frage, manuell, frei, engine, erledigt, automatisch, erreichbar, verliert, verstümmelt, stürzt, bei, zirkulären, behandelt, all, info, werfen, gehen, verloren, iso, enthalten, verschwinden, verworfen, tücken, deep, bevor, weitgehend, verfügbar, beliebter, hack, serialisieren, anschließende, klasseninstanzen, ihren, richtige, schreiben, bibliothek, lodash, clonedeep, throws, because, can, cloned, prototypkette, versuch, wirft, gilt, leistungsfähig, universell, einschränkungen, hinaus, unterstützt, darunter, typisierte, ihre, originalgetreu, etwas, anderes, umgewandelt, cycle, preserved, correctly, itself, indirekt, abzustürzen, safe, alles, darin, rekursiv, vom, teilt, ändert, sollte, warnung, obwohl, eigenständiges, pfade, wirkt, art, versehentlichem, menschen, trifft, davon, ausgehen, jedoch, daher, erzeugen, vorbehalt, wichtig, führt, zum, nächsten, abschnitt, then, override, macht, kürzerer, form, siehe, props, into, fresh, aufzählbaren, quellen, target, sources, wirklich, neues, vorhandenen, hineinkopieren, moderne, kompakte, wege, dazu, erste, neuzuweisung, schlägt, fehl, brandneues, lassen, verbietet, einzufrieren, freeze, alice, constant, mutating, reassigning, häufige, überraschung, deklariertes, trotzdem, seine, geändert, bekommen, beabsichtigt, fragt, dieselben, inhalten, erfordert, häufig, vergleichen, einzeln, serialisierung, point, one, two, independent, different, even, though, aussieht, lediglich, vorgenommen, sichtbar, ding, beschreiben, copies, visible, through, funktionieren, anders, speicherort, keinen, einfluss, befinden, full, made, primitiver, zahl, boolean, unabhängiger, zuweisen, danach, völlig, wichtigsten, unterschiede, umgang, werten, missverständnis, regel, ursache, unzähliger, deshalb, erklärt, leitfaden, passiert, intl, vibration, notifications, audio, webrtc, geolocation, websockets, service, midi, storage, validation, fullscreen, history, screen, orientation, webgl, battery, animations, apis, sticky, position, katastrophales, backtracking, lookahead, lookbehind, alternation, rückwärtsreferenzen, erfassungsgruppen, gierige, faule, sets, ranges, escaping, sonderzeichen, wortgrenze, mehrzeiliger, modus, anfang, ende, unicode, klasse, zeichenklassen, regex, regular, expressions, styling, slots, komposition, template, element, custom, elements, animation, indexeddb, localstorage, sessionstorage, cookies, cookie, storing, wiederaufnehmbarer, dateiupload, server, sent, xmlhttprequest, ursprungsübergreifende, anfragen, abbruch, download, fortschritt, formdata, network, requests, canvas, loop, macrotasks, selection, range, resizeobserver, intersectionobserver, observer, various, ressourcen, laden, onload, onerror, scripts, defer, domcontentloaded, load, beforeunload, unload, resource, loading, ereignis, methode, submit, clipboard, input, cut, paste, fokussierung, focus, blur, formulareigenschaften, forms, controls, scrolling, tastatur, keydown, keyup, drag, drop, mausbewegungen, mausereignisse, grundlagen, auslösen, standard, browseraktionen, delegation, bubbling, capturing, introduction, koordinaten, fenstergrößen, scrollen, dokument, verändern, attribute, knoteneigenschaften, typ, tag, getelement, queryselector, browserumgebung, spezifikationen, streams, filereader, blob, textdecoder, textencoder, binäre, binary, files, fensterübergreifende, kommunikation, popups, window, frames, windows, polyfills, transpiler, currying, eval, proxy, reflect, miscellaneous, dynamische, imports, export, import, module, modules, iteratoren, generators, iteration, promisification, callbacks, try, catch, mixins, checking, instanceof, private, geschützte, statische, klassenvererbung, grundsyntax, classes, prototyp, __proto__, native, prototypale, vererbung, inheritance, widgets, performance, optimierung, debugging, barrierefreiheit, kompatibilität, manipulationsbibliotheken, fortgeschrittene, manipulationstechniken, traversieren, arbeiten, manipulieren, auswählen, deskriptoren, properties, configuration, closures, vertieft, binding, debounce, throttle, dekoratoren, weiterleitung, call, apply, settimeout, setinterval, nfe, globales, var, scope, rekursion, stack, tojson, uhrzeit, destructuring, keys, values, entries, weakmap, weakset, iterables, math, zahlen, types, optional, konstruktor, operator, primitiv, konvertierung, basics, es6, funktionsausdrücke, schleifen, switch, bedingte, nullish, coalescing, logische, vergleichsoperatoren, typkonvertierungen, datentypen, use, strict, kommentare, basic, anmelden, durchsuchen, formatters, reverse, sha256, md5, length, calculator, colors, hsl, hex, mixer, converter, picker, general, kurse,

Text of the page (random words):
rbung js native prototypes js prototyp methoden objekte ohne __proto__ classes js class grundsyntax js klassenvererbung statische eigenschaften und methoden private und geschützte eigenschaften in js js eingebaute klassen erweitern js class checking instanceof js mixins error handling js fehlerbehandlung try catch js benutzerdefinierte fehler error erweitern promises async await js einführung callbacks js promise js promise chaining js fehlerbehandlung mit promises promise api promisification microtasks async await generators advanced iteration generatoren async iteratoren und generatoren modules module export und import dynamische imports miscellaneous proxy und reflect eval currying bigint js polyfills transpiler frames and windows popups und window methoden fensterübergreifende kommunikation binary data files arraybuffer binäre arrays textdecoder und textencoder blob file und filereader js streams api document browserumgebung spezifikationen suche getelement queryselector knoteneigenschaften typ tag und inhalt attribute und eigenschaften das dokument verändern styles und klassen fenstergrößen und scrollen koordinaten introduction to events javascript einführung in browser ereignisse bubbling und capturing event delegation standard browseraktionen benutzerdefinierte ereignisse auslösen ui events mausereignisse grundlagen mausbewegungen drag and drop tastatur keydown und keyup scrolling forms controls formulareigenschaften und methoden fokussierung focus blur events change input cut copy paste js clipboard api formulare ereignis und methode submit document and resource loading page domcontentloaded load beforeunload unload scripts async defer ressourcen laden onload und onerror various mutation observer js intersectionobserver js resizeobserver selection und range event loop microtasks und macrotasks javascript references canvas network requests fetch api formdata fetch download fortschritt fetch abbruch fetch ursprungsübergreifende anfragen url objekte xmlhttprequest js server sent events wiederaufnehmbarer dateiupload storing data in the browser cookies document cookie localstorage sessionstorage indexeddb animation css animationen javascript animationen web components web components custom elements shadow dom template element shadow dom slots komposition shadow dom styling shadow dom und events regular expressions js regex muster und flags zeichenklassen unicode flag u und klasse p anker string anfang und ende mehrzeiliger modus der anker flag m wortgrenze b escaping sonderzeichen sets und ranges quantoren und n gierige und faule quantoren erfassungsgruppen rückwärtsreferenzen im muster n und k name javascript alternation or lookahead und lookbehind katastrophales backtracking sticky flag y suche an position methoden von regexp und string javascript apis web animations api file api battery api webgl push api screen orientation api history api console api fullscreen api validation api web storage api web midi api js web workers service workers websockets geolocation webrtc web audio api notifications api die vibration api js intl api javascript objektreferenzen und kopieren wie javascript objekte per referenz gespeichert und kopiert werden wie man mit object assign und spread klont und wie man sicher mit structuredclone tief kopiert einer der wichtigsten unterschiede in javascript ist der umgang mit primitiven werten im vergleich zu objects primitive werden als vollständiger wert kopiert aber objects werden per referenz gespeichert und kopiert das missverständnis dieser einen regel ist die ursache unzähliger fehler deshalb erklärt dieser leitfaden genau was im speicher passiert wie man objects vergleicht und klont und wie man sie sicher kopiert primitive werden per wert kopiert ein primitiver wert ein string eine zahl ein boolean null undefined bigint oder ein symbol wird als vollständiger unabhängiger wert kopiert das zuweisen einer variablen an eine andere dupliziert den wert sodass die beiden variablen danach völlig unabhängig sind let message hello let phrase message a full copy of the string is made phrase goodbye console log message hello unaffected console log phrase goodbye kopieren das ändern von phrase hat keinen einfluss auf message es befinden sich zwei unabhängige strings im speicher objects werden per referenz gespeichert und kopiert objects funktionieren anders eine variable die einem object zugewiesen ist enthält nicht das object selbst sie enthält eine referenz einen zeiger auf den speicherort des objects das kopieren dieser variable kopiert die referenz nicht das object beide variablen zeigen dann auf dasselbe object javascript editable run let user name john let admin user copies the reference not the object admin name pete changed via the admin reference console log user name pete visible through user too console log admin name pete es gibt immer noch nur ein object wir haben lediglich zwei variablen user und admin die beide auf dieses object verweisen eine änderung die über eine der beiden vorgenommen wird ist auch über die andere sichtbar da sie dasselbe ding beschreiben vergleich per referenz zwei object variablen sind mit oder nur dann gleich wenn sie auf dasselbe object verweisen zwei unabhängige objects sind niemals gleich selbst wenn ihr inhalt identisch aussieht javascript editable run let a let b a same reference console log a b true both point to one object let c let d two separate independent objects console log c d false different references even though both are empty das ist beabsichtigt für objects fragt sind das dasselbe object nicht haben diese objects dieselben daten der vergleich von inhalten erfordert einen anderen ansatz häufig das vergleichen von eigenschaften einzeln oder die serialisierung mit json const objects können dennoch verändert werden eine häufige überraschung ein mit const deklariertes object kann trotzdem seine eigenschaften geändert bekommen const sperrt die bindung die variable kann niemals einem anderen wert zugewiesen werden aber es sperrt nicht den inhalt des objects const user name john user name pete ok we are mutating the object not reassigning the variable console log user name pete user name alice typeerror assignment to constant variable kopieren die erste änderung funktioniert weil user immer noch auf dasselbe object verweist die neuzuweisung schlägt fehl weil sie user auf ein brandneues object zeigen lassen würde was const verbietet um auch den inhalt einzufrieren verwende object freeze flaches klonen was wenn man wirklich eine separate kopie eines objects möchte man muss ein neues object erstellen und die vorhandenen eigenschaften hineinkopieren zwei moderne kompakte wege dazu sind object assign und die spread syntax object assign target sources kopiert alle aufzählbaren eigenen eigenschaften der quellen in das ziel und gibt das ziel zurück javascript editable run let user name john age 30 let clone object assign user copy props into a fresh empty object clone name pete change the clone console log user name john original is untouched console log clone name pete die spread syntax obj macht dasselbe in noch kürzerer form siehe rest parameter und spread syntax let user name john age 30 let clone user a shallow copy let merged user age 31 copy then override age console log clone name john age 30 console log merged name john age 31 kopieren beide techniken erzeugen eine echte unabhängige kopie aber nur auf der obersten ebene dieser vorbehalt ist wichtig und führt zum nächsten abschnitt das problem mit verschachtelten objects eine flache kopie dupliziert die eigenschaften der obersten ebene wenn der wert einer eigenschaft jedoch selbst ein object oder array ist wird nur die referenz auf dieses verschachtelte object kopiert nicht das verschachtelte object selbst der klon und das original teilen sich daher dasselbe verschachtelte object javascript editable run let user name john sizes height 182 width 50 a nested object let clone user shallow copy console log clone sizes user sizes true same nested object clone sizes width 60 mutate the shared nested object console log user sizes width 60 the original changed too obwohl clone ein eigenständiges object auf der obersten ebene ist zeigen clone sizes und user sizes auf ein und dasselbe verschachtelte object eine änderung über einen der beiden pfade wirkt sich auf beide aus das ist genau die art von versehentlichem shared reference fehler der menschen trifft die davon ausgehen dass eine spread kopie vollständig unabhängig ist warnung spread obj und object assign kopieren nur eine ebene tief wenn dein object verschachtelte objects oder arrays enthält teilt die kopie diese verschachtelten werte mit dem original das ändern einer verschachtelten eigenschaft über eine ändert stillschweigend auch die andere für verschachtelte daten sollte man einen tiefen klon verwenden tiefes klonen mit structuredclone um ein object und alles darin verschachtelte zu kopieren verwende das eingebaute structuredclone es klont verschachtelte objects und arrays rekursiv sodass das ergebnis vollständig unabhängig vom original ist javascript editable run let user name john sizes height 182 width 50 let clone structuredclone user console log clone sizes user sizes false a separate nested object clone sizes width 60 mutate the clone s nested object console log user sizes width 50 original is safe structuredclone verarbeitet auch zirkuläre referenzen ein object das direkt oder indirekt auf sich selbst verweist ohne abzustürzen let user user self user user references itself let clone structuredclone user console log clone clone self true the cycle is preserved correctly kopieren über einfache objects und arrays hinaus unterstützt es viele eingebaute typen darunter date map set regexp arraybuffer und typisierte arrays ihre werte werden originalgetreu kopiert nicht in etwas anderes umgewandelt einschränkungen von structuredclone structuredclone ist leistungsfähig aber nicht universell es kann keine funktionen klonen der versuch wirft einen datacloneerror dasselbe gilt für dom knoten es kopiert nicht symbol schlüssel eigenschaften getter setter von eigenschaften oder die prototypkette des objects diese werden einfach aus dem ergebnis entfernt this throws datacloneerror because functions can t be cloned structuredclone run kopieren wenn man funktionen oder klasseninstanzen mit ihren methoden kopieren muss ist structuredclone nicht das richtige werkzeug man würde einen eigenen klon schreiben oder eine bibliothek wie lodash s clonedeep verwenden der alte json trick bevor structuredclone weitgehend verfügbar war war ein beliebter tiefen klon hack das serialisieren eines objects in einen json string und das anschließende parsen let user name john sizes height 182 width 50 let clone json parse json stringify user deep copy via json clone sizes width 60 console log user sizes width 50 original unaffected kopieren es funktioniert für einfache json sichere daten hat aber echte tücken funktionen und undefined werden verworfen schlüssel die sie enthalten verschwinden einfach date objects werden zu strings json stringify wandelt ein datum in einen iso string um und das parsen wandelt es nicht zurück map set und andere sondertypen gehen verloren oder werden zu leeren objects zirkuläre referenzen werfen einen typeerror i info bevorzuge für tiefes klonen structuredclone gegenüber dem json parse json stringify trick der json ansatz verliert stillschweigend funktionen undefined und sondertypen verstümmelt daten und stürzt bei zirkulären referenzen ab structuredclone behandelt all das korrekt ein hinweis zur garbage collection sobald man beginnt referenzen herumzukopieren lohnt es sich zu bedenken wie javascript speicher zurückgewinnt ein object bleibt im speicher solange es erreichbar ist solange eine variable eigenschaft oder ein array eintrag noch auf es verweist wenn die letzte referenz auf ein object verschwindet wird es unerreichbar und kommt für die garbage collection in frage man gibt objects nie manuell frei die engine erledigt das automatisch praxisbeispiel state vor der mutation kopieren das ist nicht akademisch in modernem ui code react redux und ähnlichem lautet die standardregel state nie direkt mutieren eine neue kopie mit der angewendeten änderung erstellen flaches kopieren mit spread ist das alltägliche werkzeug dafür javascript editable run const state user john cart apple bread wrong mutates the original array in place state cart push milk right build a new state with a new array leaving the original intact const nextstate state cart state cart milk console log state cart apple bread untouched console log nextstate cart apple bread milk man beachte dass wir sowohl das object der obersten ebene als auch das verschachtelte cart array spreaden da spread flach ist muss jede verschachtelte ebene die man ändern möchte explizit kopiert werden andernfalls gerät man direkt wieder in die shared reference falle die zuvor beschrieben wurde wenn die daten tief verschachtelt sind und man eine vollständige sichere kopie benötigt greife auf structuredclone zurück zusammenfassung primitive werden per wert kopiert kopien sind vollständig unabhängig objects werden per referenz gespeichert und kopiert das kopieren der variable kopiert den zeiger sodass beide variablen dasselbe object teilen vergleicht objects per referenz nur dasselbe object ist sich selbst gleich const fixiert die bindung nicht den inhalt const objects können dennoch mutiert werden object assign obj und obj erstellen flache kopien die verschachtelte objects teilen structuredclone obj erstellt eine tiefe kopie verarbeitet zirkuläre referenzen und viele eingebaute typen kann aber keine funktionen oder dom knoten klonen und entfernt symbol schlüssel getter und prototypen bevorzuge structuredclone gegenüber dem verlustbehafteten json parse json stringify trick teste dein wissen übung nach let a let b a b x 1 was ist a x nach let a let b a b x 1 was ist a x 1 undefined es wird ein fehler geworfen null prüfen übung gegeben let c n 1 let d n 1 was ergibt c d gegeben let c n 1 let d n 1 was ergibt c d false weil es sich um zwei verschiedene objects mit getrennten referenzen handelt true weil ihr inhalt identisch ist true weil alle leeren objects gleich sind prüfen übung welche aussage über das kopieren von objects in javascript ist korrekt welche aussage über das kopieren von objects in javascript ist korrekt spread obj und object assign erstellen flache kopien die verschachtelte objects teilen structuredclone kann funktionen und dom knoten kopieren ein const object kann nach der deklaration nie mutiert werden json parse json stringify obj erhält dates und funktionen prüfen was this page helpful yes no previous js objects next js objektmethoden this on this page primitive werden per wert kopiert objects werden per referenz gespeichert und kopiert vergleich per referenz const objects können dennoch verändert werden flaches klonen das problem mit verschachtelten objects tiefes klonen mit structuredc...