JavaScript: Diese Features musst Du kennen (ES2016 bis ES2021) // deutsch

[@cleo_the_cat]

Große Klasse! So leichtverständlich, aber gleichzeitig fundiert und umfassend habe ich die ganzen neuen ES-Features noch nirgends erklärt gesehen. Die Beispiele helfen dabei neben den tollen Erklärungen enorm. Vielen Dank!!

[@michaelrichter9408]

Async/await ist meiner Meinung nach die wichtigste Neuerung der letzen Jahre, aber auch Rest und Spread für Objekte sind sehr nützlich.

[@MarkusEicher70]

Grüss Dich, Golo. Herzlichen Dank für diese Übersicht. Ich war schon immer ein Fan von RegEx auch wenn ich diese Disziplin leider zu wenig beherrsche, aber die Möglichkeit einzelne Extrakte daraus zu gruppieren und in einem nützlichen Format darzustellen fand ich besonders interessant. Wie gewohnt eine sehr ansprechende Präsentation. Es macht echt Spass Deinen Ausführungen zuzuhören und ich freue mich schon auf das nächste Video. Bleib gesund und munter. Gruss Markus.

[@thenativeweb]

[gr] Danke schön 😊

[@justinriedel8737]

Danke für deine tolle Übersicht! Gut zum Wissen auffrischen und den eigenen Kenntnisstand zu checken. Async/Await hat ES meiner Meinung nach in den letzten Jahren am meisten voran gebracht und die Entwicklung erleichtert, ich denke niemand würde es wieder missen wollen.

[@thenativeweb]

[gr] Vielen Dank 😊

[@damdam4969]

"Eine kurze Geschichte". Video: 54 Minuten :D

[@thenativeweb]

[gr] Haha 🤣

[@erkancimen7787]

Im Bezug auf Trailing von es2017 gibt es einen weiteren Vorteil: Wenn wir neue Zeilen hinzufügen (z.B ein weiterer Parameter, Element im Array, ...) wird das nicht im git erfasst. Ansonsten! Tolles Video. Bin selbst als primär Java Entwickler immer wieder begeistert von euren (JavaScript-)Videos. Und da spreche ich für einige Kollegen in privaten Projekten gleich mit!

[@thenativeweb]

[gr] Das stimmt, guter Punkt 👍 Und vielen Dank für das tolle Feedback 😊

[@BenjaminAster]

37:38 BigInts kann man schon dividieren, es wird nur abgerundet.

[@thenativeweb]

[gr] Du hast Recht - da habe ich mich vertan … siehe developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt#operators

[@ScriptRaccoon]

Eine super Zusammenstellung, vielen Dank! Die meisten Features kannte ich (überraschenderweise) schon, die hatte ich schon hier und da mal aufgeschnappt, und die meisten benutze ich auch regelmäßig. Ist ja auch alles sehr praktisch :) Übrigens: wie um alles in der Welt hast du es geschafft so ein Video in einem Take aufzunehmen? Beeindruckend.

[@2tissues513]

klasse uebersicht! ihr seid in kurzer zeit mein lieblingskanal zu allem web related geworden.

[@yt7042]

Wieder mal ein super hilfreiches Video von dir. Da kann es nur ein "alle Daumen nach oben geben"! Was ich etwas grenzwertig finde ist die teilweise erzwungene Zusammenfassung von Code als "Einzeiler". Für den routinierten JS-Entwickler ist der Sinn vielleicht sofort erkennbar, aber für den gelegentlichen JS-benutzenden FullStack Entwickler oder JS Anfänger wahrscheinlich nicht. Ich würde mir übrigens tatsächlich noch ein ECMAScript 2015 / ECMAScript 6 (ES6) Video in dieser Art wünschen, wo alle Änderungen noch einmal im "Schnelldurchlauf" durchgegangen werden. Es gibt sicher einige User in diesem Kanal, die wie ich aus der alten JS-Zeit kommen und den Umbruch aus diversen Gründen nicht (sofort) mitgegangen sind und nur punktuell auf dem Laufenden sind. Das wäre wirklich super hilfreich!!!!

[@thenativeweb]

[gr] Danke für das Lob und das Feedback, dann gucken wir mal, was sich machen lässt … 😊

[@longingbydesign]

Haha, das Video würde dann vermutlich 10 Stunden gehen...

