JavaScript: Die Neuerungen in ES2018

Inhaltsverzeichnis

In ihrem jüngsten Meeting hat die TC39 die finale Version von ES2018 verabschiedet. Damit erhält der JavaScript-Standard kurz aufgelistet folgende Neuerungen:

• Asynchrone Iteration
• Rest-Properties
• Spread-Properties
• Lookbehind Assertions für reguläre Ausdrücke
• Benannte Gruppen für reguläre Ausdrücke
• s-Flag für reguläre Ausdrücke
• Promise.prototype.finally
• Template Literal Revision

Asynchrone Iteration

Das in ES2015 eingeführte Konzept der nativen (synchronen) Iteration (Symbol.iterator) erhält in ES2018 das Gegenstück der nativen asynchronen Iteration (Symbol.asyncIterator). Während bei synchronen Iteratoren der Aufruf von next() direkt das Ergebnis der jeweiligen Iteration zurückgibt, liefert der Aufruf bei asynchronen Iteratoren ein Promise-Objekt zurück. Dieses lässt sich wie gewohnt verarbeiten. Entwickler können asynchrone Generatoren definieren, indem sie vor function* ein async stellen:

const getRandomNumberAsync = () => 
  new Promise((resolve, reject) => {
  setTimeout(() => resolve(Math.random()), 5000);
  });

// Asynchrone Generatorfunktion
async function* repeatRandomNumberAsync() {
  while (true) {
    const number = await getRandomNumberAsync();
    yield number;
  }
}

const asyncIterable = repeatRandomNumberAsync();
const asyncIterator = asyncIterable[Symbol.asyncIterator]();

Anschließend lässt sich der asynchrone Iterator wie gewohnt verwenden. Entweder über die Promise-API

asyncIterator.next()
  .then(result1 => {
    // { value: '0.8079568015936667', done: false }
    console.log(result1);
    return asyncIterator.next();
  })
  .then(result2 => {
    // { value: '0.5766898916887389', done: false }
    console.log(result2);
    return asyncIterator.next();
  })
  .then(result3 => {
    // { value: '0.06312379943064839', done: false }
    console.log(result3);
    return asyncIterator.next();
  });

oder in Kombination mit async/await

const result1 = await asyncIterator.next();
console.log(result1);
const result2 = await asyncIterator.next();
console.log(result2);
const result3 = await asyncIterator.next();
console.log(result3);

oder direkt innerhalb einer for-of-Schleife:

(async () => {
  for await (const number of repeatRandomNumberAsync()) {
    console.log(number);
  }
})();

Rest und Spread für Objekteigenschaften

Seit ES2015 könnnen sogenannte Rest-Parameter eine beliebige Anzahl an Funktionsparametern als Array bereitstellen. ES2018 führt analog dazu sogenannte Rest-Properties ein, die etwas Ähnliches für Objekteigenschaften ermöglichen. Die Definition der Rest-Properties erfolgt ebenfalls über drei vorangestellte Punkte:

const { firstName, lastName, ...properties } = person;

Das sorgt im folgenden Listing dafür, dass alle Eigenschaften des Objekts person, die als enumerable definiert und nicht über die Destructuring-Regel einer anderen Variablen zugewiesen sind (im Beispiel firstName und lastName), in das Objekt properties kopiert werden:

const person = {
  firstName: 'Max',
  lastName: 'Mustermann',
  age: 33,
  hairColor: 'brown',
  height: 1.8
};
const { firstName, lastName, ...properties } = person;
console.log(firstName);    // Max
console.log(lastName);    // Mustermann
console.log(properties);   // { age: 33, 
                                hairColor: 'brown', 
                                height: 1.8 }

Spread-Properties sind in gewisser Weise das Gegenstück zu Rest-Properties. Zur Erinnerung: Über den in ES2015 eingeführten Spread-Operator ist es möglich, in einem Array vorliegende Werte auf mehrere Elemente zu verteilen, beispielsweise auf Parameter. Spread-Properties funktionieren ähnlich für Objekte: die Anweisung

const person = { firstName, lastName, ...properties }; 

im folgenden Beispiel bewirkt das Kopieren aller Eigenschaften des Objekts properties (die enumerable sind) in das Objekt person:

const firstName = 'Max';
const lastName = 'Mustermann';
const properties = {
  age: 33,
  hairColor: 'brown',
  height: 1.8
};

const person = {
  firstName,
  lastName,
  ...properties
};
// { firstName: 'Max',
//   lastName: 'Mustermann',
//   age: 33,
//   hairColor: 'brown',
//   height: 1.8 }
console.log(person);

Mit Spread-Properties lassen sich somit wie in folgendem Listing gezeigt Objekte klonen, ohne auf Object.assign() zurückgreifen zu müssen – wobei sich das im Detail etwas voneinander unterscheidet)).

const person = { firstName: 'Max', lastName:  'Mustermann', 
                 age: 33, hairColor: 'brown', height: 1.8 }; 
const clonedPerson = { ...person }; const
clonedPerson2 = Object.assign( {}, person);