JavaScript entwickelt sich weiter und mit der Einführung von ES13 (ECMAScript 2022) gibt es mehrere neue Funktionen, die Entwickler kennen sollten, um effizienteren und moderneren Code zu schreiben. In diesem Artikel gehen wir auf die zehn wirkungsvollsten Funktionen in ES13 ein, die Ihren Entwicklungsworkflow verbessern können.

1. Top-Level-Warten

Vor ES13:

Zuvor konnten Sie „await“ nur innerhalb asynchroner Funktionen verwenden. Das bedeutete, dass Sie, wenn Sie „await“ verwenden mussten, Ihren Code in eine asynchrone Funktion einbinden mussten, auch wenn der Rest Ihres Moduls dies nicht erforderte.

Beispiel:

// Without top-level await (Before ES13)
async function fetchData() {
  const data = await fetch('/api/data');
  return data.json();
}
fetchData().then(console.log);

ES13-Funktion:

Mit ES13 können Sie „await“ jetzt auf der obersten Ebene Ihres Moduls verwenden, sodass keine zusätzliche asynchrone Wrapper-Funktion erforderlich ist.

// With top-level await (ES13)
const data = await fetch('/api/data');
console.log(await data.json());

2. Private Instanzmethoden und Accessoren

Vor ES13:

Vor ES13 hatten JavaScript-Klassen keine echten privaten Felder oder Methoden. Entwickler verwendeten oft Namenskonventionen wie Unterstriche oder Verschlüsse, um den Datenschutz zu simulieren, aber diese Methoden waren nicht wirklich privat.

Beispiel:

// Simulating private fields (Before ES13)
class Person {
  constructor(name) {
    this._name = name; // Conventionally "private"
  }

  _getName() {
    return this._name;
  }

  greet() {
    return `Hello, ${this._getName()}!`;
  }
}

const john = new Person('John');
console.log(john._getName()); // Accessible, but intended to be private

ES13-Funktion:

ES13 führt echte private Instanzmethoden und Accessoren mit dem #-Präfix ein und stellt so sicher, dass außerhalb der Klasse nicht auf sie zugegriffen werden kann.

// Private instance methods and fields (ES13)
class Person {
  #name = '';

  constructor(name) {
    this.#name = name;
  }

  #getName() {
    return this.#name;
  }

  greet() {
    return `Hello, ${this.#getName()}!`;
  }
}

