Console.log() en JavaScript: ¿Para que sirve? Ejemplos

El método console.log() en JavaScript es una herramienta esencial para cualquier desarrollador. ¿Qué es y para qué sirve? Te permite depurar tu código mostrando información directamente en la consola del navegador. En este artículo, exploraremos sus características, funciones, y te ofreceremos ejemplos prácticos que te ayudarán a entender cómo usarlo eficazmente en tus proyectos.

1. ¿Qué es console.log () en JavaScript?

console.log es un método en JavaScript que pertenece al objeto console. Su función principal es enviar información a la consola del navegador, lo que resulta útil para depurar y entender el comportamiento de un código.

En otras palabras, nos permite verificar que el código JavaScript que estamos escribiendo funciona correctamente antes de su implementación final.

1.1. Ejemplo para entender como funciona console.log() en JavaScript:

Imagina que estás creando una calculadora simple.

PRIMERO: Escribes el siguiente código:

let numero1 = 5;
let numero2 = 3;
let resultado = numero1 + numero2;Lenguaje del código: JavaScript (javascript)

Explicación de este código:

1. Creamos dos variables JavaScript:
   • let numero1 = 5;: Creamos una variable llamada numero1 y le asignamos el valor 5.
   • let numero2 = 3;: Creamos otra variable llamada numero2 y le asignamos el valor 3.
2. Realizamos una operación de suma:
   • let resultado = numero1 + numero2;: Creamos una tercera variable llamada resultado. En esta línea, sumamos los valores de numero1 y numero2, que son 5 y 3, respectivamente. El resultado de esta suma es 8, y ese valor se asigna a la variable resultado.

SEGUNDO: Hasta aquí el código suma dos números y almacena el resultado en la variable resultado. Pero, ¿cómo sabes si la suma se hizo correctamente? Aquí es donde entra en juego console.log.

Agregas esta línea después de la suma:

console.log(resultado);Lenguaje del código: JavaScript (javascript)

El código final quedaría así:

let numero1 = 5;
let numero2 = 3;
let resultado = numero1 + numero2;

console.log(resultado);Lenguaje del código: JavaScript (javascript)

TERCERO: Cuando ejecutes este código, en la consola de tu navegador aparecerá el número 8. Esto te confirma que la suma se realizó correctamente y que tu calculadora está funcionando como esperabas.

¿Y como ejecutar console.log() y ver el resultado en la consola? Te lo explico en el siguiente punto.

2. ¿Cómo usar console.log() en JavaScript?

Bien, para entender este paso y poder comprender mejor como funciona y como manejar este console.log(), te sugiero primero tener conocimientos básicos sobre como crear una página web y como visualizarla en un navegador como Google.

Estos conocimientos incluyen:

Instalar un editor de código, crear la estructura HTML y sincronizarlo con los archivos CSS y JavaScript (en este último archivo incluiremos los código JavaScript para visualizar el funcionamiento de console.log ). Para estos pasos puedes seguir el siguiente link donde explicamos detalladamente todo sobre como instalar y usar VScode para tus páginas web (no te preocupes, es mas sencillo de lo que parece)

AHORA BIEN……..veamos paso a paso como puedes usar console.log():

1. ESCRIBE TU CÓDIGO JAVASCRIPT:
   • Dentro del script de tu página web, escribe el código junto el console.log().
   • Dentro del script pondríamos:

let numero1 = 5;
let numero2 = 3;
let resultado = numero1 + numero2;

console.log(resultado);Lenguaje del código: JavaScript (javascript)

2. VISUALIZA LA PÁGINA EN EL NAVEGADOR:
   • Una vez introducido el código anterior, visualízalo en el navegador (por ejemplo, haciendo clic derecho en el archivo .html dentro de tu VScode y seleccionando «Open wth live server»)
3. ABRE LA CONSOLA DEL NAVEGADOR: Puedes llevar a cabo estas opciones
   • F12: Una vez abierta la página en el navegador, la forma más común es presionar la tecla F12 en tu teclado una vez que hayas abierto tu página en el navegador
   • Clic derecho: Haz clic derecho en cualquier parte de la página y selecciona «Inspeccionar» y se abrirá la consola del navegador.
4. VISUALIZAR EL RESULTADO: Ahora, una vez visualizada la consola del navegador, dirígete a la pestaña que dice Console, y desde aquí podrás ver el resultado del script que hayamos introducido anteriormente.

