Shorthand-Syntax für die Konsole

the next big thing  –  0 Kommentare

Der bekannte JavaScript-Entwickler Wes Bos hat in einem Tweet empfohlen, die Parameter von console.log-Aufrufen in geschweifte Klammern zu verpacken. Das führe dazu, dass neben dem Wert auch der Namen der zugehörigen Variable ausgegeben werde. Warum?

Der ursprüngliche Tweet stammt bereits von November 2016, sein Inhalt ist aber nach wie vor aktuell. Darin gibt Wes Bos, ein bekannter JavaScript-Entwickler, folgenden Ratschlag:

"Wrap curly brackets around your console.log arguments to see the variable name when logged."

Als Beispiel führt er folgenden Code an:

const isCool = true;
const age = 100;
const name = 'wes';

console.log(isCool, age, name);
// => true 100 wes

console.log({ isCool, age, name });
// => { isCool: true, age: 100, name: 'wes' }

Es liegt auf der Hand, dass die zweite Ausgabe weitaus lesbarer und hilfreicher ist, beispielsweise beim Debuggen von Programmcode. Doch wie und warum funktioniert das?

Sein einziger Hinweis lautet:

"This takes advantage of ES6 shorthand syntax"

Prinzipiell erklärt dieser Satz tatsächlich, wie und warum das funktioniert – allerdings hilft er nur jenen, die bereits wissen, was es mit der sogenannten Shorthand-Syntax von ECMAScript 2015 auf sich hat: Wer das nicht weiß, weiß es nach dem Lesen des Satzes auch nicht (und wer es weiß, braucht den Tipp vermutlich als Ganzes nicht).

Die Shorthand-Syntax ist ein neues Sprachmerkmal von JavaScript, das im Rahmen von ECMAScript 2015 eingeführt wurde. Sie betrifft die Schreibweise von Objekten, die in JavaScript technisch gesehen eher Dictionaries entsprechen, die Key-Value-Paare enthalten. Die klassische Objektdefinition sieht daher wie eine Liste solcher Wertepaare aus:

{
isCool: true,
age: 100,
name: 'wes'
}

Gibt man die Werte nun nicht inline an, sondern sind diese bereits in eigenständigen Variablen gespeichert, lässt sich das Objekt wie folgt definieren:

{
isCool: isCool,
age: age,
name: name
}

Da diese Schreibweise in höchstem Maße redundant und lästig ist, wurde mit ECMAScript 2015 die Option eingeführt, den Key mitsamt dem Doppelpunkt in diesem Fall zu streichen: Übrig bleibt allein der Wert, der als Key und als Value gleichermaßen verwendet wird. Dadurch reduziert sich die Objektdefinition deutlich:

{
isCool,
age,
name
}

Selbstverständlich lässt sich dieses Objekt auch problemlos in einer einzigen Zeile schreiben:

{ isCool, age, name }

Und genau das macht sich das ursprüngliche Beispiel zu Nutze. Die Zeile

console.log({ isCool, age, name });

gibt also an Stelle von drei einzelnen Werten ein Objekt mit drei Eigenschaften aus, die inline definiert werden, und deren Werte den gleichnamigen Variablen entsprechen. Deshalb erfolgt die Ausgabe als Key-Value-Paare, was dazu führt, dass neben den Werten der Variablen auch deren Namen ausgegeben werden.

Im Grunde handelt es sich also um einen äußerst einfachen Trick, der aber äußerst effizient sein kann, wenn man häufig mit Ausgaben auf der Konsole zu tun hat.

tl;dr: Die Shorthand-Syntax von ES2015 ermöglicht das vereinfachte Definieren von Objekten, deren Werte gleichnamigen Variablen entsprechen. Diese Syntax kann man sich bei Ausgaben auf die Konsole zu Nutze machen, um besser lesbare und nachvollziehbare Ausgaben zu erhalten.