{"id":5784,"date":"2024-03-20T14:24:42","date_gmt":"2024-03-20T13:24:42","guid":{"rendered":"https:\/\/www.clickstorm.de\/blog\/?p=5784"},"modified":"2024-04-02T09:15:29","modified_gmt":"2024-04-02T07:15:29","slug":"ecmascript-2023-24","status":"publish","type":"post","link":"https:\/\/www.clickstorm.de\/blog\/ecmascript-2023-24\/","title":{"rendered":"ECMAScript 2023\/24 – Welche \u00c4nderungen sind geplant?"},"content":{"rendered":"

Willkommen in der Zukunft von JavaScript: Im Juli letzten Jahres haben wir einige fantastische Neuerungen bekommen, die die JavaScript-Landschaft bereichern. Wir m\u00f6chten dir heute einen lockeren und verst\u00e4ndlichen Einblick in die aktuellen Funktionen sowie in die spannenden Features geben, die gerade die finale Phase des TC39-Komitees<\/a> durchlaufen. Lass uns zudem gemeinsam einen Blick auf das werfen, was uns noch im Laufe des Jahres im ECMAScript 2024<\/a> erwartet. F\u00fcr alle JavaScript-Fans gibt es jede Menge Spannendes zu entdecken!<\/p>\n

Neue Funktionen und Verbesserungen<\/h2>\n

Symbole als WeakMap-Schl\u00fcssel<\/h3>\n

„Klein, aber n\u00fctzlich“ \u2013 so k\u00f6nnte man die neueste Erg\u00e4nzung in JavaScript zusammenfassen. Seit der Einf\u00fchrung in ECMAScript 2015 erm\u00f6glichen WeakMaps das Erweitern von Objekten mit zus\u00e4tzlichen Eigenschaften \u2013 beispielsweise zur Nachverfolgung der Nutzungsh\u00e4ufigkeit eines Objekts \u2013 ohne das Risiko eines Speicherlecks, da die Schl\u00fcssel-Wert-Paare in einer WeakMap vom Garbage Collector \u201crecycled\u201d werden k\u00f6nnen.
\nUrspr\u00fcnglich konnten in WeakMaps nur Objekte als Schl\u00fcssel verwendet werden, aber man m\u00f6chte, dass die Schl\u00fcssel einzigartig sind. „Symbole wurden als eine neue unver\u00e4nderliche Methode definiert, die nicht neu erstellt werden kann. Daher macht es viel mehr Sinn, diese als einzigartigen Schl\u00fcssel in der WeakMap zu haben“<\/em>, sagte Chris Heilmann<\/a>, Entwicklungsadvokat und Browser-Ingenieur.<\/p>\n

Code Beispiel:<\/strong><\/p>\n

const weakMap = new WeakMap();\r\nconst key = Symbol(\"key1\");\r\nweakMap.set(key, \"Welcome Symbols to WeakMap !\");\r\nconsole.log(weakMap.get(key)); \/\/ Welcome Symbols to WeakMap !<\/pre>\n
Verbesserungen bei Arrays<\/h3>\n
\"Beispiel:<\/p>\n
Auch bei Arrays wurden einige Neuerungen hinzugef\u00fcgt. In ES2023 wurden .findLast( )<\/strong> und .findLastIndex( )<\/strong> eingef\u00fchrt, um die Effizienz beim Suchen in Arrays zu steigern, insbesondere wenn das gesuchte Element am Ende des Arrays vermutet wird. Zudem erm\u00f6glichen neue Methoden wie .toReversed( )<\/strong>, .toSorted( )<\/strong>, .toSpliced( )<\/strong> und .with( )<\/strong> die Manipulation von Arrays, ohne das Original zu ver\u00e4ndern (siehe Call-by-Reference vs. Call-by-Value<\/a>).<\/p>\n
Change Array by Copy<\/h3>\n
Reverse Sequence<\/h4>\n
const sequence = [1, 2, 3, 4];\r\nconst reversed = sequence.toReversed();\r\nconsole.log(reversed); \/\/ [4, 3, 2, 1]\r\nconsole.log(sequence); \/\/ [1, 2, 3, 4]<\/pre>\n
Sort Array<\/h4>\n
const unsorted = [1, 3, 4, 2];\r\nconst sorted = unsorted.toSorted();\r\nconsole.log(sorted); \/\/ [1, 2, 3, 4]\r\nconsole.log(unsorted); \/\/ [1, 3, 4, 2]<\/pre>\n
Verwendung von .findLast() und .findLastIndex()<\/h4>\n
\/* Beispiel vor ES2023 *\/\r\n\r\nconst numbers = [42, 13, 7, 21, 82, 100];\r\n[...numbers].reverse().find(n => n === 82); \/\/ 82, iteriert von links nach rechts\r\nnumbers.length - 1 - [...numbers].reverse().findIndex(n => n === 82); \/\/ 4\r\n\r\n\/* Beispiel nach ES2023 *\/\r\n\r\nnumbers.findLast(n => n === 82); \/\/ 82, iteriert von rechts nach links\r\nnumbers.findLastIndex(n => n === 82); \/\/ 4<\/pre>\n
Hashbang-Kommentare<\/h3>\n
Die bereits von SEO bekannten Hashbangs (#!)<\/strong>, welche zur Indexierung f\u00fcr Crawlern verwendet werden, bestimmen nun standardisiert den Interpreter f\u00fcr JavaScript-Skripte. Dies erleichtert die Ausf\u00fchrung von JS-Skripten als eigenst\u00e4ndige ausf\u00fchrbare Dateien.<\/p>\n
Beispiel:<\/p>\n
#!\/usr\/bin\/env node\r\nconsole.log('Hello, World!');<\/pre>\n
Ausblick auf ES2024<\/h2>\n