Noticias Raspberry Pi

Usando console.log() en JavaScript

Este tutorial le mostrará cómo usar la función console.log() en JavaScript.

función javascript console.log()

La función console.log() es una parte increíblemente útil de JavaScript que puede usar para depurar su código.

Esta función le permite escribir mensajes a la consola desde su JavaScript. Le permite depurar fácilmente su código sobre la marcha, ya que puede imprimir todos los valores requeridos si algo sale mal.

Aún mejor, casi todos los navegadores web de escritorio son compatibles con la consola, y puede abrirla fácilmente presionando F12 en su teclado.

En las siguientes secciones, le mostraremos exactamente cómo puede usar esta función y le mostraremos cuán útil puede ser.

Descubrirá rápidamente que usar console.log() en JavaScript es simple y esencial para depurar código.

Sintaxis de la función console.log() en JavaScript

En esta sección, exploraremos rápidamente la sintaxis de la función console.log() en JavaScript. La sintaxis le dice algunas cosas, como los parámetros requeridos por la función.

Lo primero que debemos mencionar es que la función log() es un método del objeto «consola». Este objeto es implementado por navegadores web u otros clientes y nos permite imprimir texto en la consola.

A continuación puede ver la sintaxis de JavaScript para la función console.log().

Esta función puede aceptar múltiples parámetros, pero solo puede usar uno.

JavaScript imprimirá los valores que pases en esta función a la consola. Este valor puede ser una cadena que contenga un mensaje o un objeto.

Objetos: Si pasa un objeto a la función console.log(), sus valores se imprimirán en la consola.

Sin embargo, tenga en cuenta que los navegadores web modernos pueden mostrar una referencia al objeto, por lo que es posible que los valores no representen lo que se configuró cuando activó el registro. Hay una forma de evitar este problema que discutiremos más adelante.

Puede pasar varios objetos en una sola llamada de función separándolos con una coma (,).

Canales: Como se mencionó anteriormente, puede pasar una cadena en lugar de un objeto. JavaScript imprimirá esta cadena en la consola.

Si esta cadena incluye cadenas de sustitución, el siguiente parámetro se utilizará como parte de la sustitución.

La función console.log() no devuelve ningún valor.

Ejemplos del uso de la función console.log() en JavaScript

Esta sección mostrará algunos ejemplos del uso de la función console.log() en JavaScript.

Con suerte, al final de esta sección comprenderá cuál es la mejor manera de usarlo y cómo funciona console.log().

Registro de una cadena

Una de las formas principales de usar la función console.log() de JavaScript es imprimir mensajes en la consola.

Simplemente puede pasar una cadena a la función console.log(). El uso de una función como esta es útil cuando necesita que se imprima un mensaje si se alcanza o no una determinada ruta de código.

Por ejemplo, a menudo lo hemos usado para registrar la ruta que terminó tomando nuestro código, o cuando algo impide que el script se ejecute por completo.

Para demostrar esto, escribamos un breve ejemplo donde usamos «console.log()» y pasamos la cadena «Este sitio web es TecnoPasion.com».

Si tuviera que ejecutar este fragmento de código, terminaría con el siguiente mensaje impreso en la consola.

Contenido del objeto de registro

La función console.log() también muestra información almacenada en un objeto JavaScript. Toda la estructura del objeto se registra en la consola cuando se registra un objeto.

Registro de un objeto como referencia

Para presentar los objetos de registro, comenzaremos nuestro ejemplo declarando un objeto usando la palabra clave const con el nombre «sitio web». Después de declarar la variable, pasaremos el objeto a «console.log()» desde JavaScript.

Cuando se usa de esta manera, los navegadores modernos guardarán una referencia al objeto en lugar de una copia del objeto en ese momento exacto.

Después de ejecutar esta pieza de JavaScript, obtendrá un resultado similar al que se muestra a continuación. Puede ver tanto las propiedades del objeto como el prototipo de ese objeto.

Los objetos se guardan como referencias.

Ahora, aunque pasar un objeto a console.log() es un proceso simple, hay una trampa para esto. Los navegadores web modernos generalmente solo pasan una referencia al objeto.

