Function: displayName — Eigenschaft · JavaScript-Referenz

Signatur

Function.prototype.displayName

Beschreibung

displayName ist eine frei beschreibbare, nicht standardisierte Eigenschaft von Funktions-Instanzen. Die Engine setzt sie nie von sich aus: Eine frisch erzeugte Funktion hat kein eigenes displayName, der Zugriff ergibt also undefined. Weist man ihr einen String zu, können einige Entwicklerwerkzeuge diesen Namen in der Konsole, im Profiler oder im Aufrufstapel des Debuggers anzeigen, anstelle des echten name.

Hilfreich ist das vor allem bei dynamisch erzeugten oder anonymen Funktionen, etwa aus Fabrikfunktionen, Dekoratoren oder Wrappern (debounce, memoize). Dort wäre name sonst leer oder nichtssagend (z. B. "wrapper").

Im Unterschied zu name ist displayName eine ganz normale, beschreibbare Eigenschaft ohne Sonderbedeutung in der Sprache. name ist dagegen standardisiert (ES2015), wird automatisch abgeleitet und ist nicht beschreibbar, lässt sich aber per Object.defineProperty ändern. Für portablen Code ist das Umdefinieren von name meist die bessere Wahl.

Bekannt ist das Muster auch aus Bibliotheken: React liest zum Beispiel die statische Eigenschaft displayName von Komponenten aus und zeigt sie in den React DevTools und in Fehlermeldungen an. Das macht die Bibliothek selbst, die Engine hat damit nichts zu tun.

Rückgabewert

Typ

string | undefined

Beschreibung

Der zugewiesene Anzeigename oder undefined, wenn keiner gesetzt wurde. Die Engine liefert keinen Standardwert.

Beispiele

Anzeigenamen setzen und auslesen

const handler = () => {};
console.log(handler.displayName); // noch nicht gesetzt

handler.displayName = 'Warenkorb › Klick-Handler';
console.log(handler.displayName);
console.log(handler.name); // name bleibt unverändert

undefined Warenkorb › Klick-Handler handler

Dynamisch erzeugte Funktionen in einer Fabrik benennen

const createValidator = (field) => {
  const validate = (value) => value != null && value !== '';
  // Für Debugger, die displayName auswerten
  validate.displayName = `validate(${field})`;
  // Portabel: auch name umdefinieren
  Object.defineProperty(validate, 'name', { value: `validate_${field}` });
  return validate;
};

const validateEmail = createValidator('email');
console.log(validateEmail.displayName, validateEmail.name);

validate(email) validate_email

Wrapper-Funktion mit sprechendem Namen (Memoize)

const memoize = (fn) => {
  const cache = new Map();
  const wrapped = (arg) => {
    if (!cache.has(arg)) cache.set(arg, fn(arg));
    return cache.get(arg);
  };
  wrapped.displayName = `memoize(${fn.displayName ?? fn.name ?? 'anonym'})`;
  return wrapped;
};

const square = (n) => n * n;
const fastSquare = memoize(square);
console.log(fastSquare(4), fastSquare.displayName);

16 memoize(square)

Bibliotheks-Konvention: displayName bei React-Komponenten

// React liest displayName selbst aus (DevTools, Fehlermeldungen)
const withLogger = (Component) => {
  const Wrapped = (props) => Component(props);
  const inner = Component.displayName || Component.name || 'Component';
  Wrapped.displayName = `withLogger(${inner})`;
  return Wrapped;
};

const Button = (props) => `<button>${props.label}</button>`;
console.log(withLogger(Button).displayName);

withLogger(Button)

// Wichtig · Fallstricke

Nicht standardisiert: displayName steht in keiner ECMAScript-Spezifikation. Ob und wo der Name erscheint, hängt vom Werkzeug ab. Firefox und Safari haben ihn in Konsole und Debugger ausgewertet, Chrome/V8 nutzt ihn für Stacktraces nicht. Error.prototype.stack beachtet displayName in der Regel nicht.
Die Engine setzt nie einen Standardwert. Wer einen Namen braucht, fragt deshalb fn.displayName ?? fn.name ab.
Hängt der Code vom Namen ab (Logging, Serialisierung, Tests), ist Object.defineProperty(fn, 'name', { value: '…' }) die portable Lösung. Eine direkte Zuweisung an fn.name wird stillschweigend ignoriert, im strikten Modus löst sie einen TypeError aus.
Bei Minifizierung bleibt displayName als String erhalten, name dagegen wird oft verkürzt. Das kann für Fehlerberichte im Produktivbetrieb nützlich sein, vergrößert aber das Bundle ein wenig.
Kein Sicherheitsrisiko. Schreiben Sie aber keine sensiblen Daten in Anzeigenamen, weil diese in Werkzeugen und Protokollen sichtbar werden.

Siehe auch

Function: name Function: length Object.defineProperty() Function Function: prototype