itemtype='https://schema.org/WebPage' itemscope='itemscope' class="page-template-default page page-id-1565 page-child parent-pageid-1563 ast-desktop ast-separate-container ast-right-sidebar astra-4.6.14 ast-single-post ast-inherit-site-logo-transparent ast-hfb-header ast-normal-title-enabled">

001. Objeto console

En los siguientes capítulos vamos a ver algunos objetos que son propios de Javascript, que cuando estamos haciendo proyectos reales, son muy útiles e importante conocerlos. En este primer capítulo vamos a ver el objeto console.

En estos capítulos hemos estado utilizando el objeto console para realizar muchos ejms.

console es un objeto que ya reconoce Javascript, pero si mandamos a la misma consola la siguiente sintaxis.

console.log(console);

Podemos ver todas las características que tiene. Todas las propiedades, los métodos como pueden ser memory, que es el espacio en memoria que está usando en máquina, debug, error, info… Salvo la propiedad memory, el resto son métodos.

La consola de Javascript también nos permite mandar mensajes como si fueran alertas, errores, información, y por supuesto, logs, que es el tipo de console que hemos visto hasta ahora.

Ejm

console.log("Esto es un registro de lo que ha pasado");
console.error("Esto es un error");
console.warn("Esto es un aviso");
console.info("Esto es información");

Nota: console.info() es muy parecido a console.log().

Veamos un ejm para ver características.

Ejm

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Objeto console</title>
  </head>

  <body>
    <h1>Objeto console</h1>

    <script>
      let nombre = "Francisco",
        apellido = "Paredes",
        edad = 51;

      console.log(nombre);
      console.log(apellido);
      console.log(edad);

      // Podemos pasar todas las variables en un mismo console
      console.log(nombre, apellido, edad);

      // Interpolar texto con variables
      console.log(
        `Hola, mi nombre es ${nombre} ${apellido} y tengo ${edad} años`
      );

      // Uso de comodines como en otros lenguajes de programación
      console.log(
        "Hola, mi nombre es %s %s y tengo %d",
        nombre,
        apellido,
        edad,
        "años"
      );
    </script>
  </body>
</html>

Existe otra característica que es console.clear() que lo que va a hacer es limpiar todo lo que haya estado en la consola.

Veamos más ejms.
Ejm
console.log(document); // Muestra el documento HTML literalmente
console.dir(window): // Muestra las propiedades, métodos y constructores del objeto window
console.dir(document); // Muestra como en el window todas las propiedades, objetos, métodos,
atributos que tiene el document

Hacer grupos en la consola

Podemos iniciar un grupo en la consola, vamos a verlo con un ejm.

Ejm

console.group("Cursos"); // Empieza el grupo de consoles
console.log("Curso Javascript");
console.log("Curso de PHP");
console.groupEnd(); // Termina el grupo de consoles

Hacer tablas

Lo haríamos con la siguiente sintaxis.

Ejm

console.table(Object.entries(console).sort());

Lo que hace es mostrarme una tabla ordenada alfabéticamente con todas las propiedades y métodos del objeto console.

Mostrar arrays en forma de tabla

La sintaxis sería la siguiente.

Ejm

      const numeros = [1, 2, 3, 4, 5],
        vocales = ["a", "e", "i", "o", "u"];

      console.table(numeros);
      console.table(vocales);

Mostrar objetos en forma de tabla

Se haría de forma parecida a como se hace con los arrays.

      const francisco = {
        nombre: "Francisco",
        apellido: "Paredes",
        edad: 51,
      };

      console.table(francisco);

Mostrar tiempo que tarda el código

Veamos un ejm

Ejm

      console.time("Cuanto tiempo tarda el código en cargarse");

      const arr = Array(1000000);
      for (let i = 0; i < arr.length; i++) {
        arr[i] = i;
      }

      console.timeEnd("Cuanto tiempo tarda el código en cargarse");
      // Tanto en console.time() como en console.timeEnd hay que poner el mismo parámetro para que funcione

Cuantas veces se repite una línea de código

Veamos un ejm.

Ejm

      for (i = 0; i <= 100; i++) {
        console.count("Código for: ");
        console.log(i);
      }

console.assert()

Se trata como de una mini librería para hacer pruebas. Veamos un ejm.

Ejm

      let x = 3,
        y = 2,
        pruebaXY = "Se espera que X sea siempre menor que Y";

      console.assert(x < y, { x, y, pruebaXY });

Estos son algunos de los métodos más importantes a la hora en que estemos trabajando con nuestra consola.

Ejercicio completo

He aquí la sintaxis de un ejercicio completo con los diferentes console.

Ejm

// Ejercicio: Uso de los diferentes tipos de console

// Paso 1: Declarar variables
const nombre = "Juan";
const edad = 30;
const listaCompras = ["Manzanas", "Plátanos", "Leche", "Pan"];
const persona = {
nombre: "María",
edad: 25,
ocupacion: "Ingeniera",
};

// Paso 2: Utilizar diferentes métodos de console

// Método console.log() para mostrar mensajes informativos
console.log("Bienvenido a la aplicación.");
console.log("El nombre es:", nombre);
console.log("La edad es:", edad);

// Método console.error() para mostrar mensajes de error
console.error("¡Error! La operación no se pudo completar.");

// Método console.warn() para mostrar advertencias
console.warn("¡Atención! Quedan pocos productos en el inventario.");

// Método console.info() para mostrar información detallada
console.info("La persona es:", persona);

// Método console.table() para mostrar datos en forma de tabla
console.table(listaCompras);

// Método console.group() y console.groupEnd() para agrupar mensajes
console.group("Detalles de la persona:");
console.log("Nombre:", persona.nombre);
console.log("Edad:", persona.edad);
console.log("Ocupación:", persona.ocupacion);
console.groupEnd();

// Método console.time() y console.timeEnd() para medir el tiempo de ejecución
console.time("Tiempo de ejecución");
for (let i = 0; i < 1000000; i++) {
// Simulamos un bucle para medir el tiempo de ejecución
}
console.timeEnd("Tiempo de ejecución");
Scroll al inicio