const john = new Person('John');
console.log(john.greet()); // Hello, John!
console.log(john.#getName()); // Error: Private field '#getName' must be declared in an enclosing class

3. Statische Klassenfelder und Methoden

Vor ES13:

Vor ES13 wurden statische Felder und Methoden normalerweise außerhalb des Klassenkörpers definiert, was zu weniger zusammenhängendem Code führte.

Beispiel:

// Static fields outside class body (Before ES13)
class MathUtilities {}

MathUtilities.PI = 3.14159;

MathUtilities.calculateCircumference = function(radius) {
  return 2 * MathUtilities.PI * radius;
};

console.log(MathUtilities.PI); // 3.14159
console.log(MathUtilities.calculateCircumference(5)); // 31.4159

ES13-Funktion:

ES13 ermöglicht es Ihnen, statische Felder und Methoden direkt im Klassenkörper zu definieren und so die Lesbarkeit und Organisation zu verbessern.

// Static fields and methods inside class body (ES13)
class MathUtilities {
  static PI = 3.14159;

  static calculateCircumference(radius) {
    return 2 * MathUtilities.PI * radius;
  }
}

console.log(MathUtilities.PI); // 3.14159
console.log(MathUtilities.calculateCircumference(5)); // 31.4159

4. Logische Zuweisungsoperatoren

Vor ES13:

Logische Operatoren (&&, ||, ??) und Zuweisungen wurden oft manuell in ausführlichen Anweisungen kombiniert, was zu komplexerem Code führte.

Beispiel:

// Manually combining logical operators and assignment (Before ES13)
let a = 1;
let b = 0;

a = a && 2;  // a = 2
b = b || 3;  // b = 3
let c = null;
c = c ?? 4; // c = 4

console.log(a, b, c); // 2, 3, 4

ES13-Funktion:

ES13 führt logische Zuweisungsoperatoren ein, die logische Operationen mit Zuweisungen in einer prägnanten Syntax kombinieren.

// Logical assignment operators (ES13)
let a = 1;
let b = 0;

a &&= 2;  // a = a && 2; // a = 2
b ||= 3;  // b = b || 3; // b = 3
let c = null;
c ??= 4; // c = c ?? 4; // c = 4

console.log(a, b, c); // 2, 3, 4

5. WeakRefs und FinalizationRegistry

Vor ES13:

Schwache Referenzen und Finalizer wurden in JavaScript nicht nativ unterstützt, was die Verwaltung von Ressourcen in bestimmten Fällen erschwerte, insbesondere bei umfangreichen Anwendungen, die teure Objekte verarbeiten.

Beispiel:

// No native support for weak references (Before ES13)
// Developers often had to rely on complex workarounds or external libraries.

ES13-Funktion:

ES13 führt WeakRef und FinalizationRegistry ein und bietet native Unterstützung für schwache Referenzen und Bereinigungsaufgaben nach der Garbage Collection.

// WeakRefs and FinalizationRegistry (ES13)
let obj = { name: 'John' };
const weakRef = new WeakRef(obj);

console.log(weakRef.deref()?.name); // 'John'

obj = null; // obj is eligible for garbage collection

setTimeout(() => {
  console.log(weakRef.deref()?.name); // undefined (if garbage collected)
}, 1000);

const registry = new FinalizationRegistry((heldValue) => {
  console.log(`Cleanup: ${heldValue}`);
});

registry.register(obj, 'Object finalized');

6. Ergonomische Markenchecks für Privatbereiche

Vor ES13:

Die Überprüfung, ob ein Objekt ein privates Feld hatte, war nicht einfach, da private Felder nicht nativ unterstützt wurden. Entwickler mussten sich auf Workaround-Methoden verlassen, wie z. B. die Suche nach öffentlichen Eigenschaften oder die Verwendung von Instanzprüfungen.

Beispiel:

// Checking for private fields using workarounds (Before ES13)
class Car {
  constructor() {
    this.engineStarted = false; // Public field
  }

  startEngine() {
    this.engineStarted = true;
  }

  static isCar(obj) {
    return obj instanceof Car; // Not reliable for truly private fields
  }
}

const myCar = new Car();
console.log(Car.isCar(myCar)); // true

ES13-Funktion:

Mit ES13 können Sie jetzt mithilfe der #-Syntax direkt prüfen, ob ein Objekt ein privates Feld hat, was es einfacher und zuverlässiger macht.

// Ergonomic brand checks for private fields (ES13)
class Car {
  #engineStarted = false;

  startEngine() {
    this.#engineStarted = true;
  }

  static isCar(obj) {
    return #engineStarted in obj;
  }
}

const myCar = new Car();
console.log(Car.isCar(myCar)); // true

7. Array.prototype.at()

Vor ES13:

Der Zugriff auf Elemente aus Arrays erforderte die Klammernotation mit einem Index, und bei negativen Indizes musste die Position manuell berechnet werden.

Beispiel:

// Accessing array elements (Before ES13)
const arr = [1, 2, 3, 4, 5];
console.log(arr[arr.length - 1]); // 5 (last element)

ES13-Funktion:

Mit der at()-Methode können Sie intuitiver auf Array-Elemente zugreifen, indem Sie sowohl positive als auch negative Indizes verwenden.

// Accessing array elements with `at()` (ES13)
const arr = [1, 2, 3, 4, 5];
console.log(arr.at(-1)); // 5 (last element)
console.log(arr.at(0)); // 1 (first element)

8. Object.hasOwn()

Vor ES13:

Um zu überprüfen, ob ein Objekt eine eigene Eigenschaft hatte (nicht geerbt), verwendeten Entwickler normalerweise Object.prototype.hasOwnProperty.call() oder obj.hasOwnProperty().

Beispiel:

// Checking own properties (Before ES13)
const obj = { a: 1 };
console.log(Object.prototype.hasOwnProperty.call(obj, 'a')); // true
console.log(obj.hasOwnProperty('a')); // true

ES13-Funktion:

Die neue Methode Object.hasOwn() vereinfacht diese Prüfung und bietet eine präzisere und lesbarere Syntax.

// Checking own properties with `Object.hasOwn()` (ES13)
const obj = { a: 1 };
console.log(Object.hasOwn(obj, 'a')); // true

9. Object.fromEntries()

Vor ES13:

Das Umwandeln von Schlüssel-Wert-Paaren (z. B. aus einer Karte oder Arrays) in ein Objekt erforderte eine Schleife und eine manuelle Erstellung.

Beispiel:

// Creating an object from entries (Before ES13)
const entries = [['name', 'John'], ['age', 30]];
const obj = {};
entries.forEach(([key, value]) => {
  obj[key] = value;
});
console.log(obj); // { name: 'John', age: 30 }

ES13-Funktion:

Object.fromEntries() vereinfacht die Erstellung von Objekten aus Schlüssel-Wert-Paaren.

// Creating an object with `Object.fromEntries()` (ES13)
const entries = [['name', 'John'], ['age', 30]];
const obj = Object.fromEntries(entries);
console.log(obj); // { name: 'John', age: 30 }

10. Globales Dies in Modulen

Vor ES13:

Der Wert dafür in der obersten Ebene eines Moduls war nicht definiert, was zu Verwirrung bei der Portierung von Code von Skripten in Module führte.

Beispiel:

// Global `this` (Before ES13)
console.log(this); // undefined in modules, global object in scripts

ES13-Funktion:

ES13 stellt klar, dass der Wert auf der obersten Ebene eines Moduls immer undefiniert ist, wodurch Konsistenz zwischen Modulen und Skripten gewährleistet wird.

// Global `this` in modules (ES13)
console.log(this); // undefined

Diese ES13-Funktionen sollen Ihren JavaScript-Code effizienter, lesbarer und wartbarer machen. Indem Sie diese in Ihre Entwicklungspraktiken integrieren, können Sie die neuesten Fortschritte in der Sprache nutzen, um moderne, leistungsstarke Anwendungen zu erstellen.