tag:forum.selfhtml.org,2005:/self Was zum Geier hab ich da aufgeführt? Javascript Objekte und andere Irrsinnigkeiten... – SELFHTML-Forum 2021-09-26T16:16:10Z https://forum.selfhtml.org/self/2021/aug/24/was-zum-geier-hab-ich-da-aufgefuhrt-javascript-objekte-und-andere-irrsinnigkeiten/1791042#m1791042 Der Daniel 2021-08-24T21:05:30Z 2021-08-24T21:05:30Z Was zum Geier hab ich da aufgeführt? Javascript Objekte und andere Irrsinnigkeiten... <p>Hallo,</p> <p>Ok... eigentlich suchte ich eine Shorthand Methode um ein Objekt in einem Objekt zu realisieren, nach dem Muster</p> <pre><code class="block language-javascript"><span class="token comment">// AUSGABE 1</span> <span class="token comment">/* GLOBAL_VARS = { einObj: {i: 0} } */</span> </code></pre> <p>Wollte folgenden Code</p> <pre><code class="block language-javascript"><span class="token comment">// BSP 1</span> <span class="token keyword">const</span> <span class="token constant">GLOBAL_VARS</span> <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token constant">GLOBAL_VARS</span><span class="token punctuation">.</span>einObj<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token constant">GLOBAL_VARS</span><span class="token punctuation">.</span>einObj <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token constant">GLOBAL_VARS</span><span class="token punctuation">.</span>einObj<span class="token punctuation">.</span>i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> </code></pre> <p>mit</p> <pre><code class="block language-javascript"><span class="token comment">// BSP 2</span> <span class="token keyword">const</span> <span class="token constant">GLOBAL_VARS</span> <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token constant">GLOBAL_VARS</span><span class="token punctuation">.</span>einObj<span class="token punctuation">.</span>i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> </code></pre> <p>abkürzen, was natürlich nicht funktionierte, da in BSP 2 <code>einObj</code> ja noch nicht definiert wurde und daher einen Fehler auswirft.</p> <p>Wirklich spannend wurde es, als ich folgende Methode probierte:</p> <pre><code class="block language-javascript"><span class="token comment">// BSP 3</span> <span class="token constant">GLOBAL_VARS</span><span class="token punctuation">.</span>einObj <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">.</span>i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> </code></pre> <p>...was mit <code>GLOBAL_VARS = {einObj: 0}</code> quittiert wurde - was zum Geier geht da vor?</p> <p>Und gibt's da eine Methode um das etwas klobige if-Statement in BSP 1 eleganter zu umschiffen?</p> <p>LG Daniel</p> https://forum.selfhtml.org/self/2021/aug/24/was-zum-geier-hab-ich-da-aufgefuhrt-javascript-objekte-und-andere-irrsinnigkeiten/1791043#m1791043 Rolf B 2021-08-24T21:42:41Z 2021-08-24T21:42:41Z Was zum Geier hab ich da aufgeführt? Javascript Objekte und andere Irrsinnigkeiten... <p>Hallo Daniel,</p> <p>wenn es denn unbedingt ein GLOBAL_VARS Objekt sein muss... es gibt andere Methoden (Module).</p> <p>Wie auch immer. Das Pattern ist eigentlich dieses:</p> <pre><code class="block language-js">window<span class="token punctuation">.</span><span class="token constant">GLOBAL_VARS</span> <span class="token operator">=</span> window<span class="token punctuation">.</span><span class="token constant">GLOBAL_VARS</span> <span class="token operator">||</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token constant">GLOBAL_VARS</span><span class="token punctuation">.</span>einObj <span class="token operator">=</span> <span class="token constant">GLOBAL_VARS</span><span class="token punctuation">.</span>einObj <span class="token operator">||</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token constant">GLOBAL_VARS</span><span class="token punctuation">.</span>einObj<span class="token punctuation">.</span>i <span class="token operator">=</span> <span class="token number">47</span><span class="token punctuation">;</span> </code></pre> <p><code>GLOBAL_VARS || {}</code> - was heißt das? Schau ins Wiki unter <a href="https://wiki.selfhtml.org/wiki/JavaScript/Objekte/Boolean#Boolesche_Werte" rel="nofollow noopener noreferrer">"Was ist Wahrheit"</a>.</p> <p>Wenn GLOBAL_VARS noch undefiniert ist, findet sich darin der Wert <code>undefined</code>. Dieser Wert ist falsy, deswegen wertet der || Operator auch noch seine rechte Seite aus und liefert diesen Wert zurück. Mehr dazu im Wiki unter <a href="https://wiki.selfhtml.org/wiki/JavaScript/Operatoren/Logische_Operatoren#Wahrheitstabellen_und_Kurzschlussreaktionen" rel="nofollow noopener noreferrer">Wahrheitstabellen und Kurzschlussreaktionen</a>.</p> <p>Warum window.GLOBAL_VARS? Weil Du sonst eine Fehlermeldung bekommen kannst, dass es diese Variable nicht gibt. Insbesondere im <a href="https://wiki.selfhtml.org/wiki/JavaScript/strict_mode" rel="nofollow noopener noreferrer">strict mode</a>. Und <code>var GLOBAL_VARS</code> kannst Du ja nicht schreiben, wenn Du nicht weißt, ob die Variable schon da ist.</p> <p>Dieses Hantieren mit <code>||</code> ist eine Spezialität von JavaScript. Das Ergebnis von <code>||</code> und <code>&&</code> ist <strong>nicht</strong> <code>true</code> oder <code>false</code>, sondern der Wert des linken oder rechten Operanden. Und das nutzt man im oben gezeigten Pattern aus.</p> <ol> <li>Ist GLOBAL_VARS schon da, bleibt es, wie es ist. Ist es noch nicht da, wird es mit einem leeren Objektliteral initialisiert.</li> <li>Ist GLOBAL_VARS.einObj schon da, blebt es wie es ist. Ist es noch nicht da, wird es mit einem leeren Objektliteral initialisiert.</li> </ol> <p>Und was ist mit deinem Schlussbeispiel?</p> <p><code>GLOBAL_VARS.einObj = {}.i = 0;</code></p> <p>Böse ist das. Böse und Gemein!</p> <p>{} ist ein Objektliteral und erzeugt ein leeres Objekt, mitten im großen Datenhaufen (a.k.a. Heap). Ein Verweis darauf wird ganz oben auf den Wertestapel gelegt. <code>{}.i=0</code> erzeugt in diesem leeren Objekt ein Property i und speichert darin den Wert 0. Nun kommt das Erbe der 1960er und der Sprache C - der Operator <code>=</code> ist ein Operator wie alle anderen auch, relativ niedrig priorisiert und rechts-assoziativ. Rechts-assoziativ heißt, dass <code>c = b = a</code> wie <code>c = (b = a)</code> zu lesen ist, und nicht wie <code>(c = b) = a</code> (was in JavaScript eh Blödsinn wäre, aber in C++... oh je!). In deinem Fall wird also zuerst <code>{}.i=0</code> ausgeführt. Zum Erbe gehört auch dies: Jeder Operator Hat Ein Ergebnis. Auch der Zuweisungsoperator. Der Wert von <code>{}.i = 0</code> ist der zugewiesene Wert, also 0. Dieser Wert <strong>ersetzt</strong> den Verweis auf das vorhin angelegte Objekt, und wird dann an <code>GLOBAL_VARS.einObj</code> zugewiesen. Danach ist das Statement zu Ende. Dieses kleine Objekt, dem Du eine Eigenschaft i verpasst hast, hat nun keinen mehr, der sich für es interessiert. Und so schwimmt es einsam und traurig irgendwo im Heap herum, ohne eine Rettungsleine, bis der gierige <a href="https://de.wikipedia.org/wiki/Garbage_Collection" rel="nofollow noopener noreferrer">Garbage Collector</a> vorbeischwimmt und es verschlingt. Armes Objekt .</p> <p>Anders gesagt:</p> <p><code>GLOBAL_VARS.einObj = 0;</code></p> <p>tut genau das gleiche, ohne ein Waisenobjekt zu hinterlassen.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2021/aug/24/was-zum-geier-hab-ich-da-aufgefuhrt-javascript-objekte-und-andere-irrsinnigkeiten/1791052#m1791052 Der Daniel 2021-08-25T11:54:08Z 2021-08-25T11:54:08Z Was zum Geier hab ich da aufgeführt? Javascript Objekte und andere Irrsinnigkeiten... <p>WOW - Danke für die Abhandlung</p> <p>...ja ja, die liebe Not mit globalen Variablen...</p> <p>Problem ist eben, dass wenn mehrere Funktionen z.B. ein und denselben Index in- oder dekrementieren, dies ohne globaler Zuflucht schlicht nicht möglich ist. Diese globaler Index muss dann in der Funktion ärgerlicherweise sogar per hard code eingefügt werden und kann nicht als Parameter übergeben werden</p> <pre><code class="block language-javascript"><span class="token keyword">let</span> index <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> <span class="token keyword">function</span> <span class="token function">incrementIndex</span><span class="token punctuation">(</span><span class="token parameter">i</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> i<span class="token operator">++</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">incrementIndex</span><span class="token punctuation">(</span>index<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// globaler index immer noch 0 => ;( rührt index außerhalb von function scope nicht an</span> <span class="token keyword">function</span> <span class="token function">incrementIndexHardCoded</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> index<span class="token operator">++</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">incrementIndexHardCoded</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// globaler index nun 1 => :) bezieht sich auf index außerhalb von function scope </span> </code></pre> <p>Damit diese nicht massenweise den Namespace zu verschmutzen, keimte in mir eben die Idee, alle globalen Variablen in EINEM globalen Objekt zusammenzufassen, eben <code>GLOBAL_VARS</code>.</p> <p><strong>Bin für bessere Ideen aber jederzeit offen!</strong> </p> <hr> <p>...und was mit:</p> <p><code>GLOBAL_VARS.einObj = {}.i = 0;</code></p> <p>unter der Haube passiert, habe ich zugegeben nicht ganz verstanden. Rechts assoziativ wird diese Zauberformel umgewandelt zu</p> <p><code>GLOBAL_VARS.einObj = {i = 0};</code></p> <p>? und wie ginge es dann weiter?</p> https://forum.selfhtml.org/self/2021/aug/24/was-zum-geier-hab-ich-da-aufgefuhrt-javascript-objekte-und-andere-irrsinnigkeiten/1791873#m1791873 Matthias Fulde 2021-09-24T18:06:40Z 2021-09-24T18:06:40Z Was zum Geier hab ich da aufgeführt? Javascript Objekte und andere Irrsinnigkeiten... <p>Hi Rolf</p> <blockquote> <p>Das Pattern ist eigentlich dieses:</p> <pre><code class="block language-js">window<span class="token punctuation">.</span><span class="token constant">GLOBAL_VARS</span> <span class="token operator">=</span> window<span class="token punctuation">.</span><span class="token constant">GLOBAL_VARS</span> <span class="token operator">||</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token constant">GLOBAL_VARS</span><span class="token punctuation">.</span>einObj <span class="token operator">=</span> <span class="token constant">GLOBAL_VARS</span><span class="token punctuation">.</span>einObj <span class="token operator">||</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token constant">GLOBAL_VARS</span><span class="token punctuation">.</span>einObj<span class="token punctuation">.</span>i <span class="token operator">=</span> <span class="token number">47</span><span class="token punctuation">;</span> </code></pre> </blockquote> <p>Wobei man das in modernen Browsern mit dem <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_nullish_assignment" rel="nofollow noopener noreferrer">nullish coalescing</a> operator noch abkürzen kann:</p> <pre><code class="block language-js"><span class="token punctuation">(</span>window<span class="token punctuation">.</span><span class="token constant">GLOBAL_VARS</span> <span class="token operator">??=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span>einObj <span class="token operator">??=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span> </code></pre> <p>In <code>A ?? B</code> wird der Ausdruck <code>B</code> nur ausgewertet, wenn <code>A</code> <code>null</code> oder <code>undefined</code> ist, sonst wird der Wert von <code>A</code> zurückgegeben.</p> <p>Der Zuweisungsausdruck <code>A ??= B</code> entspricht <code>A ?? (A = B)</code>.</p> <p>Viele Grüße,</p> <p>Matthias</p> https://forum.selfhtml.org/self/2021/aug/24/was-zum-geier-hab-ich-da-aufgefuhrt-javascript-objekte-und-andere-irrsinnigkeiten/1791055#m1791055 Der Martin 2021-08-25T12:20:13Z 2021-08-25T12:20:13Z Was zum Geier hab ich da aufgeführt? Javascript Objekte und andere Irrsinnigkeiten... <p>Hallo,</p> <blockquote> <p>...und was mit:</p> <p><code>GLOBAL_VARS.einObj = {}.i = 0;</code></p> <p>unter der Haube passiert, habe ich zugegeben nicht ganz verstanden. Rechts assoziativ wird diese Zauberformel umgewandelt zu</p> <p><code>GLOBAL_VARS.einObj = {i = 0};</code></p> </blockquote> <p>nein, die geschweiften Klammern wären so syntaktisch falsch. Man kann aber tatsächlich (runde!) Klammern setzen, um es etwas deutlicher zu machen:</p> <p><code>GLOBAL_VARS.einObj = ({}.i = 0);</code></p> <p>Zuerst wird der Ausdruck in der Klammer ausgewertet. Also ein leeres Objekt erzeugt, dem eine Eigenschaft i angehängt und dieser der Wert 0 zugewiesen. Der Zuweisungs-Operator hat aber auch einen Rückgabewert, und der ist relevant, wenn die Zuweisung innerhalb eines Ausdrucks vorkommt, wie hier. Der Rückgabewert des Zuweisungs-Operators ist der zugewiesene Wert, also 0. Dieser Wert 0 wird nun an GLOBAL_VARS.einObj zugewiesen, und das eben erzeugte Objekt fällt auf den Boden und zerschellt, weil es keinen Namen hat, mit dem man es ansprechen könnte.</p> <p>Live long and <s>pros</s> healthy,<br>  Martin</p> <div class="signature">-- <br> Klein φ macht auch Mist. </div> https://forum.selfhtml.org/self/2021/aug/24/was-zum-geier-hab-ich-da-aufgefuhrt-javascript-objekte-und-andere-irrsinnigkeiten/1791059#m1791059 Rolf B 2021-08-25T13:01:58Z 2021-08-25T13:17:24Z Was zum Geier hab ich da aufgeführt? Javascript Objekte und andere Irrsinnigkeiten... <p>Hallo Daniel,</p> <blockquote> <p>Bin für bessere Ideen aber jederzeit offen!</p> </blockquote> <p>Für bessere Ideen müsste man mehr über dein Gesamtkunstwerk wissen.</p> <p>Wenn Du Eventhandler mit onclick oder onsonstwas definierst, wirst Du kaum eine Chance haben. Denn die brauchen globale Funktionen und die müssen dann globale Objekte verwenden.</p> <p>Aber wenn Du ordentlich mit unobtrusive Script arbeitest, d.h. deine Eventhandler mit addEventListener registrierst, kannst Du Modularisierung mit Hilfe einer <a href="https://wiki.selfhtml.org/wiki/IIFE" rel="nofollow noopener noreferrer">IIFE</a> betreiben. Oder Du stellst das Ganze in ein <code><script type="module">...</script></code> Element (ECMAScript-Modul, nicht im Internet Explorer verfügbar) und brauchst Dir keine Gedanken um globalen Müll zu machen, denn globale Variablen eines Moduls bleiben im Modul. Zu IIFEs haben wir Artikel im Wiki, zu ECMAScript-Modulen nicht. Dafür hatte ich bisher keine Zeit. Aber das Wilde Weite Web hat viele Infos dazu.</p> <p>Das Problem mit dem Hardcoding kannst Du nur über Objekte lösen, denn eine Übergabe per Referenz kennt JavaScript nicht. Aber ein Objekt hast Du ja nun.</p> <p>D.h. wenn Du GLOBAL_VAR.foo.bar.i inkrementieren willst, <strong>könntest</strong> Du eine Funktion "erhöhe" schreiben, die so aussieht:</p> <pre><code class="block language-js"><span class="token keyword">function</span> <span class="token function">verändere</span><span class="token punctuation">(</span><span class="token parameter">obj<span class="token punctuation">,</span> eigenschaft<span class="token punctuation">,</span> wert</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> obj<span class="token punctuation">[</span>eigenschaft<span class="token punctuation">]</span> <span class="token operator">=</span> obj<span class="token punctuation">[</span>eigenschaft<span class="token punctuation">]</span> <span class="token operator">+</span> wert<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">// Inkrementieren von i mit</span> <span class="token function">verändere</span><span class="token punctuation">(</span><span class="token constant">GLOBAL_VAR</span><span class="token punctuation">.</span>foo<span class="token punctuation">.</span>bar<span class="token punctuation">,</span> <span class="token string">"i"</span><span class="token punctuation">,</span> <span class="token operator">+</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Dekrementieren von i mit</span> <span class="token function">verändere</span><span class="token punctuation">(</span><span class="token constant">GLOBAL_VAR</span><span class="token punctuation">.</span>foo<span class="token punctuation">.</span>bar<span class="token punctuation">,</span> <span class="token string">"i"</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Aber schick ist das nicht wirklich.</p> <p>Du könntest es auch so machen, dass Du ein Zählerobjekt mit Methoden erstellst. Das folgende ist "modernes" JavaScript; wenn Du auch den Internet Explorer unterstützen willst, musst Du auf die alte Syntax mit Konstruktorfunktion und Prototyp zurückfallen.</p> <pre><code class="block language-js"><span class="token comment">// Einmalig an geeigneter Stelle</span> <span class="token keyword">class</span> <span class="token class-name">Counter</span> <span class="token punctuation">{</span> <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">startwert</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>value <span class="token operator">=</span> startwert<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">increment</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>value<span class="token operator">++</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">decrement</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>value<span class="token operator">--</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token comment">// Verwendung</span> <span class="token constant">GLOBAL_VAR</span><span class="token punctuation">.</span>foo<span class="token punctuation">.</span>bar<span class="token punctuation">.</span>zähler <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Counter</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token constant">GLOBAL_VAR</span><span class="token punctuation">.</span>foo<span class="token punctuation">.</span>bar<span class="token punctuation">.</span>zähler<span class="token punctuation">.</span><span class="token function">increment</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Direkt inkrementieren</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token constant">GLOBAL_VAR</span><span class="token punctuation">.</span>foo<span class="token punctuation">.</span>bar<span class="token punctuation">.</span>zähler<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 1</span> <span class="token function">erhöhe</span><span class="token punctuation">(</span><span class="token constant">GLOBAL_VAR</span><span class="token punctuation">.</span>foo<span class="token punctuation">.</span>bar<span class="token punctuation">.</span>zähler<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Aufgabe delegieren</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token constant">GLOBAL_VAR</span><span class="token punctuation">.</span>foo<span class="token punctuation">.</span>bar<span class="token punctuation">.</span>zähler<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 2</span> <span class="token keyword">function</span> <span class="token function">erhöhe</span><span class="token punctuation">(</span><span class="token parameter">z</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> z<span class="token punctuation">.</span><span class="token function">increment</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2021/aug/24/was-zum-geier-hab-ich-da-aufgefuhrt-javascript-objekte-und-andere-irrsinnigkeiten/1791066#m1791066 Robert B. 2021-08-25T14:10:44Z 2021-08-25T14:10:44Z Was zum Geier hab ich da aufgeführt? Javascript Objekte und andere Irrsinnigkeiten... <p>Moin,</p> <blockquote> <p>Problem ist eben, dass wenn mehrere Funktionen z.B. ein und denselben Index in- oder dekrementieren, dies ohne globaler Zuflucht schlicht nicht möglich ist.</p> </blockquote> <p><em>Globale Zuflucht</em>? Was soll das denn sein?</p> <blockquote> <p>...und was mit:</p> <p><code>GLOBAL_VARS.einObj = {}.i = 0;</code></p> <p>unter der Haube passiert, habe ich zugegeben nicht ganz verstanden. Rechts assoziativ wird diese Zauberformel umgewandelt zu</p> <p><code>GLOBAL_VARS.einObj = {i = 0};</code></p> <p>? und wie ginge es dann weiter?</p> </blockquote> <pre><code class="block language-javascript"><span class="token constant">GLOBAL_VARS</span><span class="token punctuation">.</span>einObj <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">.</span>i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> <span class="token comment">// führt zu:</span> <span class="token constant">GLOBAL_VARS</span><span class="token punctuation">.</span>einObj <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> <span class="token constant">GLOBAL_VARS</span><span class="token punctuation">.</span>einObj <span class="token operator">=</span> <span class="token punctuation">{</span>i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token comment">// Syntax Error</span> <span class="token constant">GLOBAL_VARS</span><span class="token punctuation">.</span>einObj <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">i</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token comment">// führt zu</span> <span class="token constant">GLOBAL_VARS</span><span class="token punctuation">.</span>einObj<span class="token punctuation">.</span>i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> </code></pre> <p>Viele Grüße<br> Robert</p> https://forum.selfhtml.org/self/2021/aug/24/was-zum-geier-hab-ich-da-aufgefuhrt-javascript-objekte-und-andere-irrsinnigkeiten/1791058#m1791058 Rolf B 2021-08-25T12:54:04Z 2021-08-25T12:54:04Z Was zum Geier hab ich da aufgeführt? Javascript Objekte und andere Irrsinnigkeiten... <p>Hallo Martin,</p> <blockquote> <p>fällt auf den Boden und zerschellt</p> </blockquote> <p>ts, meinst Du denn der Garbage Collector frißt was vom Boden? Tatsächlich bleibt das Objekt unverändert auf dem Heap vorhanden - es gibt aber keine Referenz mehr darauf. Und das stellt der GC fest, wenn er vorbeikommt, und frisst es auf.</p> <p><strong>Wie</strong> er das feststellt, ist dagegen kaum erklärbar. Effiziente Garbage Collection ist arkane Kunst, und wird von den Runtimeherstellern eifersüchtig gehütet.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2021/aug/24/was-zum-geier-hab-ich-da-aufgefuhrt-javascript-objekte-und-andere-irrsinnigkeiten/1791895#m1791895 Matthias Fulde 2021-09-25T13:26:32Z 2021-09-25T13:26:32Z Was zum Geier hab ich da aufgeführt? Javascript Objekte und andere Irrsinnigkeiten... <p>Hallo Ingrid,</p> <p>ich habe dem Wiki mal einen Artikel zum <a href="https://wiki.selfhtml.org/wiki/JavaScript/Operatoren/Nullish_Coalescing_Operator" rel="nofollow noopener noreferrer">nullish coalescing</a> Operator (<code>??</code>) hinzugefügt.</p> <p>Viele Grüße,</p> <p>Matthias</p> https://forum.selfhtml.org/self/2021/aug/24/was-zum-geier-hab-ich-da-aufgefuhrt-javascript-objekte-und-andere-irrsinnigkeiten/1791903#m1791903 Rolf B 2021-09-26T12:47:45Z 2021-09-26T12:47:45Z Was zum Geier hab ich da aufgeführt? Javascript Objekte und andere Irrsinnigkeiten... <p>Hallo Matthias,</p> <p>du hast schon recht, den kann man verwenden. Ich habe ihn hier aus zwei Gründen nicht erwähnt:</p> <ul> <li>der TO war schon mit einfacheren Dingen ausgelastet</li> <li>man muss sich gut überlegen, wie man bei Gebrauch solcher Dinge mit Browsern umgeht, die sie nicht kennen. Jedes moderne Feature, das ich verwende, muss ich in Altbrowsern polyfillen oder für Altbrowser den JS-Teil abschalten. Und ich muss für jedes JS Feature, dass ich nutze, genau wissen, ob die Altlasten des Internet darüber stolpern oder nicht. Deswegen programmiere ich eher konservativ, und spare mir den Einsatz von Babel, Typescript oder ähnlichem. Das kann man sicherlich auch anders sehen.</li> </ul> <p>Irgendwann wird sicherlich der Punkt kommen, an denen IE Benutzer nur noch eine Meldung der Art "This page is modern and works only with a modern browser" zu sehen bekommen...</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2021/aug/24/was-zum-geier-hab-ich-da-aufgefuhrt-javascript-objekte-und-andere-irrsinnigkeiten/1791896#m1791896 Matthias Scharwies mscharwies@selfhtml.org 2021-09-25T13:37:43Z 2021-09-25T13:37:43Z Was zum Geier hab ich da aufgeführt? Javascript Objekte und andere Irrsinnigkeiten... <p>Hallo Matthias,</p> <blockquote> <p>ich habe dem Wiki mal einen Artikel zum <a href="https://wiki.selfhtml.org/wiki/JavaScript/Operatoren/Nullish_Coalescing_Operator" rel="nofollow noopener noreferrer">nullish coalescing</a> Operator (<code>??</code>) hinzugefügt.</p> </blockquote> <p>Vielen Dank und herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> PS: Meine Mutter fand diesen Vornamen so schön und (in Norddeutschland) so selten. Auf dem Spielplatz unserer Neubausiedlung waren wir <strong>vier</strong>, später in der 5. Klasse <strong>drei</strong> Matthiase! </div> https://forum.selfhtml.org/self/2021/aug/24/was-zum-geier-hab-ich-da-aufgefuhrt-javascript-objekte-und-andere-irrsinnigkeiten/1791908#m1791908 Matthias Fulde 2021-09-26T16:16:10Z 2021-09-26T16:16:10Z Was zum Geier hab ich da aufgeführt? Javascript Objekte und andere Irrsinnigkeiten... <p>Hi Rolf,</p> <p>das stimmt natürlich. Mein Beitrag war auch bloß als Ergänzung für Mitleser gedacht, die mit der Syntax eventuell noch nicht vertraut sind.</p> <p>Zu mehr reicht's bei mir im Moment eh nicht, da mein Schwerpunkt Computer Vision/Machine Learning doch eine ganz andere Baustelle ist. Ich verfolge aber natürlich trotzdem die Weiterentwicklung der Sprache und da bleibt sowas mal hängen. Inwieweit das auch praktisch einsetzbar ist, habe ich mal gekonnt ignoriert…</p> <p>Grundsätzlich empfinde ich den von dir vorgeschlagenen Weg der konservativen Programmierung allerdings als weitaus schwieriger und aufwändiger als die Alternative.</p> <p>Das mag natürlich mit meinem Mangel an praktischer Erfahrung zusammenhängen, aber ich fühle mich komplett damit überfordert, einschätzen zu können, welche Features in welchen Browsern funktionieren und welche Browser für welche Zielgruppen überhaupt noch relevant sind.</p> <p>Es erscheint mir viel einfacher, die kompatible Untermenge der Sprache von Leuten definieren zu lassen, die mehr Ahnung davon haben als ich, und dann meinen Code in die entsprechende Zielsprache übersetzen zu lassen.</p> <p>Sofern man mehr als ein paar hundert Zeilen Code hat, will man den ja in der Regel ohnehin in mehrere Module zerlegen, die dann von einem Bundler für die Auslieferung an den Client wieder zusammengefügt werden. Wenn ich aber bereits so einen Buildschritt habe, ist es kaum Mehraufwand, noch einen Transpiler drüberlaufen zu lassen.</p> <p>Der Aufwand, ein entsprechendes System aufzusetzen ist natürlich nicht Null, aber zumindest Webpack mit Babel lässt sich mittlerweile relativ leicht einrichten. Für die meisten Projekte dürfte die Standardkonfiguration ausreichend sein, so dass man nicht übermäßig viel Zeit in das Erlernen dieser Tools investieren muss.</p> <p>Den Code zu übersetzen entlässt mich als Entwickler nicht komplett aus der Verantwortung und es bringt auch immer einen gewissen Overhead mit sich, aber zumindest kann ich für die Entwicklung meiner Programme die am besten geeigneten Sprachmittel verwenden, ohne mich dabei danach richten zu müssen, ob irgendein Feature zum aktuellen Zeitpunkt produktiv verwendet werden kann oder nicht – zumal sich das im Zweifel auch schneller ändert, als ich meinen Code anpassen kann…</p> <p>Wenn man sich mit den Fähigkeiten der Browser so gut auskennt wie du, verschiebt sich die Schwelle, ab der der Einsatz solcher Tools als lohnenswert erscheint, wahrscheinlich ein ganzes Stück, aber ich stelle mir vor, dass so ein Übersetzungsschritt gerade für Leute mit weniger Erfahrung die Komplexität der Aufgabe insgesamt reduziert.</p> <p>Viele Grüße,</p> <p>Matthias</p>