Otro ejemplo, un poco más complejo, para que realices siguiendo los pasos anteriores si es que te atreves!

Copia y pega este código en el script y visualiza el resultado en la consola:

function calcularAreaCirculo(radio) {
  const pi = 3.14159;
  let area = pi * radio * radio;
  console.log("El área del círculo es:", area);
}

calcularAreaCirculo(5);Lenguaje del código: JavaScript (javascript)

En este caso:

1. Definimos una función llamada calcularAreaCirculo que toma como parámetro el radio de un círculo.
2. Dentro de la función, calculamos el área del círculo y la almacenamos en la variable area.
3. Usamos console.log para mostrar un mensaje en la consola junto con el valor del área.

Cuando llames a la función con calcularAreaCirculo(5), en la consola verás:

El área del círculo es: 78.53975Lenguaje del código: CSS (css)

EN SÍNTESIS:

Para usar console.log en JavaScript, simplemente llamas a la función console.log() y colocas dentro de los paréntesis lo que deseas imprimir. Esto puede ser texto, números, valores de variables, o incluso resultados de expresiones.

2.1. Algunos ejemplos usando console.log() en JavaScript:

2.1.1. Imprimir un mensaje de texto usando console.log():

console.log("Hola, mundo!");Lenguaje del código: JavaScript (javascript)

Este código imprimirá «Hola, mundo!» en la consola.

2.1.2. Imprimir el valor de una variable usando console.log():

let nombre = "Ana";
console.log(nombre);Lenguaje del código: JavaScript (javascript)

Este código imprimirá «Ana» en la consola, que es el valor de la variable nombre.

2.1.3. Imprimir el resultado de una operación:

let a = 5;
let b = 3;
console.log(a + b);Lenguaje del código: JavaScript (javascript)

Este código imprimirá 8, que es el resultado de la suma de a y b.

2.1.4. Imprimir múltiples valores:

Puedes imprimir múltiples valores o expresiones en una sola llamada a console.log separándolos por comas.

let x = 10;
let y = 20;
console.log("El valor de x es:", x, "y el valor de y es:", y);Lenguaje del código: JavaScript (javascript)

Este código imprimirá «El valor de x es: 10 y el valor de y es: 20».

2.1.5. Imprimir objetos o arrays

Puedes imprimir estructuras de datos completas como objetos o arrays.

let persona = {
    nombre: "Carlos",
    edad: 30
};
console.log(persona);Lenguaje del código: JavaScript (javascript)

Este código imprimirá el objeto persona con sus propiedades y valores en la consola.

2.1.6. Uso de console.log() dentro de funciones:

Puedes usar console.log dentro de funciones para verificar los valores que están siendo procesados.

function suma(a, b) {
    console.log("Sumando:", a, "+", b);
    return a + b;
}
suma(2, 3);Lenguaje del código: JavaScript (javascript)

Este código imprimirá «Sumando: 2 + 3» antes de devolver el resultado de la función.

3. ¿Para que sirve console.log() en JavaScript?

Si bien hasta este punto dijimos que la principal función es verificar que el código JavaScript este correctamente implementado antes de su ejecución final, también existen otros usos que podemos hacer de él.

Aquí están sus usos más comunes:

1. Depuración:
   • Puedes usar console.log() para imprimir el valor de variables en diferentes momentos de la ejecución del programa, lo que te ayuda a identificar si están tomando los valores correctos.
   • Permite ver por dónde está pasando el código, ayudándote a entender su flujo lógico y a detectar dónde podrían estar ocurriendo errores.
2. Información y Feedback:
   • Puedes usar console.log() para proporcionar información útil sobre lo que está ocurriendo en el programa, lo que es especialmente útil cuando colaboras con otros desarrolladores.
   • Puedes imprimir mensajes cuando ocurren ciertos eventos, como clics de botones o cambios en el estado de la aplicación.
3. Pruebas rápidas:
   • Te permite probar fragmentos pequeños de código y ver inmediatamente el resultado, sin necesidad de modificar el archivo principal o esperar a que se recargue la página.
4. Perfilar el rendimiento:
   • Aunque hay herramientas más avanzadas para medir el rendimiento, console.log() puede ser utilizado para medir cuánto tiempo toma la ejecución de ciertas partes del código.

En resumen, console.log() es esencial para cualquier desarrollador que quiera entender y controlar lo que su código está haciendo en tiempo real, facilitando el proceso de desarrollo y depuración.

4. Preguntas frecuentes y resumen sobre console.log() en JS.