Tipos de objetos console en JavaScript. Parte I.
Tags: javascript, spanish, webdev
Published: 2021-03-15 12:53:13

#**Índice**   
1. [El objeto `window` y `console`](#id1)
2. [`console` en el browser](#id2)
3. [`console.log()`, el más usado por excelencia](#id3)
4. [`console.warn()`](#id4)
5. [`console.info()`](#id5)
6. [`console.error()`](#id6)
7. [`console.group()` y `console.groupEnd()`](#id7)
8. [Conclusiones](#id8)
9. [Referencias](#id9)


El objeto `console` de JavaScript es ampliamente usado y conocido en el mundo del desarrollo web frontend. La [MDN](https://developer.mozilla.org/es/docs/Web/API/Console) 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](https://developer.mozilla.org/es/docs/Web/API/Console) 

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`**<a name="id1"></a> 
`window` es el objeto global de JavaScript y `console` deriva directamente de este, por tanto está disponible en cualquier archivo .js. 

```js
window.console.log("Hola"); // Hola
console.log("Hola"); //Hola
```
> *Ambos son equivalentes, pero siempre se usa la forma breve.*

## **`console` en el browser**<a name="id2"></a>
¿Qué sucede si intentamos imprimir por consola el objeto `console`?

![img] (https://pics.me.me/console-log-console-it-do-be-like-that-62708601.png)

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

![img2] (https://raw.githubusercontent.com/crisdux/img-dev-to/master/console.gif)

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**<a name="id3"></a> 
Para mensajes generales de registro de información. Es posible imprimir varios valores separados por comas. 

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

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

## **2. `console.warn()`**<a name="id4"></a> 
Muestra un mensaje de advertencia. 

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

## **3. `console.info()`**<a name="id5"></a> 
Muestra un mensaje de información.

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

## **4. `console.error()`**<a name="id6"></a> 
Muestra un mensaje de error.

```js
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:

![img](https://raw.githubusercontent.com/crisdux/img-dev-to/master/console2.gif)


## **5. `console.group()` y `console.groupEnd()`**<a name="id7"></a> 
Crea un nuevo grupo, indentando todos los mensajes subsecuentes en un nuevo nivel. Para retroceder un nivel, se utiliza `groupEnd()`. 

```js
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.

![img](https://raw.githubusercontent.com/crisdux/img-dev-to/master/console3.gif)

---

## **Conclusiones**<a name="id8"></a>  🚩
* `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**<a name="id9"></a>  ❗
* https://developer.mozilla.org/es/docs/Web/API/Console

![continue](https://media.giphy.com/media/l1J3IHzSUmCpXThqo/giphy.gif)