{"id":4730,"date":"2021-03-08T09:48:04","date_gmt":"2021-03-08T08:48:04","guid":{"rendered":"https:\/\/www.clickstorm.de\/blog\/?p=4730"},"modified":"2023-07-31T16:13:27","modified_gmt":"2023-07-31T14:13:27","slug":"ecmascript-6-im-einsatz","status":"publish","type":"post","link":"https:\/\/www.clickstorm.de\/blog\/ecmascript-6-im-einsatz\/","title":{"rendered":"ECMAScript 6 – die Zukunft von JavaScript?"},"content":{"rendered":"

JavaScript (JS) ist seit Jahren ein allt\u00e4glicher Begleiter von Web Entwicklern, sei es nun im Frontend oder Backend. Als Skriptsprache f\u00fcr den Browser gro\u00df geworden, wird JavaScript auch f\u00fcr andere Anwendungsbereiche genutzt, wie z. B. Node.js<\/a>.<\/p>\n

Auch f\u00fcr uns ist die Arbeit mit JavaScript ein wichtiger Bestandteil des Berufslebens. Zum Beispiel setzt Shopware 6 f\u00fcr die Administrationsoberfl\u00e4che im Backend auf das Framework Vue.js<\/a>. Im Frontend wird nach dem Ansatz „auf jQuery zu verzichten“ gearbeitet und wenn m\u00f6glich alles in reinem JavaScript, \u201eVanilla JavaScript\u201c, umzusetzen. Dank des Standards ECMAScript 6 oder kurz ES6 und dessen Updates bietet die Programmiersprache interessante Funktionen, die die Arbeit erleichtern.<\/p>\n

Was ist ECMAScript?<\/h2>\n

ECMAScript beschreibt den Standard f\u00fcr JavaScript. So unterst\u00fctzen alle modernen Browser seit 2012 die Version 5.1. Auf die Version 6 und deren Nachfolger, die jedes Jahr ein Update erhalten, werden wir heute einen Blick werfen. Das Problem bei der Arbeit mit den neuen Funktionen ist, dass einige Browser eventuell noch nichts mit den Spezifikationen anfangen k\u00f6nnen. Es lohnt sich, einen Blick auf die Browserkompatibilit\u00e4t<\/a> zu werfen. Wenn f\u00fcr ein Kundenprojekt z. B. klar ist, dass der Fokus auch auf dem Internet Explorer 11 liegt, muss eine Alternative zum modernen JavaScript geschaffen werden.<\/p>\n

Durch Babel<\/a> ist es m\u00f6glich, ein f\u00fcr alle Browser kompatibles JavaScript zu kompilieren. Vor allem f\u00fcr Versionen von ECMAScript 2015 und modernerer Varianten kann das sinnvoll sein. Bei der Entwicklung eines Shopware 6 Projektes kann das geschriebene JS dank eines eingebauten Compilers auch direkt in f\u00fcr \u00e4ltere Browser verst\u00e4ndlichen Code umgewandelt werden. Sehr cool! Um nicht den Rahmen zu sprengen, werde ich hier nicht auf die Einrichtung von Babel eingehen.<\/p>\n

Praktische Beispiele<\/h2>\n

Am einfachsten ist es, die Vorteile von ES6 zu verdeutlichen, wenn ich es an einigen Beispielen demonstriere. Wer bereits Erfahrung mit der Version von JS hat, d\u00fcrfte nicht viel Neues erfahren, da es sich hier nur um einen kleinen \u00dcberblick handeln soll. Genug der Worte, los geht\u2019s!<\/p>\n

let und const<\/h3>\n

Schluss mit Variablen, die unerw\u00fcnscht \u00fcberschrieben werden konnten. Dank des Keywords let<\/em> ist die Variable im block<\/em> scope<\/em>. Ein Block ist z. B. eine If-Schleife. Fr\u00fcher konnte eine mit var<\/em> deklarierte Variable in einer Schleife auch au\u00dferhalb dieser aufgerufen werden. Nun bleibt die in einem Block erstellte Variable au\u00dferhalb dieses Blocks \u201everborgen\u201c. Let<\/em> \u00fcberschreibt auch keine Variablen au\u00dferhalb des Blocks, die den gleichen Namen haben.<\/p>\n

var a = 0;\r\nconsole.log(a);\r\nif (condition) {\r\n  let a = 1;\r\n  console.log(a);\r\n}\r\nconsole.log(a);\r\n\r\n\/\/ 0\r\n\/\/ 1\r\n\/\/ 0\r\n\r\nif (condition) {\r\n  let a = 'test';\r\n  console.log(a);\r\n}\r\nconsole.log(a);\r\n\r\n\/\/ test\r\n\/\/ Uncaught ReferenceError: a is not defined<\/pre>\n
Es gibt eine weitere Variante, Variablen zu deklarieren. Mit const<\/em> kann eine Konstante erschaffen werden, die nicht neu zugewiesen werden kann. Ansonsten verh\u00e4lt sich const<\/em> genauso wie let<\/em>, ist also block<\/em> scoped<\/em>.<\/p>\n
Arrow functions<\/h3>\n
Funktionen bekamen mit den neuen arrow functions<\/em> eine alternative Syntax. Dabei kann das function<\/em> und return<\/em> Keyword weggelassen werden und auch die geschweiften Klammern. Dies ist jedoch nur der Fall, wenn die Funktion nur einen Parameter besitzt und der Funktionsinhalt nur einen Wert zur\u00fcckgibt. Was beachtet werden muss, arrow functions<\/em> haben nicht ihr eigenes this<\/em>. Au\u00dferdem sind sie nicht vom hoisting<\/em> betroffen, das hei\u00dft sie m\u00fcssen definiert werden bevor diese aufgerufen werden.<\/p>\n
\/\/ old syntax\r\nlet greeting = function(name) {\r\n    console.log(`Hello ${name}!`);\r\n}\r\n\r\n\/\/ new syntax\r\nlet greeting = (name) => {\r\n    console.log(`Hello ${name}!`);\r\n}\r\n\r\n\/\/ new syntax \r\n\/\/ omit parenthesis if only one parameter exists \r\n\/\/ omit return keyword if statement has only return expression\r\nlet doubleValue = value => value*2;\r\nconsole.log(doubleValue(42));<\/pre>\n
Klassen in ECMAScript<\/h3>\n
Mit ES6 wurden Klassen als Templates f\u00fcr JavaScript Objekte eingef\u00fchrt. Der gro\u00dfe Vorteil ist, dass die neue Syntax eing\u00e4ngiger und einfacher zu verstehen ist. Mithilfe von class<\/em> werden Klassen erstellt. Au\u00dferdem ben\u00f6tigt die Klasse eine constructor<\/em> Methode, die automatisch aufgerufen wird, wenn ein neues Objekt erstellt wird. Wird keine constructor<\/em> Methode angegeben, dann f\u00fcgt JS einen leeren constructor<\/em> hinzu. Klassenmethoden werden mit der gleichen Syntax wie Objektmethoden definiert.<\/p>\n
class Pokemon {\r\n    constructor(name, type) {\r\n        this.name = name;\r\n        this.type = type;\r\n    }\r\n}\r\n\r\nlet pikachu = new Pokemon(\"Pikachu\", \"Electric\");<\/pre>\n
Default Parameter<\/h3>\n
Endlich! In JS ist es m\u00f6glich einen Standardwert f\u00fcr Parameter zu definieren. Anstelle einer zus\u00e4tzlichen Abfrage in der Funktion kann nun wie z. B. in PHP ein Default Parameter angeben werden. Es entf\u00e4llt das l\u00e4stige Pr\u00fcfen, ob tats\u00e4chlich ein Parameter existiert.<\/p>\n
\/\/ old version\r\nfunction multiply(factorOne, factorTwo) {\r\n    factorTwo = (typeof factorTwo !== 'undefined') ?  factorTwo : 1;\r\n    return factorOne * factorTwo;\r\n}\r\n\r\n\/\/ new version\r\nfunction multiply(factorOne, factorTwo = 1) {\r\n    return factorOne * factorTwo;\r\n}<\/pre>\n
Ein Versprechen wird nicht gebrochen: Promises<\/h3>\n
Promises<\/em> funktionieren \u00e4hnlich wie Versprechen im wahren Leben. Bei einem Versprechen wird eine Aussage f\u00fcr die Zukunft getroffen. Diese sollte zutreffen, kann aber eben durch ver\u00e4nderte Umst\u00e4nde auch nicht eintreffen. Das gilt auch f\u00fcr Promises<\/em> in JS. Solange ein Promise<\/em> nicht aufgel\u00f6st wurde, ist der Status pending<\/em>. Konnte das Versprechen eingehalten werden, ist er resolved<\/em> und wenn nicht, dann ist der Staus rejected<\/em>. Als Beispiel dient eine Anfrage an einen Server. Solange die Anfrage l\u00e4uft, ist diese pending<\/em> und falls die gew\u00fcnschten Daten zur\u00fcckkommen, wird das Promise<\/em> resolved<\/em>. Promises<\/em> sind also Objekte, die das Ergebnis von asynchronen Aktionen zur\u00fcckgeben, wenn das Versprechen gehalten wurde. Falls dies nicht der Fall ist, wird auf einen Fehler aufmerksam gemacht.<\/p>\n
Promises<\/em> werden mit dem Konstruktor new Promise<\/em> erzeugt und enthalten eine Funktion als Parameter. Diese hat die Variablen resolve<\/em> und reject<\/em> als Parameter. Wenn eine Aktion als erfolgreich angesehen wird, dann wird resolve<\/em> ausgef\u00fchrt, andernfalls reject<\/em>. An ein Promise<\/em> kann nun then<\/em> und catch<\/em> angehangen werden, um einen der beiden genannten F\u00e4lle abzufangen. Schauen wir uns ein Beispiel im Code an.<\/p>\n
const myPromise = new Promise((resolve, reject) => {  \r\n    \/\/ some functionality\r\n    \/\/ api calls or something\r\n    \r\n    if (condition) {    \r\n        resolve('Promise is resolved successfully');  \r\n    } else {    \r\n        reject('Promise is rejected');  \r\n    }\r\n});\r\n\r\n\/\/ if promise is resolved true then function is called otherwise catch\r\nmyPromise.then((message) => { \r\n    console.log(message);\r\n}).catch((message) => { \r\n    console.log(message);\r\n});<\/pre>\n
Warten mit Async\/Await<\/h3>\n
Mit der 2017er Version von ECMAScript gab es eine weitere Verbesserung in der asynchronen Programmierung in JavaScript. Daf\u00fcr wird eine Funktion mit dem async<\/em> Keyword gekennzeichnet. Eine Funktion w\u00fcrde in diesem Fall z. B. keinen Wert zur\u00fcckgeben, sondern ein Promise<\/em>. Das Ergebnis kann erst in Zusammenhang mit dem await<\/em> Keyword gesehen werden. Await<\/em> kann nur in einer Funktion, die mit async <\/em>definiert wurde, genutzt werden. Erreicht der Code die Stelle mit dem await,<\/em> wird solange gewartet bis es einen R\u00fcckgabewert gibt. Erst danach geht es weiter. F\u00fcr weitere Informationen empfehle ich diesen Artikel<\/a>.<\/p>\n
function waitASecond(x) {\r\n  return new Promise(resolve => {\r\n    setTimeout(() => {\r\n      resolve(x);\r\n    }, 1000);\r\n  });\r\n};\r\n\r\nlet add = async function(x) { \/\/ async function expression assigned to a variable\r\n  let a = await waitASecond(10); \/\/ waits until waitASecond finished\r\n  return x + a + b;\r\n};\r\n\r\nadd(100).then(v => {\r\n  console.log(v);  \/\/ prints 110 after 1 second.\r\n});<\/pre>\n
Template-Strings<\/h3>\n
Strings in JavaScript zusammenzusetzen, kann zu einer nervigen Aufgabe werden. Vor lauter Plus- und Anf\u00fchrungszeichen leidet die Lesbarkeit.<\/p>\n
console.log('Hello' + someNameVariable + '! Today is ' + someDateVariable + '.');<\/pre>\n
Besser w\u00e4re es, Variablen direkt im String zu verwenden oder? Daf\u00fcr gibt es die Template-Strings oder template literals<\/em>. Der String wird ganz einfach von Backticks („) umschlossen. Darin k\u00f6nnen nun Variablen durch die Syntax $(variablenName)<\/strong> genutzt werden. Bye bye, Pluszeichen.<\/p>\n
console.log(`Hello ${someNameVariable}! Today is ${someDateVariable}.`);<\/pre>\n
Destructuring<\/h3>\n
Es ist nun einfacher, Arrays und Objekte auseinanderzunehmen. Variablen k\u00f6nnen Werte aus Arrays oder Objekten simpel zugeordnet werden. Um es einfach zu erkl\u00e4ren, gibt es hier ein Beispiel aus dem Code von Shopware.<\/p>\n
\/\/ Component is qual to Shopware.Component and Mixin to Showpare.Mixin\r\nconst { Component, Mixin } = Shopware;<\/pre>\n
Dabei enth\u00e4lt das Objekt Shopware<\/em> Component<\/em> und Mixin<\/em>. Diese k\u00f6nnen dank des Destructurings<\/em> ohne viel Code direkt in eine Variable gespeichert werden.<\/p>\n
Fazit<\/h2>\n
Das war vielleicht schon eine ganze Menge, aber noch lange nicht alles. Ich habe mit den Informationen nur an der Oberfl\u00e4che gekratzt. ES6 und alle weiteren Updates brachten viele spannende Neuerungen in die JavaScript-Welt. Funktionen wie includes<\/em>, isNaN<\/em> oder Spread<\/em> und Rest<\/em> Operator sind nur weitere M\u00f6glichkeiten, die genutzt werden k\u00f6nnen und den Arbeitsalltag erleichtern.<\/p>\n
Wer Lust bekommen hat mehr \u00fcber das Thema zu erfahren, kann gerne den unten aufgef\u00fchrten Quellen folgen und das Wissen vertiefen.<\/p>\n","protected":false},"excerpt":{"rendered":"
JavaScript (JS) ist seit Jahren ein allt\u00e4glicher Begleiter von Web Entwicklern, sei es nun im Frontend oder Backend. Als Skriptsprache f\u00fcr den Browser gro\u00df geworden, wird JavaScript auch f\u00fcr andere […]<\/p>\n","protected":false},"author":11,"featured_media":4761,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[137],"tags":[226,225,224,17],"class_list":["post-4730","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-frontend","tag-ecmascript","tag-frontend","tag-javascript","tag-shopware"],"acf":[],"yoast_head":"\nECMAScript 6 - die Zukunft von JavaScript? - clickstorm Blog<\/title>\n<meta name=\"description\" content=\"JavaScript ist eine der popul\u00e4rsten Programmiersprachen im Web. Dank der j\u00e4hrlichen ECMAScript-Updates entwickelt sich JS stetig weiter.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.clickstorm.de\/blog\/ecmascript-6-im-einsatz\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"ECMAScript 6 - die Zukunft von JavaScript? - clickstorm Blog\" \/>\n<meta property=\"og:description\" content=\"JavaScript ist eine der popul\u00e4rsten Programmiersprachen im Web. Dank der j\u00e4hrlichen ECMAScript-Updates entwickelt sich JS stetig weiter.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.clickstorm.de\/blog\/ecmascript-6-im-einsatz\/\" \/>\n<meta property=\"og:site_name\" content=\"clickstorm Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/de-de.facebook.com\/clickstorm\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-03-08T08:48:04+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-31T14:13:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2021\/03\/ecmascript-6-zukunft-javascript_teaser-01.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1170\" \/>\n\t<meta property=\"og:image:height\" content=\"577\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Lennart\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@clickstorm_gmbh\" \/>\n<meta name=\"twitter:site\" content=\"@clickstorm_gmbh\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Lennart\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"7\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/ecmascript-6-im-einsatz\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/ecmascript-6-im-einsatz\\\/\"},\"author\":{\"name\":\"Lennart\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#\\\/schema\\\/person\\\/deb135605165fe27e0fb0ce20895d7ea\"},\"headline\":\"ECMAScript 6 – die Zukunft von JavaScript?\",\"datePublished\":\"2021-03-08T08:48:04+00:00\",\"dateModified\":\"2023-07-31T14:13:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/ecmascript-6-im-einsatz\\\/\"},\"wordCount\":1148,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/ecmascript-6-im-einsatz\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/03\\\/ecmascript-6-zukunft-javascript_teaser-01.jpg\",\"keywords\":[\"ECMAScript\",\"Frontend\",\"JavaScript\",\"Shopware\"],\"articleSection\":[\"Frontend\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/ecmascript-6-im-einsatz\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/ecmascript-6-im-einsatz\\\/\",\"url\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/ecmascript-6-im-einsatz\\\/\",\"name\":\"ECMAScript 6 - die Zukunft von JavaScript? - clickstorm Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/ecmascript-6-im-einsatz\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/ecmascript-6-im-einsatz\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/03\\\/ecmascript-6-zukunft-javascript_teaser-01.jpg\",\"datePublished\":\"2021-03-08T08:48:04+00:00\",\"dateModified\":\"2023-07-31T14:13:27+00:00\",\"description\":\"JavaScript ist eine der popul\u00e4rsten Programmiersprachen im Web. Dank der j\u00e4hrlichen ECMAScript-Updates entwickelt sich JS stetig weiter.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/ecmascript-6-im-einsatz\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/ecmascript-6-im-einsatz\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/ecmascript-6-im-einsatz\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/03\\\/ecmascript-6-zukunft-javascript_teaser-01.jpg\",\"contentUrl\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/03\\\/ecmascript-6-zukunft-javascript_teaser-01.jpg\",\"width\":1170,\"height\":577,\"caption\":\"ECMAScript 6 - Javascript, Frau blickt in Zukunft\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/ecmascript-6-im-einsatz\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"ECMAScript 6 – die Zukunft von JavaScript?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/\",\"name\":\"clickstorm Blog\",\"description\":\"Neuigkeiten rund um Webentwicklung\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#organization\",\"name\":\"clickstorm GmbH\",\"url\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/11\\\/logo.svg\",\"contentUrl\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/11\\\/logo.svg\",\"caption\":\"clickstorm GmbH\"},\"image\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/de-de.facebook.com\\\/clickstorm\\\/\",\"https:\\\/\\\/x.com\\\/clickstorm_gmbh\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCEaU1eUbug6OiI4uU6vA-cA\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#\\\/schema\\\/person\\\/deb135605165fe27e0fb0ce20895d7ea\",\"name\":\"Lennart\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/fd34fc303305611076a7ec495c8e7ee5c95b9d885e6b12156ba9f9c5ad960ea0?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/fd34fc303305611076a7ec495c8e7ee5c95b9d885e6b12156ba9f9c5ad960ea0?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/fd34fc303305611076a7ec495c8e7ee5c95b9d885e6b12156ba9f9c5ad960ea0?s=96&d=mm&r=g\",\"caption\":\"Lennart\"},\"url\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/author\\\/lennart\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"ECMAScript 6 - die Zukunft von JavaScript? - clickstorm Blog","description":"JavaScript ist eine der popul\u00e4rsten Programmiersprachen im Web. Dank der j\u00e4hrlichen ECMAScript-Updates entwickelt sich JS stetig weiter.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.clickstorm.de\/blog\/ecmascript-6-im-einsatz\/","og_locale":"de_DE","og_type":"article","og_title":"ECMAScript 6 - die Zukunft von JavaScript? - clickstorm Blog","og_description":"JavaScript ist eine der popul\u00e4rsten Programmiersprachen im Web. Dank der j\u00e4hrlichen ECMAScript-Updates entwickelt sich JS stetig weiter.","og_url":"https:\/\/www.clickstorm.de\/blog\/ecmascript-6-im-einsatz\/","og_site_name":"clickstorm Blog","article_publisher":"https:\/\/de-de.facebook.com\/clickstorm\/","article_published_time":"2021-03-08T08:48:04+00:00","article_modified_time":"2023-07-31T14:13:27+00:00","og_image":[{"width":1170,"height":577,"url":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2021\/03\/ecmascript-6-zukunft-javascript_teaser-01.jpg","type":"image\/jpeg"}],"author":"Lennart","twitter_card":"summary_large_image","twitter_creator":"@clickstorm_gmbh","twitter_site":"@clickstorm_gmbh","twitter_misc":{"Verfasst von":"Lennart","Gesch\u00e4tzte Lesezeit":"7\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.clickstorm.de\/blog\/ecmascript-6-im-einsatz\/#article","isPartOf":{"@id":"https:\/\/www.clickstorm.de\/blog\/ecmascript-6-im-einsatz\/"},"author":{"name":"Lennart","@id":"https:\/\/www.clickstorm.de\/blog\/#\/schema\/person\/deb135605165fe27e0fb0ce20895d7ea"},"headline":"ECMAScript 6 – die Zukunft von JavaScript?","datePublished":"2021-03-08T08:48:04+00:00","dateModified":"2023-07-31T14:13:27+00:00","mainEntityOfPage":{"@id":"https:\/\/www.clickstorm.de\/blog\/ecmascript-6-im-einsatz\/"},"wordCount":1148,"commentCount":0,"publisher":{"@id":"https:\/\/www.clickstorm.de\/blog\/#organization"},"image":{"@id":"https:\/\/www.clickstorm.de\/blog\/ecmascript-6-im-einsatz\/#primaryimage"},"thumbnailUrl":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2021\/03\/ecmascript-6-zukunft-javascript_teaser-01.jpg","keywords":["ECMAScript","Frontend","JavaScript","Shopware"],"articleSection":["Frontend"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.clickstorm.de\/blog\/ecmascript-6-im-einsatz\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.clickstorm.de\/blog\/ecmascript-6-im-einsatz\/","url":"https:\/\/www.clickstorm.de\/blog\/ecmascript-6-im-einsatz\/","name":"ECMAScript 6 - die Zukunft von JavaScript? - clickstorm Blog","isPartOf":{"@id":"https:\/\/www.clickstorm.de\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.clickstorm.de\/blog\/ecmascript-6-im-einsatz\/#primaryimage"},"image":{"@id":"https:\/\/www.clickstorm.de\/blog\/ecmascript-6-im-einsatz\/#primaryimage"},"thumbnailUrl":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2021\/03\/ecmascript-6-zukunft-javascript_teaser-01.jpg","datePublished":"2021-03-08T08:48:04+00:00","dateModified":"2023-07-31T14:13:27+00:00","description":"JavaScript ist eine der popul\u00e4rsten Programmiersprachen im Web. Dank der j\u00e4hrlichen ECMAScript-Updates entwickelt sich JS stetig weiter.","breadcrumb":{"@id":"https:\/\/www.clickstorm.de\/blog\/ecmascript-6-im-einsatz\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.clickstorm.de\/blog\/ecmascript-6-im-einsatz\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.clickstorm.de\/blog\/ecmascript-6-im-einsatz\/#primaryimage","url":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2021\/03\/ecmascript-6-zukunft-javascript_teaser-01.jpg","contentUrl":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2021\/03\/ecmascript-6-zukunft-javascript_teaser-01.jpg","width":1170,"height":577,"caption":"ECMAScript 6 - Javascript, Frau blickt in Zukunft"},{"@type":"BreadcrumbList","@id":"https:\/\/www.clickstorm.de\/blog\/ecmascript-6-im-einsatz\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.clickstorm.de\/blog\/"},{"@type":"ListItem","position":2,"name":"ECMAScript 6 – die Zukunft von JavaScript?"}]},{"@type":"WebSite","@id":"https:\/\/www.clickstorm.de\/blog\/#website","url":"https:\/\/www.clickstorm.de\/blog\/","name":"clickstorm Blog","description":"Neuigkeiten rund um Webentwicklung","publisher":{"@id":"https:\/\/www.clickstorm.de\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.clickstorm.de\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/www.clickstorm.de\/blog\/#organization","name":"clickstorm GmbH","url":"https:\/\/www.clickstorm.de\/blog\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.clickstorm.de\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/11\/logo.svg","contentUrl":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/11\/logo.svg","caption":"clickstorm GmbH"},"image":{"@id":"https:\/\/www.clickstorm.de\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/de-de.facebook.com\/clickstorm\/","https:\/\/x.com\/clickstorm_gmbh","https:\/\/www.youtube.com\/channel\/UCEaU1eUbug6OiI4uU6vA-cA"]},{"@type":"Person","@id":"https:\/\/www.clickstorm.de\/blog\/#\/schema\/person\/deb135605165fe27e0fb0ce20895d7ea","name":"Lennart","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/secure.gravatar.com\/avatar\/fd34fc303305611076a7ec495c8e7ee5c95b9d885e6b12156ba9f9c5ad960ea0?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/fd34fc303305611076a7ec495c8e7ee5c95b9d885e6b12156ba9f9c5ad960ea0?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/fd34fc303305611076a7ec495c8e7ee5c95b9d885e6b12156ba9f9c5ad960ea0?s=96&d=mm&r=g","caption":"Lennart"},"url":"https:\/\/www.clickstorm.de\/blog\/author\/lennart\/"}]}},"_links":{"self":[{"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/posts\/4730","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/comments?post=4730"}],"version-history":[{"count":13,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/posts\/4730\/revisions"}],"predecessor-version":[{"id":5641,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/posts\/4730\/revisions\/5641"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/media\/4761"}],"wp:attachment":[{"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/media?parent=4730"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/categories?post=4730"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/tags?post=4730"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}