Esto significa que si el objeto se modifica después de haberlo registrado, el navegador web actualizará el valor registrado.

Para ilustrar este comportamiento, tomemos el mismo ejemplo que antes. Pero esta vez, después de guardar el objeto, cambiaremos la propiedad «título» a «Prueba de referencia».

Como queremos modificar el contenido del objeto, lo declararemos usando la palabra clave let de JavaScript.

A continuación puede ver que aunque guardamos el objeto antes de cambiar el valor, la consola se actualizó con los nuevos valores.

Registro seguro de objetos en JavaScript

Es posible solucionar este problema utilizando el objeto JSON. Lo que vamos a hacer es convertir el objeto en una cadena usando «JSON.stringify()» para convertir el objeto en una cadena, seguido inmediatamente por «JSON.parse()» para convertir esa cadena nuevamente en un objeto.

Al hacer esto, esencialmente estamos creando una nueva copia del objeto, lo que significa que cualquier cambio realizado después del hecho no afectará el valor que guardó.

Lo usamos en el siguiente ejemplo de JavaScript del uso de la función console.log().

Después de ejecutar el ejemplo anterior, debería terminar con el siguiente texto guardado en su consola. Con este resultado, puede ver cómo los cambios realizados en el objeto no arruinaron el registro original.

Registro con sustitución de cadenas

JavaScript también le permite crear mensajes más largos y complicados para console.log() mediante la sustitución de cadenas.

Cuando utiliza la sustitución de cadenas, el primer parámetro se convierte en su mensaje. Cada parámetro después del primero es el valor que desea agregar a su cadena.

Tenga en cuenta que para cada cadena de sustitución que tenga, debe tener un valor para insertar en ella. Además, el orden es muy importante.

Cadenas de sustitución de cadenas

A continuación se encuentran las cadenas que serán reemplazadas por la función «console.log()» al procesar su mensaje en JavaScript.

%o o %O: sustitutos en un objeto de JavaScript. En su consola, debería poder hacer clic en este resultado para obtener más información. Este comportamiento difiere dependiendo de su navegador web. %d o %i – Esto le permite reemplazar con un número entero. JavaScript convertirá diferentes tipos de números durante la sustitución. %s: JavaScript reemplazará estos caracteres con una cadena. %f: se generará un número de coma flotante en lugar de esta cadena de sustitución.

Tenga en cuenta si usted es usando firefox también puede formatear la precisión de los números. Para hacer esto, use un punto (.) seguido del número de lugares decimales (número flotante) o el número de dígitos (enteros).

Por ejemplo, con un número entero, podría usar «%.2d» si quisiera un número de dos dígitos en todos los casos.

Ejemplo de uso de sustitución de cadenas con console.log()

Ahora que conoce las cadenas de sustitución, permítanos mostrarle cómo usarlas. Con esto, pasaremos una cadena simple con dos sustituciones.

La primera sustitución es una cadena (%s) y la segunda es un número entero (%i). Recuerde el orden en que especifica sus sustituciones porque los parámetros subsiguientes se intercambiarán usando ese orden.

Para nuestro ejemplo, especificamos la cadena «Mundo» como segundo parámetro y el número 20 como tercer parámetro.

Después de ejecutar el ejemplo anterior, debería terminar con lo siguiente guardado en su consola. Puede ver cómo la función console.log() de JavaScript intercambió las cadenas de sustitución con los valores que especificamos en los parámetros de la función.

Conclusión

En este punto de la guía, ahora debería tener una buena comprensión de cómo puede usar la función console.log() en JavaScript.

Esta característica le permite registrar fácilmente mensajes en la consola, lo que es especialmente útil para depurar su código.

Comente a continuación si tiene alguna pregunta sobre el uso de la función console.log().

Consulte nuestros muchos otros tutoriales de JavaScript para obtener más información sobre este útil lenguaje de programación. Además, si desea aprender un nuevo lenguaje de programación, tenemos muchas otras guías de codificación.

Actualizaciones semanales directamente a su bandeja de entrada

¡Reciba nuestros proyectos de Raspberry Pi, tutoriales de codificación, guías de Linux y más!

Suscribir

También puede gustarte...