console.log({ miVariable });

Creo que este podría ser mi tweet más popular de todos los tiempos, pero no estoy seguro de cómo verificarlo en estos días. Repetiré este pequeño truco aquí porque escribir blogs es genial y divertido.

Solía ​​hacer esto mucho mientras depuraba JavaScript:

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

Pero ahora hago esto porque es más fácil escribir rápidamente:

console.log({ myVariable });

Y no te perderás nada en DevTools:

Ahora que esto es una publicación de blog, puedo elaborar un poco…

La visualización de salida allí (y en realidad, console.logen sí misma) es cosa de DevTools, pero la sintaxis no lo es. Al usar llaves en JavaScript, estoy creando un objeto. No tengo que asignar un objeto a nada, puede ser simplemente .

{  foo: "bar"}

Esto se ve mucho cuando se pasa un objeto a una función, como myFunction({ config: options });. El “truco” es que cuando creas un objeto, puedes “abreviarlo” proporcionando sólo una variable, lo que lo hace implícito). Like so:

const fruit = "apple";// Shorthandlet x = {  fruit}console.log(x);// Normal way, literally the same exact thingx = {  "fruit": fruit}console.log(x); // identical

Cuando tienes una variable y la registros como si console.log({ myVariable });estuvieras usando esa sintaxis abreviada de creación de objetos y se registra como el objeto en el que se convierte.

Un punto en contra de esta idea es que a veces DevTools elige generarlo como ▶ Objeto y hay que hacer clic para abrir y ver el valor. No sé cuáles son las heurísticas de cuándo elige hacer eso y cuándo no. Si no te gusta eso, o el formato de salida de un objeto en general, quizás prefieras el console.table({ myVariable });formato: