Tipos de objetos console en JavaScript. Parte II.
Tags: javascript, webdev, beginners, spanish
Published: 2021-03-22 14:09:09

#**Índice**   
1. [`console.table()`](#id1)
2. [`console.trace()`](#id2)
3. [`console.time()`](#id3)
4. [`console.dir()`](#id4)
5. [`console.assert()`](#id5)
6. [Conclusiones](#id6)
7. [Referencias](#id7)

## **1. `console.table()`** <a name="id1"></a> 
Muestra datos tabulares como una tabla.
Recibe un parámetro obligatorio `data` (que debe ser un arreglo o un objeto) y un parámetro opcional `columns` que selecciona un subconjunto de datos a mostrar.
*Ejemplos:*

### **`console.table()` con arreglos**
```javascript
const frutas = ["Papaya","Manzana","Mango","Pera"];
console.table(frutas);
```
![arreglos](https://raw.githubusercontent.com/crisdux/img-dev-to/master/consoleTable/consoleTableArray.gif)

### **`console.table()` con objetos**
```javascript
const persona = {
  nombre:"Juan",
  apellido:"Aguilar",
  edad:26,
  nombreCompleto: function(){
    return this.nombre + " " + this.apellido
  }
}

console.table(persona);
```

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

### **`console.table()` con arreglos de objetos**
```javascript
const perros = [
  {id:1, nombre:"Cachuchin",raza:"Mestizo",macho:true},
  {id:2, nombre:"Pelusa",raza:"Cooker",macho:false},
  {id:3, nombre:"Coco",raza:"Labrador",macho:true},
];

console.table(perros);
```

![arreglos-de-objetos](https://raw.githubusercontent.com/crisdux/img-dev-to/master/consoleTable/consoleTableArrayDeObjetos.gif)

### **Restringiendo columnas**
Imaginemos que en el último ejemplo solo se desea ver la columna que contiene el nombre de los perros, le pasamos como 2do parámetro un arreglo con los nombres de las columnas que se quieren ver en la salida de la consola.

```javascript
const perros = [
  {id:1, nombre:"Cachuchin",raza:"Mestizo",macho:true},
  {id:2, nombre:"Pelusa",raza:"Cooker",macho:false},
  {id:3, nombre:"Coco",raza:"Labrador",macho:true},
];

console.table(perros,["nombre"]);
```

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

## **2. `console.trace()`** <a name="id2"></a>
`console.trace()`está muy relacionado con el **Call Stack** o **Pila de Llamada** en JavaScrpit, en pocas palabras y de manera muy básica, devuelve en qué orden se van ejecutando nuestras funciones en el programa.
 
```javascript
function foo() {
  function bar() {
    console.trace();
  }
  bar();
}

foo();

console.trace();

/*salida: 
bar
foo
<anonymous>
*/
```

## **3. `console.time()` y `console.timeEnd()`** <a name="id3"></a> 
Inicia un temporizador que puede usar para realizar un seguimiento de la duración de una operación. Le da a cada temporizador un nombre único y puede tener hasta 10.000 temporizadores ejecutándose en una página determinada. Cuando llame a `console.timeEnd()` con el mismo nombre, el navegador generará el tiempo, en milisegundos, transcurrido desde que se inició el temporizador.
*Por ejemplo:*

```javascript
const numeros = Array(50000).fill(5);

//forEach()
console.time("forEach");
const salidaFor = numeros.forEach(x => x*5);
console.timeEnd("forEach");

//map()
console.time("map");
const salidaMap = numeros.map(x => x*5);
console.timeEnd("map");
```
En este breve ejemplo se comparan los métodos `map()` y `forEach()` recorriendo un arreglo de 50000 elementos para ver cuál es más eficiente. 

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

> *`forEach()` es un poco mas eficiente que `map()`*

## **4. `console.dir()`** <a name="id4"></a> 
Imprime por consola todas las llaves y propiedades de un objeto especificado.

```javascript
let persona = {
  nombre: "Juan",
  apellido: "Perez",
  edad:45,
  sexo: "M",
  soltero:false
};
console.dir(persona);
```
![dir](https://raw.githubusercontent.com/crisdux/img-dev-to/master/consoleDir.gif)

## **5. `console.assert()`** <a name="id5"></a> 
Aparece un mensaje de error en la consola si la afirmación es falsa. Si la afirmación es verdadera, no aparecerá nada.

```javascript
let x=3;
let y=5;
let prueba = "Se espera que x siempre sea menor que y"
console.assert(x>y, (x,y, prueba));
```
La salida seria la siguiente:
![assert](https://raw.githubusercontent.com/crisdux/img-dev-to/master/consoleAssert.gif)

## **Conclusiones**<a name="id6"></a> 🚩
* **`console.table()`** imprime por consola un objeto o un arreglo de una manera más gráfica y sencilla de entender a simple vista. 
* **`console.trace()`** imprime la "traza" en que las funciones se van ejecutando en el programa, concepto muy relacionado con el **Call Stack** de JavaScript; útil para encontrar bugs complejos.
* **`console.time()`** y **`console.timeEnd()`** encapsulan una porción de código para evaluar cuanto timpo (en milisegundos) tarda en ejecutarse; útil para evaluar optimizaciones.
* **`console.dir()`** muestra por consola todas las llaves y propiedades de un objeto, no es muy usada en la práctica.
* **`console.assert()`** lanza un error si cierta condición no se cumple en el programa: útil para debuggin básico. 

## **Referencias**<a name="id7"></a> ❗
* https://developer.mozilla.org/es/docs/Web/API/Console

---

![end](https://media.giphy.com/media/26AHC0kdj8IeLkmBy/giphy.gif)