DEV Community

Cover image for Tipos de objetos console en JavaScript. Parte II.
Cristian Fernando
Cristian Fernando

Posted on • Updated on

Tipos de objetos console en JavaScript. Parte II.

Índice

  1. console.table()
  2. console.trace()
  3. console.time()
  4. console.dir()
  5. console.assert()
  6. Conclusiones
  7. Referencias

1. console.table()

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

const frutas = ["Papaya","Manzana","Mango","Pera"];
console.table(frutas);
Enter fullscreen mode Exit fullscreen mode

arreglos

console.table() con objetos

const persona = {
  nombre:"Juan",
  apellido:"Aguilar",
  edad:26,
  nombreCompleto: function(){
    return this.nombre + " " + this.apellido
  }
}

console.table(persona);
Enter fullscreen mode Exit fullscreen mode

objetos

console.table() con arreglos de objetos

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);
Enter fullscreen mode Exit fullscreen mode

arreglos-de-objetos

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.

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"]);
Enter fullscreen mode Exit fullscreen mode

restringiendo

2. console.trace()

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.

function foo() {
  function bar() {
    console.trace();
  }
  bar();
}

foo();

console.trace();

/*salida: 
bar
foo
<anonymous>
*/
Enter fullscreen mode Exit fullscreen mode

3. console.time() y console.timeEnd()

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:

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");
Enter fullscreen mode Exit fullscreen mode

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

forEach() es un poco mas eficiente que map()

4. console.dir()

Imprime por consola todas las llaves y propiedades de un objeto especificado.

let persona = {
  nombre: "Juan",
  apellido: "Perez",
  edad:45,
  sexo: "M",
  soltero:false
};
console.dir(persona);
Enter fullscreen mode Exit fullscreen mode

dir

5. console.assert()

Aparece un mensaje de error en la consola si la afirmación es falsa. Si la afirmación es verdadera, no aparecerá nada.

let x=3;
let y=5;
let prueba = "Se espera que x siempre sea menor que y"
console.assert(x>y, (x,y, prueba));
Enter fullscreen mode Exit fullscreen mode

La salida seria la siguiente:
assert

Conclusiones 🚩

  • 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


end

Top comments (0)