[@yt7042]

@@longingbydesign Es geht nur um die Features die mit ES6 NEU! eingeführt wurden. Ich weiß nicht wie du da auf 10h kommst?

[@longingbydesign]

@@yt7042 Weil das so viele sind.

[@stullesblog6692]

Super Video. Ich liebe besonders die "spread" und "rest" operatoren.

[@thenativeweb]

[gr] Vielen Dank 😊

[@marinaegner]

Wieder ein tolles Video! Dieses Format finde ich Klasse! 😊 Die praxisnahen Beispiele sind sehr gut. Mir sind nun zu einigen Dingen, die ich zwar schon kannte, völlig neue Ideen gekommen. Spreding und Rest kannte ich noch gar nicht. Hab das zwar schon wo gesehen, aber hatte den Sinn noch nicht verstanden. Das mit dem Trailing comma war mir zu meiner Verwunderung aufgefallen. Ich hatte mich gewundert, warum es keinen Fehler erzeugt. Da war ich mir bislang unsicher, ob ich da was falsch verstehe. Jetzt hab ich Klarheit. Vielen Dank! 😊

[@thenativeweb]

[gr] Freut mich, vielen Dank 😊

[@michaelrichter9408]

Eine super Übersicht über die Neuerungen in JS. Vielen Dank.

[@Lucsy3012]

Mega gutes Video, danke dir dafür! Letztens erst deinen Kanal entdeckt und du machst das wirklich sehr praxisbezogen und einfach verständlich! Mein persönliches Favorit ist das Optional Chaining, das nutze ich selbst super häufig und bin überrascht, dass es viele von nicht kennen denen ich das mal zufällig nur PR's oder ähnliches zeige. Wobei ich hier auch noch was gelernt hatte, nämlich dass sich das ? immer auf das danach folgende Element bezogen habe, also deinem Beispiel nach wäre ich jetzt davon ausgegangen, dass "name?.middleName..." richtig wäre, (weil ich mit dem Punkt auf das nächste Element in der Kette gehen und das optional sein soll, also das ? an den Punkt bindet) statt wie du es gemacht hast. Komisch, dass es bei mir trotzdem immer gut geklappt hat, wahrscheinlich weil ich dann einfach noch mehr ? gesetzt habe 😅 Eine andere Sache ich total an JavaScript liebe, die nichts direkt mit deinem Video zutun hat, sind die ganzen Funktionen des "Intl" Objekts. Es gibt so viele tolle Dinge über das offensichtliche hinaus, die man dort entdeckt und etwas versteckter sind, z. B. Intl.RelativeTimeFormat, um ohne Mühen in allen möglichen Sprachen und Konventionen der Sprachen Zeitabstände wie "vor 2 Tagen" darzustellen. Selbst dann hilfreich, wenn man nur einsprachig arbeitet und gerade dann, wenn man ein JS Framework nutzt um seine Website aufzubauen 😊

[@thenativeweb]

[gr] Vielen Dank für das tolle Lob und Dein Feedback 😊

[@gambo2003]

Das wird eine cooler Content 💎👏

[@maxjung6845]

Herzlichen Dank, super Video!!! Und gratuliere zu "15K" Abonenten ;-)

[@thenativeweb]

[gr] Danke - und danke 😊

[@BastianHodapp]

Null coaslescing finde ich absolut super :D

[@damdam4969]

Ich nutze zurzeit für meine PWA die neue File System Access API. Was hälst du davon? Insbesondere was die Sicherheit betrifft. Zudem brauche ich für die "zuletzt verwendete Datei öffnen" - Funktion indexedDB. Wusste bis vor kurzem noch gar nicht, dass es überhaupt sowas gibt wie indexeddb. Hab js aber auch nie professionell gelernt. Alles selbst beigebracht, als hobby.

[@davith.7147]

Ich würde 2 Daumen hoch geben wenn ich könnte;)

[@thenativeweb]

[gr] Danke schön 😊

[@jogibear9988]

Eine schöne Übersicht gibts auch immer auf dem ESTree Github repo

[@dcxng6913]

spread operator, async await, Optional chaining operator sind bestimmt noch ein paar mehr.

[@devchannel5232]

18:15 Spread macht doch eine Deep Copy, wenn die Werte nicht genested sind, oder lieg ich falsch? Weil Golo meinte Spread Shallowed Copied...

