console.log({ myVariable });

Ich glaube, dieser Tweet könnte mein beliebteste Tweet aller Zeiten sein, aber ich bin mir nicht sicher, wie ich das heutzutage überprüfen kann. Ich werde diesen kleinen Trick hier wiederholen, weil Bloggen cool und lustig ist.

Das habe ich früher oft beim Debuggen von JavaScript gemacht

console.log("myVariable: ", myVariable);

Aber jetzt mache ich das, weil es einfach schneller zu tippen ist

console.log({ myVariable });

Und man verpasst nichts in den DevTools

Da dies jetzt ein Blogbeitrag ist, kann ich ein wenig weiter ausholen...

Die dort angezeigte Ausgabe (und eigentlich `console.log` selbst) ist eine Sache der DevTools, aber die Syntax nicht. Indem ich geschweifte Klammern in JavaScript verwende, erstelle ich ein Objekt. Ich muss kein Objekt zuweisen, es kann einfach *sein*.

{
  foo: "bar"
}

Das sieht man oft, wenn man ein Objekt an eine Funktion übergibt, wie `myFunction({ config: options });`. Der „Trick“ ist, dass man beim Erstellen eines Objekts die Kurzschreibweise verwenden kann, indem man *nur* eine Variable angibt, was sie impliziert. Also so

const fruit = "apple";

// Shorthand
let x = {
  fruit
}

console.log(x);

// Normal way, literally the same exact thing
x = {
  "fruit": fruit
}

console.log(x); // identical

Wenn Sie eine Variable haben und diese wie `console.log({ myVariable });` protokollieren, verwenden Sie diese Kurzschreibweise für die Objekterstellung und sie wird wie das Objekt protokolliert, zu dem sie wird.

Ein Nachteil dieser Idee ist, dass die DevTools manchmal wählen, sie als ▶ Objekt auszugeben und Sie klicken müssen, um den Wert zu sehen. Ich kenne die Heuristik nicht, wann sie das tut und wann nicht. Wenn Ihnen das nicht gefällt oder das Ausgabeformat eines Objekts im Allgemeinen, bevorzugen Sie vielleicht das Format `console.table({ myVariable });`