Meta tags:
description=Lerne den JavaScript-Optional-Chaining-Operator (?.) zum sicheren Zugriff auf verschachtelte Objekteigenschaften, Methoden und dynamische Schlüssel.;

Headings (most frequently used words):

optional, chaining, den, für, lesen, die, zum, nicht, javascript, das, problem, fehlende, eigenschaften, wie, funktioniert, es, schützt, nur, wert, links, davon, kurzschlussauswertung, stoppt, gesamte, kette, drei, formen, von, ist, schreiben, übermäßig, einsetzen, kombination, mit, nullish, coalescing, browser, unterstützung, teste, dein, wissen, eigenschaftszugriff, methodenaufruf, dynamische, schlüssel,

Text of the page (most frequently used words):
und (62), user (44), ist (36), undefined (34), die (29), der (28), wenn (24), let (21), javascript (20), optional (20), console (20), api (20), #chaining (19), null (19), address (19), log (19), dom (19), city (16), lernen (15), nicht (15), name (15), das (14), den (14), einen (13), ein (13), eine (12), wert (11), mit (10), zum (10), methoden (10), operator (10), gibt (10), zurück (10), error (10), oder (10), lesen (9), kette (9), nur (9), auf (9), kopieren (9), für (8), html (8), web (8), was (8), fehler (8), einer (7), verwenden (7), wird (7), string (7), tools (6), von (6), obj (6), key (6), sie (6), existiert (6), sind (6), greet (6), the (6), w3docs (5), browser (5), nullish (5), davon (5), wie (5), eigenschaften (5), this (5), john (5), ausdruck (5), typeerror (5), anstatt (5), object (5), events (5), formatter (5), color (5), alle (4), json (4), generator (4), css (4), coalescing (4), drei (4), formen (4), kurzschlussauswertung (4), gesamte (4), links (4), problem (4), kannst (4), schlüssel (4), method (4), methode (4), zugriff (4), wirft (4), anonymous (4), user2 (4), run (4), editable (4), fehlt (4), verwende (4), eigenschaft (4), function (4), admin (4), möglicherweise (4), count (4), objekte (4), shadow (4), fetch (4), async (4), einführung (4), über (3), code (3), encoder (3), editor (3), quizze (3), übungen (3), php (3), kombination (3), stoppt (3), schützt (3), page (3), new (3), prüfen (3), linken (3), seite (3), vor (3), rest (3), ausgewertet (3), liest (3), sicher (3), übung (3), aber (3), diese (3), beispiel (3), syntax (3), delete (3), fine (3), reading (3), dynamische (3), werfen (3), einem (3), properties (3), aus (3), flag (3), document (3), data (3), event (3), and (3), promise (3), funktionen (3), objekt (3), operatoren (3), entwickler (2), italiano (2), português (2), español (2), français (2), русский (2), deutsch (2), english (2), sprache (2), beautifier (2), diff (2), password (2), python (2), java (2), git (2), bücher (2), snippets (2), teste (2), dein (2), wissen (2), unterstützung (2), übermäßig (2), einsetzen (2), schreiben (2), funktioniert (2), fehlende (2), primitiven (2), konstruktor (2), zuweisung (2), dynamischen (2), klammernotation (2), zurückgegeben (2), welche (2), aussagen (2), korrekt (2), weil (2), passiert (2), leerer (2), teil (2), ohne (2), transpiler (2), prüft (2), objektmethoden (2), datentypen (2), hier (2), dann (2), häufigsten (2), displayname (2), sara (2), glied (2), sich (2), variable (2), immer (2), muss (2), direkt (2), tatsächlich (2), dir (2), bugs (2), verbergen (2), eigenschaftsnamen (2), echte (2), kann (2), grund (2), dass (2), daher (2), erlaubt (2), dies (2), assignment (2), not (2), eines (2), sicheren (2), jedoch (2), nobody (2), alice (2), hello (2), guest (2), missing (2), möglichkeit (2), nach (2), short (2), never (2), regel (2), einfach (2), vorhanden (2), anfang (2), cannot (2), read (2), bei (2), werte (2), durch (2), daten (2), without (2), paris (2), dieses (2), man (2), city2 (2), with (2), verschachtelten (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), arrays (2), generatoren (2), advanced (2), await (2), fehlerbehandlung (2), promises (2), erweitern (2), handling (2), class (2), prototypes (2), interaktive (2), elemente (2), property (2), arrow (2), variablen (2), functions (2), objects (2), hash (2), 2026, rechte, vorbehalten, gemacht, datenschutzrichtlinie, kontakt, uns, unternehmen, probier, üben, kostenlose, tutorials, beispiele, seit, 2014, next, previous, yes, helpful, ruft, andernfalls, geworfen, es2020, spezifikation, allen, modernen, browsern, chrome, firefox, safari, edge, sowie, node, höher, unterstützt, sodass, aktuellen, umgebungen, mehr, werten, erfährst, unter, liefert, fallbackwert, anwendungen, praxis, perfekt, dem, kombinieren, lässt, standardwert, bereitzustellen, existieren, erforderliches, argument, greife, darauf, weise, fehlender, weiterhin, frühzeitig, hilft, finden, warnung, typo, hidden, alert, you, nmae, falsch, schreibst, stillschweigend, aufzuzeigen, präzises, werkzeug, dort, überall, sinnlos, wäre, etwas, zuzuweisen, linke, syntaxerror, does, work, deleting, skipped, werts, sogar, gespeichert, keine, funktion, überspringt, aufruf, return, aufzurufen, praktisch, bestimmte, implementiert, auch, methodenaufruf, but, surname, prop, eigenschaftszugriff, kein, eigenständiger, syntaxkonstrukt, vorkommt, jede, zuzugreifen, nützliche, garantie, nichts, fehlenden, bekommt, chance, laufen, nebeneffekte, verursachen, because, chain, circuits, increment, after, runs, incremented, des, ausdrucks, überhaupt, schließt, funktionsaufrufe, weitere, eigenschaftszugriffe, danach, folgen, also, setze, jedem, lösung, besteht, darin, jeder, stelle, setzen, legitimerweise, fehlen, exists, noch, normaler, findet, gesamten, statt, betrachte, wichtigste, diejenige, einsteiger, machen, unmittelbar, seiner, behandelt, als, fehlend, andere, falsy, läuft, normal, hindurch, false, hinweis, still, bis, gleiche, abfrage, jetzt, lesbar, auswertung, davor, verhalten, nennt, circuiting, even, longer, ternary, old, way, bevor, existierte, halfen, ketten, prüfungen, funktionieren, ausführlich, wiederholen, versuch, häufige, situation, formular, datenbank, stammen, denen, manche, felder, stell, hast, möchtest, stadt, kurze, sichere, tief, verbundener, glieder, dieser, hört, kapitel, erläutert, löst, annimmt, wenigen, regeln, korrekte, verwendung, kennen, lerne, verschachtelte, objekteigenschaften, intl, vibration, notifications, audio, webrtc, geolocation, websockets, service, midi, storage, validation, fullscreen, history, screen, orientation, push, webgl, battery, animations, apis, regexp, sticky, position, katastrophales, backtracking, lookahead, lookbehind, alternation, rückwärtsreferenzen, erfassungsgruppen, gierige, faule, sets, ranges, escaping, sonderzeichen, wortgrenze, mehrzeiliger, modus, 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, references, loop, macrotasks, selection, range, resizeobserver, intersectionobserver, mutation, observer, various, ressourcen, laden, onload, onerror, scripts, defer, domcontentloaded, load, beforeunload, unload, resource, loading, ereignis, submit, clipboard, change, input, cut, copy, 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, inhalt, getelement, queryselector, browserumgebung, spezifikationen, streams, filereader, blob, textdecoder, textencoder, arraybuffer, binäre, binary, files, fensterübergreifende, kommunikation, popups, window, frames, windows, polyfills, bigint, currying, eval, proxy, reflect, miscellaneous, imports, export, import, module, modules, iteratoren, generators, iteration, promisification, callbacks, try, catch, mixins, checking, instanceof, eingebaute, private, geschützte, statische, klassenvererbung, grundsyntax, classes, prototyp, __proto__, native, prototypale, vererbung, inheritance, widgets, performance, optimierung, debugging, barrierefreiheit, kompatibilität, manipulationsbibliotheken, fortgeschrittene, techniken, manipulationstechniken, traversieren, arbeiten, manipulieren, auswählen, knoten, getter, setter, deskriptoren, configuration, closures, vertieft, binding, debounce, throttle, dekoratoren, weiterleitung, call, apply, settimeout, setinterval, nfe, globales, alte, var, scope, parameter, spread, rekursion, stack, tojson, datum, uhrzeit, destructuring, keys, values, entries, weakmap, weakset, map, set, iterables, array, strings, math, zahlen, types, primitiv, konvertierung, symbol, typen, garbage, collection, basics, es6, funktionsausdrücke, schleifen, switch, bedingte, logische, vergleichsoperatoren, typkonvertierungen, 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):
javascript optional chaining w3docs w3docs bücher html lernen css lernen javascript lernen git lernen java lernen php lernen python lernen kurse quizze übungen snippets tools general tools html editor password generator html encoder code diff json beautifier alle 13 color tools color picker color converter color mixer color hex colors hsl alle 10 string tools string length calculator md5 hash generator sha256 hash generator string reverse url encoder alle 19 code formatters javascript formatter css formatter html formatter json formatter php formatter w3docs durchsuchen k de english en deutsch de русский ru français fr español es português pt italiano it anmelden javascript lernen javascript basic einführung javascript verwenden js kommentare js mit dom js use strict js variablen js datentypen js typkonvertierungen js interaktive funktionen js operatoren js vergleichsoperatoren js logische operatoren js nullish coalescing js bedingte operatoren js switch js schleifen js funktionen js funktionsausdrücke js arrow functions js es6 objects the basics js objects js objekte kopieren js objektmethoden this js garbage collection js symbol typen js objekt zu primitiv konvertierung js konstruktor operator new js optional chaining data types js methoden von primitiven js zahlen js math js strings js arrays js array methoden js iterables js map und set js weakmap und weakset js object keys values entries js destructuring assignment js datum und uhrzeit js json methoden tojson advanced functions js rekursion und stack js rest parameter und spread syntax js variablen scope js das alte var js globales objekt js function objekt nfe js die new function syntax js settimeout und setinterval js dekoratoren und weiterleitung call apply js debounce throttle js function binding js arrow funktionen vertieft js closures object properties configuration js property flags und deskriptoren js property getter und setter javascript html dom dom einführung die dom knoten dom elemente auswählen den dom manipulieren arbeiten mit styles im dom event handling im dom dom traversieren dom manipulationstechniken formulare im dom verwenden fortgeschrittene dom techniken dom manipulationsbibliotheken dom browser kompatibilität dom barrierefreiheit debugging und tools performance optimierung interaktive elemente und widgets prototypes inheritance js prototypale vererbung 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 optional chaining lerne den javascript optional chaining operator zum sicheren zugriff auf verschachtelte objekteigenschaften methoden und dynamische schlüssel der optional chaining operator ist eine kurze sichere möglichkeit einen wert tief in einer kette verbundener objekte zu lesen wenn eines der glieder in dieser kette möglicherweise nicht existiert anstatt einen fehler zu werfen hört er einfach auf und gibt undefined zurück dieses kapitel erläutert das problem das er löst die drei formen die er annimmt und die wenigen regeln die man für die korrekte verwendung kennen muss das problem fehlende eigenschaften lesen stell dir vor du hast ein user object und möchtest die stadt aus einem verschachtelten address object lesen wenn address fehlt wirft der zugriff auf eine eigenschaft davon einen fehler let user a user without an address console log user address city typeerror cannot read properties of undefined reading city kopieren der grund ist dass user address undefined ist und der versuch city aus undefined zu lesen nicht erlaubt ist das ist eine häufige situation wenn daten aus einer api einem formular oder einer datenbank stammen bei denen manche felder optional sind bevor existierte halfen sich entwickler mit ketten oder verschachtelten prüfungen diese funktionieren sind jedoch ausführlich und wiederholen die eigenschaftsnamen let user the old way with the operator let city user user address user address city console log city undefined or with an even longer ternary let city2 user user address user address city undefined undefined console log city2 undefined kopieren wie optional chaining funktioniert der optional chaining operator stoppt die auswertung wenn der wert davor null oder undefined ist und gibt undefined zurück anstatt einen fehler zu werfen dieses verhalten nennt man kurzschlussauswertung short circuiting hier ist die gleiche abfrage jetzt sicher und lesbar javascript editable run let user a user without an address console log user address city undefined no error let user2 address city paris console log user2 address city paris wenn user address undefined ist gibt der ausdruck user address city still undefined zurück wenn die daten vorhanden sind liest die kette bis zu city durch hinweis behandelt nur null und undefined als fehlend andere falsy werte wie 0 leerer string oder false sind echte werte daher läuft die kette normal durch sie hindurch es schützt nur den wert links davon dies ist die wichtigste regel und diejenige bei der einsteiger am häufigsten einen fehler machen das prüft nur den wert unmittelbar zu seiner linken nicht die gesamte kette betrachte a b c wenn a null oder undefined ist findet eine kurzschlussauswertung für den gesamten ausdruck statt und es wird undefined zurückgegeben wenn aber a existiert und b null oder undefined ist ist c immer noch ein normaler zugriff und er wirft einen fehler let a b null console log a b null fine a exists console log a b c typeerror cannot read properties of null reading c kopieren die lösung besteht darin an jeder stelle zu setzen wo ein wert legitimerweise fehlen kann let a b null console log a b c undefined no error kopieren die regel ist also einfach setze direkt nach jedem wert der möglicherweise nicht vorhanden ist nicht nur am anfang der kette kurzschlussauswertung stoppt die gesamte kette wenn der teil vor null oder undefined ist wird der rest des ausdrucks überhaupt nicht ausgewertet das schließt funktionsaufrufe und weitere eigenschaftszugriffe ein die danach folgen javascript editable run let user null let count 0 because user is null the chain short circuits the increment after never runs user count console log count 0 count was never incremented das ist eine nützliche garantie nichts nach einem fehlenden glied bekommt die chance zu laufen oder nebeneffekte zu verursachen die drei formen von optional chaining ist kein eigenständiger operator es ist ein syntaxkonstrukt das in drei formen vorkommt eine für jede möglichkeit auf einen wert zuzugreifen für den eigenschaftszugriff verwende obj prop um eine eigenschaft zu lesen wenn obj möglicherweise null oder undefined ist let user name john console log user name john console log user surname undefined key missing but no error kopieren für den methodenaufruf verwende obj method um eine methode nur dann aufzurufen wenn sie existiert das ist praktisch wenn ein object eine bestimmte methode möglicherweise implementiert oder auch nicht javascript editable run let admin greet return hello admin let guest no greet method console log admin greet hello admin console log guest greet undefined method missing no error wenn greet keine funktion ist weil sie fehlt überspringt den aufruf und gibt undefined zurück anstatt typeerror greet is not a function zu werfen für dynamische schlüssel verwende obj key wenn du eine eigenschaft mit der klammernotation liest zum beispiel einen dynamischen schlüssel der in einer variable gespeichert ist let user name alice let key name console log user key alice let nobody null console log nobody key undefined no error kopieren optional chaining ist zum lesen nicht zum schreiben du kannst zum lesen eines werts verwenden und sogar zum sicheren delete einer eigenschaft du kannst es jedoch nicht auf der linken seite einer zuweisung verwenden let user null reading is fine console log user name undefined deleting is fine delete is skipped if user is null delete user name no error assignment does not work this is a syntax error user name john syntaxerror kopieren der grund ist dass es sinnlos wäre etwas zuzuweisen wenn die linke seite fehlt daher erlaubt die sprache dies nicht optional chaining nicht übermäßig einsetzen ist ein präzises werkzeug verwende es nur dort wo der wert links davon tatsächlich optional ist es überall zu verwenden ist ein fehler da es echte bugs verbergen kann wenn du zum beispiel einen eigenschaftsnamen falsch schreibst gibt stillschweigend undefined zurück anstatt das problem aufzuzeigen let user name john console log user nmae undefined typo hidden no error to alert you kopieren warnung wenn eine variable wie user immer existieren muss zum beispiel ist sie ein erforderliches argument greife direkt mit user address city darauf zu nicht mit user address city auf diese weise wirft ein tatsächlich fehlender user weiterhin frühzeitig einen fehler was dir hilft bugs zu finden anstatt sie zu verbergen kombination mit nullish coalescing optional chaining gibt undefined zurück wenn ein glied fehlt was sich perfekt mit dem nullish coalescing operator kombinieren lässt um einen standardwert bereitzustellen javascript editable run let user no name let displayname user name anonymous console log displayname anonymous let user2 name sara console log user2 name anonymous sara hier wird user name zu undefined ausgewertet und liefert dann den fallbackwert anonymous diese kombination ist eine der häufigsten anwendungen von in der praxis browser unterstützung optional chaining ist teil der es2020 spezifikation es wird in allen modernen browsern chrome firefox safari und edge sowie in node js 14 und höher unterstützt sodass du es in aktuellen umgebungen ohne transpiler verwenden kannst mehr zu den werten die es prüft erfährst du unter javascript datentypen und objektmethoden und this teste dein wissen übung was gibt user address city zurück wenn user undefined ist was gibt user address city zurück wenn user undefined ist undefined es wird ein typeerror geworfen null ein leerer string prüfen übung im ausdruck a b c was passiert wenn a existiert b aber null ist im ausdruck a b c was passiert wenn a existiert b aber null ist der zugriff auf c wirft einen typeerror weil nur den wert links davon a schützt der gesamte ausdruck gibt sicher undefined zurück er gibt null zurück prüfen übung welche aussagen über den optional chaining operator sind korrekt welche aussagen über den optional chaining operator sind korrekt obj method ruft die methode nur auf wenn sie existiert andernfalls wird undefined zurückgegeben obj key liest sicher einen dynamischen schlüssel in klammernotation wenn der wert vor nullish ist wird der rest der kette nicht ausgewertet du kannst auf der linken seite einer zuweisung verwenden wie user name john prüfen was this page helpful yes no previous js konstruktor operator new next js methoden von primitiven on this page das problem fehlende eigenschaften lesen wie optional chaining funktioniert es schützt nur den wert links davon kurzschlussauswertung stoppt die gesamte kette die drei formen von optional chaining optional chaining ist zum lesen nicht zum schreiben optional chaining nicht übermäßig einsetzen kombination mit nullish coalescing browser unterstützung teste dein wissen w3docs kostenlose tutorials beispiele übungen snippets und quizze für das web seit 2014 bücher html lernen css lernen javascript lernen git lernen java lernen php lernen python lernen üben übungen quizze probier editor tools html editor password generator html encoder code diff json beautifier unternehmen über uns kontakt datenschutzrichtlinie sprache english deutsch русский français español português italiano 2026 w3docs alle rechte vorbehalten für entwickler gemacht