Tipos de objetos console en JavaScript. Parte I.

Índice

1. El objeto window y console
2. console en el browser
3. console.log(), el más usado por excelencia
4. console.warn()
5. console.info()
6. console.error()
7. console.group() y console.groupEnd()
8. Conclusiones
9. Referencias

El objeto console de JavaScript es ampliamente usado y conocido en el mundo del desarrollo web frontend. La MDN define al objeto console de la siguiente manera:

El objeto console provee acceso a la consola de depuración de los navegadores, el cual puede ser accedido desde cualquier método global, window en el ámbito de navegación. — MZN

La gran mayoria de los programadores novatos únicamente conoce el famosísimo console.log() y lo usa ampliamente en sus desarrollos, pero adicionalmente existen otros métodos (algunos bastante interesantes y peculiares) que pueden ser usados dependiendo de los requerimientos que se tengan; este breve post se intentara resumir los que considero son los más importantes. 😎

El objeto window y console

window es el objeto global de JavaScript y console deriva directamente de este, por tanto está disponible en cualquier archivo .js.

window.console.log("Hola"); // Hola
console.log("Hola"); //Hola

Ambos son equivalentes, pero siempre se usa la forma breve.

console en el browser

¿Qué sucede si intentamos imprimir por consola el objeto console?

Si ejecutamos esta línea de código en la consola de cualquier navegador web, la salida es la siguiente:

Despliega todos los métodos disponibles del objeto console, como puedes ver, .log solo es uno de ellos.

1. console.log(), el más usado por excelencia

Para mensajes generales de registro de información. Es posible imprimir varios valores separados por comas.

let name = "Cristian";
let last_name = "Villca";

console.log(`Hola, soy ${name} ${last_name}`); 
//"Hola, soy Cristian Villca"

2. console.warn()

Muestra un mensaje de advertencia.

console.warn("Base de datos no respaldada, cuidado!");
//Base de datos no respaldada, cuidado!

3. console.info()

Muestra un mensaje de información.

console.info("Usuario creado satisfactoriamente.");
//Usuario creado satisfactoriamente.

4. console.error()

Muestra un mensaje de error.

console.error("No se pudo eliminar el registro");
//No se pudo eliminar el registro

Todas las salidas se pueden apreciar mejor en la siguiente imagen:

5. console.group() y console.groupEnd()

Crea un nuevo grupo, indentando todos los mensajes subsecuentes en un nuevo nivel. Para retroceder un nivel, se utiliza groupEnd().

console.group("Listado de paises");
  console.log("--Listado de paises--");
  console.log("Bolivia");
  console.log("Peru");
  console.log("Brasil");
  console.log("Francia");
  console.log("Alemania");
console.groupEnd();

Los console englobados en console.group() se observan como una especie de combo box o select en la salida de la consola.

---

Conclusiones 🚩

• console es hijo directo del objeto global window.
• Si se ejecuta console.log(console) la salida serán todos los métodos disponibles del objeto console.
• console.log() es el más popular y el más usado, pero no el único.
• console.warn(), console.info(), console.error() devuelven una salida estilizada por consola con íconos, de esta manera visualmente el output es más intuitivo.

Referencias ❗

• https://developer.mozilla.org/es/docs/Web/API/Console