[@thenativeweb]

[gr] Nein, der Spread-Operator macht kein Deep-Copy. Er erzeugt Kopien von den Elementen auf der obersten Ebene. Wenn das Value-Types sind, dann sind das echte Kopien. Wenn das Reference-Types sind, wir die Referenz kopiert. Insofern hast Du zwar eine "echte" Kopie, aber eben nur von der Referenz. Beispiel: const x = { a: 3, b: [ 23, 42 ] }; const y = { ...x }; y.a = 5; // => ändert nicht x.a, da Value-Type und eine echte Kopie y.b = []; // => ändert nicht x.b, da Reference-Type und Du ersetzt (!) die Referenz Wenn Du stattdessen aber y.b.push(7); ausführst, dann hat sich auch der Inhalt von x.b verändert, eben weil es *keine* Deep-Copy ist. Auch der Spread-Operator macht nur eine Shallow-Copy. PS: Eine Deep-Copy ohne Nesting macht IMHO als Aussage nicht viel Sinn, denn wenn man kein Nesting hat, ist es per Definition kein Deep-Copy. Das Deep bezieht sich ja gerade darauf, dass genested wird.

[@AFE-GmdG]

Ich persönlich verwende sehr häufig den Spreding und Rest Operator sowie destructuring, aber neben Objekten auch mit Arrays (Tuples)

[@thenativeweb]

[gr] Ich auch - nur gibt's das für Arrays schon seit ES2015, deshalb habe ich das nicht gesondert erwähnt 😊

[@mirkorzehak5874]

Ich denke, das BigInt-Beispiel macht nicht das, was es soll. Das Argument für den BigInt-Konstruktor wird als number gesehen und deshalb in die Exponent-Darstellung gewandelt. Deshalb unterscheidet sich der tatsächliche Wert vom übergebenen Argument in den hinteren Ziffern. Kann man gut sehen, wenn man beide Werte (hugeNumber und alternative) mal auf die Konsole ausgibt. Wenn man den Wert als String an den Konstruktor übergibt, funktioniert es. Unabhängig davon wieder ein interessantes Video.

[@thenativeweb]

[gr] Danke für Dein Feedback 😊

[@longingbydesign]

Wo sind denn die public und private class fields, methods und accessors?

[@jackw.3978]

Welche ist die neuste Version, die man bei Typescript als Target verwenden kann?

[@thenativeweb]

[gr] Siehe www.typescriptlang.org/tsconfig#target 😉

[@jackw.3978]

@@thenativeweb Vielen Dank :)

[@TheLlindy]

great explanation

[@Ma1ne2]

Hey! Danke für das Video, es war wie immer spannend. Mir ist etwas aufgefallen, vielleicht weiß jemand mehr. Ich bin den Beispielen gefolgt und habe die Scripte jeweils mit Deno laufen lassen. Bei Regex wurde es spannend, denn der Call von exec() gibt in Deno nur ein Array mit 3 Strings zurück, dem originalen String und den zwei Matches. Kein index, input, groups. Danach habe ich dasselbe Skript mit Node ausgeführt, hier werden dann letztere von exec() zusätzlich zurückgegeben. Ist das ein Fehler von Deno? Eine unterschiedliche (aber beabsichtigte/erlaubte) Spezifikation von Deno?

[@thenativeweb]

[gr] Das hat mich jetzt doch sehr interessiert … also, der Punkt ist: Auf den ersten Blick wirkt es so, wie Du geschrieben hast. Aber: Wenn Du - obwohl die Property scheinbar nicht vorhanden ist - einfach auf ".groups" zugreifst, ist sie trotzdem da. Mir scheint, als ob sie einfach nur im "toString" ignoriert wird, weil sie zB non-enumerable ist, oder weil das toString entsprechend überschrieben wurde, oder irgendwie so was … Heißt: Der reguläre Ausdruck und die exec-Funktion verhalten sich schon gleich, nur das Ergebnis-Objekt ist geringfügig anders aufgebaut. Warum auch immer …

[@Ma1ne2]

@@thenativeweb Danke für deine Recherche, hab es jetzt auch nochmal so getestet und dasselbe festgestellt! Wieder was gelernt :)

[@NoiseLeGGa]

coalesKing :-)

[@thenativeweb]

[gr] 😉