Meta tags:
description=Der Variablen-Scope in JavaScript bestimmt, wo Variablen sichtbar und nutzbar sind. Dieser Leitfaden erklärt globalen, Funktions- und Block-Scope.;

Headings (most frequently used words):

scope, variablen, die, und, javascript, drei, arten, von, wie, verschachtelte, funktionen, auf, äußere, zugreifen, var, vs, let, const, hoisting, temporal, dead, zone, best, practices, fazit, übungen, globaler, funktions, block,

Text of the page (most frequently used words):
und (72), scope (38), die (35), #javascript (28), console (21), log (20), api (19), dom (19), var (18), variablen (18), const (17), block (16), lernen (15), let (14), der (13), von (12), ist (12), eine (12), funktion (12), funktionen (10), variable (10), code (9), das (9), auf (9), oder (9), sie (9), function (9), w3docs (8), html (8), web (8), wie (8), err (8), message (8), wird (8), deklariert (8), methoden (8), sind (7), sichtbar (7), innerhalb (7), the (7), run (7), editable (7), mit (7), tools (6), den (6), kann (6), not (6), try (6), catch (6), outer (6), inner (6), übungen (5), hoisting (5), arten (5), scopes (5), global (5), closures (5), wenn (5), sich (5), blocks (5), nicht (5), eines (5), string (5), events (5), formatter (5), color (5), alle (4), json (4), generator (4), css (4), verschachtelte (4), this (4), funktions (4), nach (4), außen (4), set (4), einem (4), einer (4), dem (4), for (4), out (4), defined (4), dies (4), nur (4), from (4), globalen (4), status (4), makemessage (4), shadow (4), fetch (4), async (4), einführung (4), für (3), encoder (3), editor (3), quizze (3), php (3), temporal (3), dead (3), zone (3), äußere (3), zugreifen (3), drei (3), page (3), alte (3), syntax (3), was (3), globaler (3), jede (3), umgebung (3), kette (3), gibt (3), ihre (3), auch (3), man (3), weniger (3), globale (3), verändern (3), hoistedvar (3), undefined (3), notyet (3), werden (3), ausgeführt (3), lesen (3), einen (3), withvar (3), push (3), map (3), withlet (3), new (3), usinglet (3), here (3), suche (3), innervar (3), jeder (3), verwenden (3), appname (3), dieser (3), flag (3), document (3), data (3), browser (3), objekte (3), event (3), and (3), eigenschaften (3), promise (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), fazit (2), best (2), practices (2), rest (2), parameter (2), spread (2), private (2), lexikalische (2), ermöglicht (2), statt (2), dir (2), als (2), existiert (2), macht (2), deklariere (2), vor (2), des (2), anstatt (2), oberster (2), ebene (2), halte (2), unbeabsichtigte (2), schleife (2), falle (2), value (2), later (2), tdz (2), fehler (2), gehoisted (2), aber (2), bis (2), callbacks (2), erhält (2), iteration (2), compare (2), usingvar (2), leaks (2), nachdem (2), geht (2), sehen (2), innere (2), level (2), outervar (2), can (2), all (2), namen (2), ohne (2), umschließenden (2), diese (2), checkaccess (2), age (2), adult (2), only (2), visible (2), inside (2), teil (2), programms (2), greet (2), welcome (2), bestimmt (2), name (2), leitfaden (2), erklärt (2), workers (2), file (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), chaining (2), error (2), erweitern (2), handling (2), class (2), prototypes (2), interaktive (2), elemente (2), property (2), object (2), arrow (2), functions (2), objects (2), hash (2), 2026, rechte, vorbehalten, entwickler, gemacht, sprache, datenschutzrichtlinie, kontakt, über, uns, unternehmen, probier, üben, kostenlose, tutorials, beispiele, seit, 2014, next, previous, yes, helpful, prüfen, protected, package, public, lokaler, übung, kontrolliert, bilden, innerem, durch, greifen, grundlage, wahl, zuverlässigen, vermeidet, überraschungen, studiere, nächstes, erfassen, zurückgegebene, funktionieren, funktionsausdrücken, schwerer, lesbar, darauf, verlässt, verwendung, bedeuten, namenskonflikte, werte, irgendein, still, minimiere, benötigt, engstmöglichen, besser, vorhersehbar, verhindert, lecks, oben, gezeigte, callback, bevorzuge, dann, vermeide, declaration, hoisted, yet, cannot, access, before, initialization, deklarationen, verarbeitet, bevor, deklaration, initialisiert, sodass, zuweisung, liefert, ebenfalls, befinden, verwendbar, zeile, tieferen, einblick, besonderheiten, einschließlich, fehlenden, siehe, one, shared, each, time, klassische, erstellt, einzige, gemeinsame, eigene, bindung, true, stays, accessible, scoping, regeln, unterscheiden, deklarierst, ignoriert, blöcke, während, häufigsten, fehlerquellen, älterem, bezogen, funktionsbezogen, niemals, innen, genau, mechanismus, möglich, behält, zugriff, äußeren, zurückgekehrt, outermost, reach, three, nachschlägt, beginnt, aktuellen, findet, erreicht, finden, referenceerror, verschachtelst, aus, jedem, umgibt, ihrem, eigenen, zugänglicher, bezeichnet, scoped, nächstgelegenen, begrenzt, gesamte, verschwindet, sobald, endet, lässt, beispiel, weiterlaufen, damit, fehlermeldung, kannst, dass, skript, einfach, abbricht, solange, praktisch, riskant, zwei, unabhängige, codeabschnitte, können, denselben, gegenseitig, überschreiben, namespace, klein, read, skripts, schreiben, leeren, dieses, funktioniert, außerhalb, überall, sichtbarkeit, danach, nennt, statischen, ebenen, lexikalischen, quellcode, wurde, verwendet, verstehen, vorherzusagen, welchen, wert, ein, verweist, konflikte, zwischen, vermeiden, nachzuvollziehen, warum, bestimmten, stelle, verfügbar, verschiedenen, umgebenden, unterscheidet, natürlich, führt, nutzbar, intl, vibration, notifications, audio, webrtc, geolocation, websockets, service, midi, storage, validation, fullscreen, history, screen, orientation, 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, 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, references, loop, macrotasks, selection, range, resizeobserver, intersectionobserver, mutation, observer, various, ressourcen, laden, onload, onerror, scripts, defer, domcontentloaded, load, beforeunload, unload, resource, loading, ereignis, methode, 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, 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, transpiler, bigint, currying, eval, proxy, reflect, miscellaneous, dynamische, imports, export, import, module, modules, iteratoren, generators, promisification, mixins, checking, instanceof, eingebaute, 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, properties, configuration, vertieft, binding, debounce, throttle, dekoratoren, weiterleitung, call, apply, settimeout, setinterval, nfe, globales, rekursion, stack, tojson, datum, uhrzeit, destructuring, assignment, keys, values, entries, weakmap, weakset, iterables, array, strings, math, zahlen, primitiven, types, optional, konstruktor, operator, primitiv, konvertierung, symbol, typen, garbage, collection, objektmethoden, kopieren, 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):
javascript variablen scope 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 variablen scope der variablen scope in javascript bestimmt wo variablen sichtbar und nutzbar sind dieser leitfaden erklärt globalen funktions und block scope scope ist der teil eines programms in dem eine variable sichtbar ist und verwendet werden kann den scope zu verstehen ermöglicht es dir vorherzusagen auf welchen wert ein name verweist unbeabsichtigte konflikte zwischen variablen zu vermeiden und nachzuvollziehen warum eine variable an einer bestimmten stelle verfügbar ist oder nicht dieser leitfaden erklärt die verschiedenen scope arten in javascript wie verschachtelte funktionen auf die sie umgebenden scopes zugreifen wie sich var von let const unterscheidet und wie all dies natürlich zu closures führt die drei arten von scope javascript bestimmt die sichtbarkeit von variablen danach wo die variable im quellcode deklariert wurde dies nennt man lexikalischen oder statischen scope es gibt drei ebenen globaler scope außerhalb jeder funktion oder eines blocks deklariert überall sichtbar funktions scope innerhalb einer funktion deklariert nur innerhalb dieser funktion sichtbar so funktioniert var block scope mit let oder const innerhalb eines blocks deklariert einem if einem for oder auch einem leeren nur innerhalb dieses blocks sichtbar globaler scope eine variable die auf oberster ebene eines skripts deklariert wird ist global jede funktion und jeder block kann sie lesen und schreiben javascript editable run const appname w3docs function greet inner code can read the outer global console log welcome to appname greet welcome to w3docs console log appname w3docs globale variablen sind praktisch aber riskant jeder teil des programms kann sie verändern und zwei unabhängige codeabschnitte können denselben namen verwenden und sich gegenseitig überschreiben halte den globalen namespace klein funktions scope eine variable die innerhalb einer funktion deklariert wird existiert nur solange diese funktion ausgeführt wird und ist von außen nicht sichtbar javascript editable run function makemessage const message only visible inside makemessage console log message only visible inside makemessage makemessage try console log message not defined out here catch err console log err message message is not defined das try catch lässt das beispiel weiterlaufen damit du die fehlermeldung sehen kannst anstatt dass das skript einfach abbricht block scope let und const sind auf den nächstgelegenen umschließenden block begrenzt nicht auf die gesamte funktion eine variable die innerhalb eines if oder for blocks deklariert wird verschwindet sobald der block endet javascript editable run function checkaccess age if age 18 const status adult block scoped to this if console log status adult try console log status out of scope here catch err console log err message status is not defined checkaccess 21 wie verschachtelte funktionen auf äußere variablen zugreifen wenn du funktionen verschachtelst kann die innere funktion variablen aus jedem scope lesen der sie umgibt ihrem eigenen dem der umschließenden funktion und dem globalen scope diese kette zugänglicher scopes wird als lexikalische umgebung oder scope kette bezeichnet wenn javascript einen namen nachschlägt beginnt es im aktuellen scope und geht nach außen bis es die variable findet wenn es den globalen scope erreicht ohne sie zu finden erhält man einen referenceerror javascript editable run const level global outermost function outer const outervar from outer function inner const innervar from inner inner can reach all three scopes console log innervar from inner console log outervar from outer console log level global inner outer die suche geht nur nach außen niemals nach innen outer kann innervar nicht sehen dies ist genau der mechanismus der closures möglich macht eine innere funktion behält zugriff auf ihre äußeren variablen auch nachdem die äußere funktion zurückgekehrt ist var vs let und const die scoping regeln unterscheiden sich je nachdem wie du eine variable deklarierst var ist funktionsbezogen und ignoriert blöcke während let und const block bezogen sind dies ist eine der häufigsten fehlerquellen in älterem code javascript editable run function compare if true var usingvar var leaks out of the block let usinglet let stays in the block console log usingvar var leaks out of the block try console log usinglet not accessible here catch err console log err message usinglet is not defined compare die klassische falle ist eine schleife die callbacks erstellt mit var gibt es eine einzige gemeinsame variable mit let erhält jede iteration ihre eigene bindung javascript editable run const withvar for var i 0 i 3 i withvar push i console log withvar map fn fn 3 3 3 one shared i const withlet for let j 0 j 3 j withlet push j console log withlet map fn fn 0 1 2 a new j each time für einen tieferen einblick in die besonderheiten von var einschließlich hoisting und dem fehlenden block scope siehe das alte var hoisting und die temporal dead zone deklarationen werden verarbeitet bevor der code ausgeführt wird eine var deklaration wird gehoisted und mit undefined initialisiert sodass das lesen vor der zuweisung undefined statt einem fehler liefert let und const werden ebenfalls gehoisted befinden sich aber in einer temporal dead zone tdz sie sind nicht verwendbar bis die zeile ausgeführt wird die sie deklariert javascript editable run console log hoistedvar undefined declaration hoisted value not yet set var hoistedvar set later console log hoistedvar set later try console log notyet in the tdz let notyet value catch err console log err message cannot access notyet before initialization best practices bevorzuge const dann let vermeide var block scope ist besser vorhersehbar und verhindert unbeabsichtigte lecks und die oben gezeigte schleife callback falle halte variablen im engstmöglichen scope deklariere sie innerhalb des blocks oder der funktion die sie benötigt anstatt auf oberster ebene minimiere globale variablen weniger globale variablen bedeuten weniger namenskonflikte und weniger werte die irgendein code still verändern kann deklariere vor der verwendung auch wenn hoisting existiert macht es den code schwerer lesbar wenn man sich darauf verlässt fazit scope kontrolliert wo jede variable sichtbar ist global im funktions scope oder im block scope verschachtelte funktionen bilden eine lexikalische umgebung die es innerem code ermöglicht durch die scope kette nach außen zu greifen die grundlage von closures die wahl von let const statt var gibt dir zuverlässigen block scope und vermeidet hoisting überraschungen studiere als nächstes wie funktionen ihre umgebung in javascript closures erfassen und wie zurückgegebene funktionen in funktionsausdrücken funktionieren übungen übung was sind die arten von javascript variablen scopes was sind die arten von javascript variablen scopes lokaler scope und globaler scope public scope und private scope protected scope und package scope block scope prüfen was this page helpful yes no previous js rest parameter und spread syntax next js das alte var on this page die drei arten von scope wie verschachtelte funktionen auf äußere variablen zugreifen var vs let und const hoisting und die temporal dead zone best practices fazit übungen 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