Türchen 13 | JS Adventskalender

Symbol – Einzigartige Identifikatoren erstellen

Mit der Einführung von ES6 (ECMAScript 2015) wurde in JavaScript ein neuer primitiver Datentyp eingeführt: das Symbol. Symbole dienen als einzigartige Identifikatoren und ermöglichen es Entwicklern, Eigenschaften zu erstellen, die garantiert einzigartig sind. In diesem Artikel werden wir die Verwendung von Symbolen erläutern, ihre Vorteile aufzeigen und mit praktischen Codebeispielen verdeutlichen, wie sie in modernen JavaScript-Anwendungen eingesetzt werden können.

Was ist ein Symbol?

Ein Symbol ist ein primitiver Datentyp, ähnlich wie Number, String, Boolean, Null und Undefined. Jedes Symbol ist einzigartig und kann als eindeutiger Schlüssel für Objekt-Eigenschaften verwendet werden. Dies hilft dabei, Namenskonflikte zu vermeiden und ermöglicht die Erstellung von Eigenschaften, die nicht unbeabsichtigt überschrieben werden können.

Erstellung eines Symbols:

const mySymbol = Symbol();

Eigenschaften von Symbolen

Einzigartigkeit: Jedes Symbol ist einzigartig. Selbst wenn zwei Symbole mit dem gleichen Beschreibungsstring erstellt werden, sind sie nicht gleich.
```
const sym1 = Symbol('id');
const sym2 = Symbol('id');

console.log(sym1 === sym2); // false
```
Nicht automatisch durchlaufbar: Symbole werden bei Iterationen wie for...in oder Object.keys() nicht berücksichtigt. Dadurch können Eigenschaften versteckt werden.

Verwendung von Symbolen als Objektschlüssel

Symbole eignen sich hervorragend als Schlüssel für Objekteigenschaften, insbesondere wenn man verhindern möchte, dass diese Eigenschaften versehentlich überschrieben oder von außen manipuliert werden.

Beispiel:

const UNIQUE_ID = Symbol('id');

const user = {
  name: 'Anna',
  age: 28,
  [UNIQUE_ID]: 12345
};

console.log(user[UNIQUE_ID]); // 12345

In diesem Beispiel verwenden wir das Symbol UNIQUE_ID als Schlüssel für eine Eigenschaft im user-Objekt. Diese Eigenschaft ist nicht über herkömmliche Methoden zugänglich.

Versuch, auf das Symbol zuzugreifen:

for (let key in user) {
  console.log(key); // 'name', 'age' (UNIQUE_ID wird nicht angezeigt)
}

console.log(Object.keys(user)); // ['name', 'age']

Zugriff auf Symboleigenschaften

Obwohl Symbole nicht durch Iterationen sichtbar sind, können sie mit speziellen Methoden abgerufen werden.

Object.getOwnPropertySymbols()

Diese Methode gibt ein Array aller Symbole eines Objekts zurück.

const symbols = Object.getOwnPropertySymbols(user);
console.log(symbols); // [Symbol(id)]

console.log(user[symbols[0]]); // 12345

Reflect.ownKeys()

Diese Methode gibt ein Array aller eigenen Eigenschaften eines Objekts zurück, einschließlich Symbolen.

const keys = Reflect.ownKeys(user);
console.log(keys); // ['name', 'age', Symbol(id)]

Beschreibung von Symbolen

Beim Erstellen eines Symbols kann ein optionaler Beschreibungsstring angegeben werden, der hauptsächlich für Debugging-Zwecke verwendet wird.

const sym = Symbol('Meine Beschreibung');
console.log(sym); // Symbol(Meine Beschreibung)

Globale Symbol-Registry

JavaScript bietet eine globale Symbol-Registry, die es ermöglicht, Symbole zu teilen und wiederzuverwenden.

Symbol.for(key)

Diese Methode sucht nach einem Symbol mit dem angegebenen Schlüssel in der globalen Registry. Wenn es nicht existiert, wird ein neues Symbol erstellt.

const globalSym1 = Symbol.for('app.identifier');
const globalSym2 = Symbol.for('app.identifier');

console.log(globalSym1 === globalSym2); // true

Symbol.keyFor(symbol)

Diese Methode gibt den Schlüssel eines Symbols aus der globalen Registry zurück.

const sym = Symbol.for('app.identifier');
const key = Symbol.keyFor(sym);

console.log(key); // 'app.identifier'

Anwendungsfälle für Symbole

Versteckte Eigenschaften: Durch die Verwendung von Symbolen als Schlüsseln können Eigenschaften erstellt werden, die nicht versehentlich überschrieben oder manipuliert werden.

Konstanten für Enums: Symbole können als eindeutige Konstanten in Enumerationen verwendet werden.

const COLOR_RED = Symbol('RED');
const COLOR_GREEN = Symbol('GREEN');

function getColorName(color) {
  switch (color) {
    case COLOR_RED:
      return 'Rot';
    case COLOR_GREEN:
      return 'Grün';
    default:
      return 'Unbekannt';
  }
}

Implementierung von Protokollen: Symbole können verwendet werden, um benutzerdefinierte Iteratoren oder andere Protokolle zu implementieren.

Well-known Symbols

JavaScript definiert mehrere eingebaute Symbole, die bestimmte Verhalten von Objekten beeinflussen können.

Beispiele:

Symbol.iterator

Ermöglicht es einem Objekt, iterierbar zu sein.

const collection = {
  items: [1, 2, 3],
  [Symbol.iterator]: function* () {
    for (let item of this.items) {
      yield item;
    }
  }
};

for (let value of collection) {
  console.log(value); // 1, 2, 3
}

Symbol.toPrimitive

Definiert eine Methode, die einen primitiven Wert für ein Objekt liefert.

const customNumber = {
  value: 10,
  [Symbol.toPrimitive](hint) {
    if (hint === 'number') {
      return this.value;
    }
    return null;
  }
};

console.log(customNumber + 5); // 15

Symbol.toStringTag

Ändert die Ausgabe von Object.prototype.toString.

class CustomClass {
  get [Symbol.toStringTag]() {
    return 'Benutzerdefiniert';
  }
}

const instance = new CustomClass();
console.log(Object.prototype.toString.call(instance)); // [object Benutzerdefiniert]

Einschränkungen und Vorsichtsmaßnahmen

Keine automatische String-Konvertierung: Symbole werden nicht automatisch in Strings konvertiert. Bei der Verwendung in Strings muss String(sym) oder sym.toString() verwendet werden.
```
const sym = Symbol('test');
console.log('Symbol ist ' + sym); // TypeError

console.log('Symbol ist ' + String(sym)); // 'Symbol ist Symbol(test)'
```
Nicht mit new verwendbar: Symbole sind primitive Werte und können nicht mit new instanziiert werden.
```
const sym = new Symbol(); // TypeError
```

Fazit

Symbole sind ein leistungsstarkes Feature in JavaScript, das es Entwicklern ermöglicht, eindeutige Identifikatoren zu erstellen und Namenskonflikte zu vermeiden. Sie bieten eine zusätzliche Ebene der Sicherheit und Kontrolle über Objekteigenschaften und eröffnen neue Möglichkeiten bei der Implementierung von Protokollen und versteckten Eigenschaften.

Experimentiere mit Symbolen in deinem nächsten Projekt und entdecke, wie sie dazu beitragen können, deinen Code robuster und wartbarer zu machen!