© ecco/Shutterstock.com
Die besten Tricks und Kniffe mit nativer JavaScript-Syntax

Gewusst, wie!


In JavaScript herrscht kein Mangel an syntaktischem Zucker, doch die schiere Menge der Möglichkeiten macht es manchmal schwer, überhaupt zu erkennen, was das ein oder andere Feature überhaupt zu leisten im Stande ist – im Großen wie im Kleinen. Gerade auf der Ebene einfachster Ausdrücke und simpelster Einzeiler verbergen sich viele Möglichkeiten, die nicht jeder kennt!

Die Zeiten vor ECMAScript 6 bzw. ECMAScript 2015 müssen ausgesprochen finster gewesen sein. Zu diesem Eindruck komme ich jedenfalls, wenn ich mir die raketengleiche Entwicklung anschaue, die das Image von JavaScript seither genommen hat. War die Programmiersprache einst noch schwerpunktmäßig mit ihrer Aufgabe als Witzfigur befasst, ist sie mittlerweile unter ihresgleichen akzeptiert. Dabei hat sich eigentlich gar nicht so viel wirklich geändert. JavaScript ist immer noch eine primär imperative, dynamisch typisierte und ziemlich objektorientierte Sprache und seit der Witzfigur-Ära hat sich trotz vieler neuer Features an der Art und Weise, wie wir JS schreiben, nicht sonderlich viel getan. Nur ganz wenige Features haben die Standardherangehensweise an typische JS-Herausforderungen wirklich auf den Kopf gestellt. So löst etwa der JS-Mainstream, seitdem es async/await gibt, asynchrone Aufgaben auf eine gänzlich neue Weise (imperativ, statt funktional mit Promises oder chaotisch mit Callbacks). Selbst die Einführung von Klassen hat nicht wirklich einen vergleichbaren Effekt gehabt, denn wer „richtiges“ OOP wollte, konnte das auch zu Zeiten von ES3 haben – nur eben mit einer handgestrickten Implementierung des Klassenkonzepts.

Entscheidend sind auch die Kleinigkeiten

Was sagt es uns, wenn wir Kleinigkeiten wie eine einheitliche Klassensyntax oder Syntaxbonbons wie Destructuring und Arrow Functions ebenso abfeiern wie die Einführung des eigentlich viel revolutionäreren async/await? Es sagt uns, dass die sogenannten Kleinigkeiten wichtig sind. Es macht einen Unterschied, dass es eine Standardlösung für Klassen-OOP gibt, denn es reduziert mentalen Overhead – es gibt einfach ein Problem weniger zu lösen. Und es macht einen Unterschied, wenn wir mit Destructuring Objekte zerlegen können, denn es macht Code kompakter – es gibt weniger Zeilen, die geistigen Arbeitsspeicher belegen. Kleinigkeiten können den Unterschied machen. Und diese Kleinigkeiten müssen nicht immer offizielle Features sein. Wer hin und wieder auch mal in der physischen Welt Dinge (um)baut, weiß, dass großartige Werkzeuge und erlesene Materialien zwar das Fundament eines erfolgreichen Projekts bilden, aber eben auch nicht mehr. Man muss es auch verstehen, auf diesem Fundament aufzubauen. Und dabei sind es neben dem Big Picture oft die Kleinigkeiten, die rückblickend offensichtlich erscheinenden Handgriffe, die einen gewaltigen Unterschied am Fun Factor ausmachen. Natürlich kommt man immer irgendwie zum Ziel, doch wenn einem der Meister, die Mama oder der Guru gezeigt haben, mit welch simplen Kniffen man ein Problem besonders einfach und elegant löst, macht das Lösen gleich doppelt Laune.

In diesem Artikel stelle ich euch einige JavaScript-Handgriffe vor, die in etwa in der gleichen Liga spielen wie das fachgerechte Aufklappen einer Mango oder Onkel Heinz’ einfacher Kniff zum fummelfreien Einbau von Unterputzsatellitendosen. Vielleicht kennt der eine oder andere Leser einige oder sogar alle diese Handgriffe schon, oder sie erscheinen offensichtlich. Aber vielleicht machen sie unseren JavaScript-Alltag auch punktuell sehr viel angenehmer und unseren Code eleganter.

1. Duplikate aus Listen werfen

Um in der Kreidezeit Listen zu deduplizieren war es noch nötig, auf Library-Funktionen wie _.uniq() von Lodash zurückzugreifen. Heutzutage kann diese Operation hingegen ein nativer Einzeiler sein (Listing 1).

Listing 1: Einfaches Deduplizieren mit Spreads und Arrays

const input = [ 0, 1, 2, 1, 0, 2, 3, 1 ]; const unique = [ ...new Set(input) ]; // Übrig bleibt in „unique“ [ 0, 1, 2, 3 ]

Die Kombination von Sets mit Array-Spread sorgt dafür, dass aus dem Input-Array alle Doubletten ausgefiltert werden. Die gesamte Operation besteht aus zwei Teilschritten:

  • new Set(input) konstruiert aus dem Inputarray ein Set, das per Definition jeden Wert nur einmal enthalten kann. Duplikate werden an dieser Stelle automatisch herausgeworfen, ohne d...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Gewinner-Teams

Wir bieten Lizenz-Lösungen für Teams jeder Größe: Finden Sie heraus, welche Lösung am besten zu Ihnen passt.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang