Arbeitsplatz Bild DEVJobs.at

Supercharge your JavaScript

Description

Nico Reindl verrät in seinem devjobs.at TechTalk einige coole Tricks, mit denen man das Entwickeln in JavaScript einfacher gestalten kann.

Beim Videoaufruf stimmst Du der Datenübermittlung an YouTube und der Datenschutzerklärung zu.

Video Zusammenfassung

In Supercharge your JavaScript zeigt Speaker Nico Reindl in rund 15 kompakten Tipps anhand von Code-Screenshots, wie man JavaScript klarer und kürzer schreibt. Er demonstriert den Spread Operator zum Zusammenführen von Objekten/Arrays, Destructuring mit Rest zum Auslassen von Feldern, Rest-Parameter und das Spreaden von Arrays in Funktionsaufrufe sowie Ternary, logisches AND/OR und einen Fragezeichen-Operator, um Bedingungen, Default-Werte und tiefe Undefined-Prüfungen zu vereinfachen. Zuschauer können diese Muster direkt nutzen, um Boilerplate zu reduzieren, Datenstrukturen elegant zu kombinieren, flexible Parameter zu handhaben und kleine Tricks wie das Kürzen eines Arrays über die Anpassung seiner Größe anzuwenden.

Supercharge your JavaScript: Praktische Kurzrezepte aus „Supercharge your JavaScript“ von Nico Reindl (DEVJobs.at)

Was wir in der Session gesehen haben

In „Supercharge your JavaScript“ liefert Nico Reindl (DEVJobs.at) rund 15 kompakte Tipps, die den Alltag in JavaScript spürbar erleichtern. Statt Live‑Coding arbeitet er mit konzentrierten Screenshots und markiert die jeweils entscheidenden Stellen – Unterstreichungen in Rot machen auf einen Blick klar, worauf es ankommt. Der Stil: pragmatisch, alltagstauglich, ohne unnötige Ausschweifungen.

Der Schwerpunkt liegt auf drei Feldern, die in nahezu jedem Codebase relevant sind:

  • Der Spread Operator (die drei Punkte), sowohl für Objekte als auch für Arrays und Funktionsargumente.
  • Ternärer Operator, Logisches UND und Logisches ODER als Stilmittel für lesbaren, knappen Kontrollfluss.
  • Kurze, robuste Zugriffe auf tief verschachtelte Werte, um endlose Undefined‑Prüfungen zu vermeiden.

Dazu kommen kleine, nützliche Tricks – etwa ein kurzer Griff in die Array‑Werkzeugkiste, wenn man nur die ersten Elemente benötigt. Die Beispiele im Talk sind bewusst simpel gehalten („Haustier“ mit Namen, Typ und Größe, „Bananensorten“, eine Multiplikationsfunktion, ein Batman‑Beispiel), damit die Muster und Denkweisen klar hervortreten. Wir fassen die wichtigsten Ideen zusammen – so, wie wir sie als Redaktion von DEVJobs.at wahrgenommen und verstanden haben.

Der Spread Operator: drei Punkte, viele Anwendungsfälle

Nico beginnt mit dem Spread Operator – und bleibt eine Weile dabei, weil die drei Punkte in der Praxis mehr sind als syntaktischer Zucker. Typische Einsatzorte:

Objekte erweitern, überschreiben, zusammenführen

Das Ausgangsbeispiel: ein Objekt, etwa ein Haustier mit einem Namen. Es soll um Typ und Größe ergänzt werden. Statt Werte einzeln zuzuweisen, zeigt Nico, wie sich das bestehende Objekt mit den drei Punkten „ausklappen“ und in ein neues Objekt übernehmen lässt. Zusätzliche Felder (wie Typ und Größe) werden direkt daneben gesetzt. Der Vorteil:

  • Das Muster ist leicht erkennbar: Erst Basisdaten übernehmen, dann gezielt Felder ergänzen oder überschreiben.
  • Bei vielen Feldern spart man sich Serien von Zuweisungen – besonders dann, wenn ein „Attribut‑Objekt“ separat vorliegt und mit dem Basisobjekt vereint werden soll.

Gerade wenn zwei Objekte – in seinem Beispiel „Haustier“ und „Haustier‑Attribute“ – inhaltlich verschmelzen sollen, wirkt dieses Vorgehen wie ein „Lebensretter“ bei großen Strukturen. Zitat sinngemäß:

Es ist ein sehr guter Lifesaver, wenn ihr große Objekte habt.

Destrukturierung kombinieren und gezielt weglassen

Nico erinnert: Man kann aus einem Objekt einzelne Werte herausziehen – etwa Name oder Typ. Spannend wird es, wenn diese Entnahme mit den drei Punkten kombiniert wird. Das Muster dahinter: bestimmte Felder explizit herausnehmen, der „Rest“ bleibt in einem verbleibenden Objekt. So lässt sich effektiv „löschen“, ohne destruktiv im Ursprungsobjekt zu manipulieren. Sein Rat bleibt knapp und eindeutig: Das ist praktisch und in seiner Routine fest verankert.

Arrays aufklappen und kombinieren

Auch bei Arrays sorgt der Spread Operator für klare, lineare Muster – statt Schleifen zum Mischen von Listen. Nico illustriert das mit Bananensorten (inklusive einem Augenzwinkern in Richtung roter Bananen). Die Kerngedanken:

  • Zwei oder mehr Arrays lassen sich über die drei Punkte leicht in ein neues Array zusammenführen.
  • Werte können am Anfang oder Ende ergänzt werden – ebenfalls per Ausklappen.
  • Für schnelles Umordnen bietet sich der Spread in Kombination mit einfachen Neuarrangements an, ohne in explizite Schleifen zu verfallen.

Die Quintessenz: weniger Boilerplate, mehr Lesbarkeit.

Funktionen: flexible Argumentlisten statt starrer Signaturen

Nico zeigt eine Multiplikationsfunktion, die zunächst drei Argumente annimmt. Die Frage: Was, wenn einmal zwei Werte übergeben werden – oder zehn? Die Lösung besteht darin, die Funktion so umzuschreiben, dass sie eine variabel lange Liste von Werten entgegennimmt. Das Zusammenspiel ist doppelseitig:

  • Beim Deklarieren der Funktion werden die Argumente gesammelt.
  • Beim Aufruf lassen sich vorhandene Arrays in die Funktionsargumente „hineinstreuen“.

Gerade letzteres spart laut Nico „eine Menge Zeit“, weil man vorhandene Listen ohne zusätzliche Schleifen oder „Zwischen‑Konvertierungen“ direkt verwenden kann.

Ternär, UND, ODER: lesbarer Kontrollfluss ohne Ballast

Der nächste Block widmet sich drei Operatoren, die schnell und klar sein sollen – und explizite if‑Ketten in vielen Situationen ersetzen.

Ternärer Operator: kompakte Wenn‑Dann‑Sonst‑Ausdrücke

Als „Fragezeichen“ eingeführt, übernimmt der ternäre Operator die Rolle kleiner Verzweigungen. Beispiele aus dem Talk:

  • Statt einer mehrzeiligen Wenn‑Dann‑Sonst‑Struktur eine knappe Schreibweise, um „groß“ oder „klein“ zu protokollieren.
  • Dasselbe Muster beim Zuweisen: Eine Variable erhält je nach Bedingung den passenden Wert – ohne vorgelagerte If‑Blöcke.

Die zentrale Motivation ist klar: Code schrumpft sichtbar, verbleibt aber lesbar. Nico betont, dass sich damit viele Mini‑Ifs vermeiden lassen – und das Projekt insgesamt aufgeräumter wirkt.

Logisches UND: ausdrucksstarkes „nur wenn“

Das Batman‑Beispiel ist einprägsam: Wenn Batman kommt (die Bedingung), soll die Batman‑Melodie gespielt werden. Wenn nicht, dann eben nicht. Statt einer If‑Struktur wird das mit dem logischen UND ausgedrückt. Das Ergebnis: knapper, präziser, ohne Nebeneffekte.

Logisches ODER: elegante Fallbacks bei undefined

Sehr gebräuchlich ist der Fallback‑Fall: Falls ein Wert nicht gesetzt ist, soll ein Ersatzwert greifen. Nico zeigt, wie ein expliziter Vergleich auf undefined schnell unübersichtlich wird – und wie das ODER stattdessen sauberer aussieht. In seinen Worten wirkt diese Form „ein bisschen cleaner“. Es bleibt bei einer Linie, die sowohl Absicht als auch Fallbacks knapp kommuniziert.

Schluss mit endlosen Undefined‑Prüfungen: das „Fragezeichen“ als Abkürzung

Ein klarer Schwerpunkt in Nicos Tonlage: Er will riesige Ketten von Prüfungen vermeiden. Das Beispiel: Ein tief verschachteltes Objekt, in dem ein Feld weiter hinten verglichen werden soll (etwa „größer als 10“). Ohne Hilfsmittel sieht man sich schnell gezwungen, Stufe um Stufe vorher auf existence zu prüfen – was wiederum in verschachtelte If‑Else‑Blöcke ausarten kann. Nicos Kommentar dazu ist deutlich:

Fangt gar nicht erst an, If‑Else zu verschachteln. Macht das bitte nicht.

Seine Alternative bleibt seiner Linie treu: die Fragezeichen‑Kurzform verwenden, um den Zugriff stark zu verkürzen. Die Botschaft ist nicht akademisch, sondern handwerklich: Kürzere Ausdrücke, leichter zu lesen, weniger potenzielle Tippfehler, weniger Aufwand bei Änderungen.

Wichtig ist dabei die Perspektive: Nico bleibt nah an seinem Beispiel und betont den praktischen Effekt. Die Kette schrumpft, der Zweck tritt hervor. Wir teilen diese Einschätzung: In alltäglichem Code helfen solche Muster enorm, die „Lärmfläche“ zu reduzieren.

Nützlicher Kurztrick: nur die ersten Elemente eines Arrays

Am Rande zeigt Nico einen Handgriff für Arrays mit Zahlen: Wenn man nur die ersten paar Werte möchte, lässt sich die Größe des Arrays einfach anpassen – im Beispiel auf drei Elemente. Der Effekt ist unmittelbar: Die Struktur wirkt sofort wie gewünscht zugeschnitten. Der Talk bricht an dieser Stelle ab, aber die Intention ist klar: Mit einem kleinen, eindeutigen Eingriff kann man ein großes Array ohne Zusatzschleifen auf das Wesentliche eindampfen.

Was die Beispiele gemeinsam haben

Bei aller Unterschiedlichkeit der Szenarien lassen sich aus Nicos Beispielen einige Konstanten herauslesen:

  • Prägnanz über Zeremonie: Wo eine einzelne Zeile reicht, verzichtet er konsequent auf mehrere.
  • Lesbarkeit als erste Metrik: Jede gezeigte Umformung macht die Absicht klarer erkennbar.
  • Wiederverwendbare Muster: Objekte ausklappen, Arrays zusammenführen, Argumente flexibel sammeln, Fallbacks setzen – das sind Bausteine, die man überall einsetzen kann.
  • Praktikabilität vor Perfektion: Die Beispiele sind bewusst einfach; sie sollen zur Anwendung ermutigen, nicht beeindrucken.

Diese Haltung prägt den ganzen Talk. Er ist kein Parcours exotischer Sprachfeatures, sondern ein konzentrierter Werkzeugkasten für den Alltag.

Typische Stolpersteine – und wie Nicos Muster ihnen vorbeugen

Auch wenn der Vortrag ohne explizite Gegenbeispiele auskommt, deuten sich typische Risiken an, die die gezeigten Muster abmildern:

  • Endlose Wiederholungen beim Zusammenführen von Objekten: Der Spread Operator hilft, boilerplate‑artige Zuweisungen durch eine klar erkennbare Struktur zu ersetzen.
  • Schleifen für triviale Array‑Operationen: Arrays lassen sich durch Aufklappen oft ohne Zusatzschleifen kombinieren oder um Elemente ergänzen.
  • Starre Funktionssignaturen: Eine flexible Sammlung von Argumenten verhindert Varianten‑Explosionen und vermeidet Wrapper‑Funktionen.
  • „Undefined‑Leitern“ in tiefen Objekten: Die Fragezeichen‑Kurzform reduziert zeilenlange Prüfketten auf einen Blick.
  • If‑Else‑Ketten für minimale Entscheidungen: Ternär, UND und ODER decken viele Mini‑Verzweigungen in einer einzigen Zeile ab.

Wir nehmen aus der Session klar mit: Diese Muster sind bewusst unspektakulär – genau deshalb sind sie so wirksam. Sie zielen nicht auf Spezialfälle, sondern auf das, was in jedem Codebestand jeden Tag vorkommt.

Wie wir die Tipps im Team einführen würden

Wir bei DEVJobs.at achten in Reviews vor allem auf Lesbarkeit und Konsistenz. Die gezeigten Muster lassen sich gut in Team‑Standards überführen. Ein möglicher Fahrplan:

  1. Den Spread Operator gezielt als Standard für das Zusammenführen von Objekten etablieren – insbesondere, wenn Basiskonfigurationen um zusätzliche Felder ergänzt werden.
  2. Arrays bevorzugt durch Aufklappen kombinieren und um Elemente ergänzen; explizite Schleifen nur dann, wenn zusätzliche Logik wirklich nötig ist.
  3. Funktionssignaturen dort vereinheitlichen, wo variable Argumentlisten Sinn ergeben – und bestehende Arrays direkt beim Aufruf „ausstreuen“.
  4. Ternär, UND und ODER in Code‑Reviews als legitime, lesbare Kurzformen annehmen – insbesondere für Logging, Fallbacks und Mini‑Entscheidungen.
  5. Die Fragezeichen‑Kurzform für tiefe Zugriffe als Standard‑Muster verankern, um redundante Undefined‑Prüfungen abzulösen.
  6. Kleine Array‑Tricks explizit dokumentieren (etwa das schnelle Begrenzen auf die ersten N Einträge), um Entwicklerinnen und Entwicklern einfache Werkzeuge an die Hand zu geben.

Die Balance ist entscheidend: Kurzformen sollen Klarheit erhöhen, nicht verringern. Nicos Beispiele liefern dafür gute Leitplanken, weil sie stets vom Anwendungsfall her gedacht sind.

Zitate und Aussagen, die hängen bleiben

  • „Der Spread Operator kann sehr nützlich sein.“
  • „Es ist ein sehr guter Lifesaver, wenn ihr große Objekte habt.“
  • „Benutzt es die ganze Zeit – es ist großartig.“ (zum Herausnehmen von Feldern in Kombination mit den drei Punkten)
  • „Das ist eines meiner größten Cleanup‑Tricks – ich kann nicht mehr ohne.“ (über die Fragezeichen‑Kurzform gegen Undefined‑Ketten)
  • „Bitte nicht anfangen, If‑Else zu verschachteln.“

Sie alle kreisen um denselben Punkt: Mehr Signal, weniger Rauschen.

Konkrete Takeaways für euren nächsten Commit

  • Nutzt die drei Punkte als Standardwerkzeug für Objekte, Arrays und beim Aufruf von Funktionen – ihr reduziert dabei Wiederholungen und macht Absichten explizit.
  • Ersetzt kleine If‑Blöcke, wo passend, durch Ternär, UND und ODER – kürzer, aber nicht kryptisch.
  • Schneidet tiefe Zugriffsketten mit der Fragezeichen‑Kurzform zusammen – die Lesbarkeit dankt es euch.
  • Greift bewusst zu kleinen Array‑Handgriffen, wenn ihr nur einen Ausschnitt braucht – ohne Zusatzschleifen.
  • Denkt eure Änderungen an vorhandenen Objekten als „Basis plus gezielte Ergänzungen“ – das entspricht Nicos Spread‑Muster und hält die Struktur klar.

Fazit

„Supercharge your JavaScript“ von Nico Reindl (DEVJobs.at) ist kein Feuerwerk exotischer Features, sondern eine Sammlung pragmatischer Micro‑Patterns, die man sofort anwenden kann. Im Fokus stehen einfache, wirkungsvolle Operatoren und Kurzformen, die Boilerplate reduzieren, Lesbarkeit erhöhen und Alltagsaufgaben beschleunigen. Uns hat der Talk vor allem daran erinnert, wie viel Gewinn in kleinen, konsequent eingesetzten Sprachmitteln steckt – insbesondere in den drei Punkten, im Fragezeichen und in den logischen Kurzformen.

Wer diese Muster zur Gewohnheit macht, beschleunigt nicht nur die eigene Tippgeschwindigkeit, sondern vor allem die Zeit bis zur Klarheit: weniger Code schreiben, mehr Absicht ausdrücken. Genau darin liegt die eigentliche „Supercharge“ für JavaScript‑Teams.

Weitere Tech Talks

Weitere Dev Stories