Sintaxis básica de JavaScript: comentarios, console.log y variables (var, let, const)

Introducción

JavaScript es el lenguaje que da vida a las páginas web y, hoy en día, también se usa en el backend con Node.js, en aplicaciones de escritorio y hasta en dispositivos embebidos. Si estás empezando a programar o querés consolidar las bases, conocer bien su sintaxis más elemental es el primer paso para escribir código legible, evitar errores sutiles y avanzar hacia temas más complejos como closures, promesas o módulos.

Este tutorial está dirigido a quienes ya tienen nociones de programación (variables, bucles, funciones) pero aún no han trabajado con JavaScript, o a quienes vienen de otros lenguajes y quieren ver cómo se expresan aquí los conceptos de comentarios, salida por consola y declaración de variables. Aprenderás:

• Los distintos tipos de comentarios y cuándo usarlos.
• Cómo usar console.log para depurar y mostrar información.
• Las diferencias entre var, let y const en cuanto a alcance, hoisting y mutabilidad.
• Qué es el hoisting y el TDZ (Temporal Dead Zone) y cómo afectan a tu código.
• Buenas prácticas y errores comunes que debés evitar.

Al final, vas a estar cómodo leyendo y escribiendo snippets de JavaScript, sabiendo exactamente qué va a aparecer en la consola y por qué.

Comentarios en JavaScript

Los comentarios son líneas que el motor de JavaScript ignora completamente. Sirven para explicar el código, dejar notas de trabajo o desactivar temporalmente fragmentos. Hay dos formas principales:

Comentario de una línea

Se inicia con dos barras obliques (//). Todo lo que sigue hasta el final de la línea es ignorado.

// Este es un comentario de una línea
console.log('Hola Mundo'); // También podés poner un comentario al final de una instrucción

Salida esperada:

Hola Mundo

El primer console.log se ejecuta y muestra el texto; el comentario anterior no produce ningún efecto.

Comentario de bloque

Se abre con /* y se cierra con */. Puede abarcar varias líneas y es útil para describir funciones completas o dejar notas extensas.

/*
 * Esta función suma dos números y devuelve el resultado.
 * Parámetros:
 *   a - primer sumando
 *   b - segundo sumando
 */
function sumar(a, b) {
  return a + b;
}

console.log(sumar(3, 5));

Salida esperada:

8

Los comentarios de bloque también se usan para "comentar out" código que todavía no querés borrar:

/*
console.log('Esto no se ejecutará');
console.log('Tampoco esto');
*/
console.log('Esto sí se ejecuta');

Salida esperada:

Esto sí se ejecuta

Buenas prácticas con comentarios

• Sé conciso pero claro: un buen comentario explica el porqué, no el qué (el código ya muestra lo que hace).
• Evita comentarios obsoletos: si cambiás la lógica, actualizá o borrá el comentario asociado.
• Usa // TODO: o // FIXME: para marcar trabajo pendiente o problemas conocidos; muchos editores los resaltan.
• No abuses de los comentarios de bloque dentro de funciones largas; preferí dividir la función en partes más pequeñas y comentar cada una.

El método console.log

console.log pertenece al objeto global console y escribe un mensaje en la salida estándar (en el navegador, la consola de desarrolladores; en Node.js, la terminal). Es la herramienta más básica para depurar y observar el comportamiento de tu programa.

Sintaxis básica

console.log('Mensaje simple');
console.log(42);
console.log(true);
console.log(null);
console.log(undefined);

Salida esperada:

Mensaje simple
42
true
null
undefined

Imprimir varios valores

Si pasás más de un argumento, console.log los separa por un espacio:

console.log('La suma de', 2, 'y', 3, 'es', 2 + 3);

Salida esperada:

La suma de 2 y 3 es 5

Sustitución de plantillas (template literals)

Desde ES6 podés usar backticks (`) y ${} para interpolar variables y expresiones:

const nombre = 'Ana';
const edad = 28;
console.log(`Hola, me llamo ${nombre} y tengo ${edad} años.`);

Salida esperada:

Hola, me llamo Ana y tengo 28 años.

Estilos y colores (solo en navegadores/Node con soporte)

console.log acepta un segundo argumento con formato CSS cuando el primero empieza con %c:

console.log('%cTexto rojo y grande', 'color: red; font-size: 20px;');

Salida esperada: (en la consola verás el texto rojo y de 20 px). En entornos que no soportan estilos, se mostrará el texto sin formato y el segundo argumento como cadena adicional.

Otros métodos de console (breve vista)

• console.warn y console.error dan un estilo de advertencia o error.
• console.table muestra objetos o arrays en forma de tabla.
• console.group y console.groupEnd agrupan mensajes.

Estos son útiles, pero para los propósitos de este tutorial nos centraremos en console.log.

Declaración de variables: var, let y const

En JavaScript podés crear variables para guardar valores. Históricamente solo existía var, pero con ES6 (ECMAScript 2015) se introdujeron let y const para ofrecer un alcance más predecible y evitar ciertos problemas de hoisting.

var: alcance de función y hoisting

var tiene alcance de función (o global si se declara fuera de cualquier función). Además, su declaración se eleva (hoisting) al inicio del alcance, pero solo la declaración, no la inicialización.

console.log(x); // ¿Qué muestra?
var x = 10;
console.log(x);

Salida esperada:

undefined
10

Explicación: el motor eleva var x; al inicio, por lo que la primera console.log ve una variable declarada pero sin valor asignado → undefined. Después de la asignación, el segundo console.log muestra 10.

Este comportamiento puede llevar a confusiones, especialmente en bucles:

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);
}

Salida esperada:

3
3
3

Porque i es una única variable de función; al momento de ejecutar los setTimeout (después de que el bucle termine), i vale 3.

let: alcance de bloque y TDZ

let también puede ser reasignado, pero su alcance es de bloque (el par de llaves más cercano). Además, está sujeto a la Temporal Dead Zone (TDZ): no se puede acceder a la variable antes de su declaración, incluso si está hoisted.

console.log(y); // Error
let y = 20;

Salida esperada:

Uncaught ReferenceError: Cannot access 'y' before initialization

Si intentamos leer y antes de su línea de declaración, lanzamos una excepción. Esto evita el uso accidental de variables sin inicializar.

Ejemplo de alcance de bloque:

{
  let z = 'dentro del bloque';
  console.log(z);
}
console.log(z); // ¿Qué pasa?

Salida esperada:

dentro del bloque
Uncaught ReferenceError: z is not defined

La variable z solo existe dentro del bloque donde fue declarada; fuera de él no está definida.

const: referencia inmutable

const también tiene alcance de bloque y está sujeto a TDZ. La diferencia es que no se puede reasignar la variable después de su inicialización. Sin embargo, si el valor es un objeto o un array, sus propiedades o elementos pueden modificarse.

const PI = 3.14159;
// PI = 3.14; // Error: Assignment to constant variable.

const persona = { nombre: 'Luis', edad: 30 };
persona.edad = 31; // OK: se modifica una propiedad
console.log(persona);
// persona = {}; // Error: no se puede reasignar la referencia

Salida esperada:

{ nombre: 'Luis', edad: 31 }

Si intentás reasignar PI o persona completa, obtendrás un TypeError.

Comparación rápida

Alcance y hoisting en profundidad

Qué es el hoisting

El hoisting es el mecanismo por el cual el motor de JavaScript mueve las declaraciones de variables y funciones al inicio de su alcance durante la fase de compilación. Esto hace que podás referirte a una variable antes de su línea de declaración, aunque el resultado dependa de si se inicializó o no.

Hoisting de funciones

Las declaraciones de función se elevan completa, por lo que podés llamarlas antes de aparecer en el código:

saludar();
function saludar() {
  console.log('Hola desde función elevada');
}

Salida esperada:

Hola desde función elevada

Las expresiones de función (asignadas a una variable) no se elevan de la misma forma:

// intentaLlamar(); // Error si lo descomentás
const intentaLlamar = function () {
  console.log('Esta no se elevó');
};
intentaLlamar();

Salida esperada:

Esta no se elevó

Si descomentás la primera llamada, obtendrás un TypeError: intentaLlamar is not a function porque la variable existe (por hoisting) pero está en TDZ y su valor es undefined hasta que se ejecuta la línea de asignación.

Hoisting con let y const

Aunque técnicamente también se elevan, su acceso antes de la declaración provoca un error por TDZ. Veamos un ejemplo que muestra la diferencia:

console.log(a); // undefined (var)
console.log(b); // Error (let)
console.log(c); // Error (const)

var a = 1;
let b = 2;
const c = 3;

Salida esperada:

undefined
Uncaught ReferenceError: Cannot access 'b' before initialization
Uncaught ReferenceError: Cannot access 'c' before initialization

La primera línea muestra undefined porque a existe pero aún no tiene valor. Las siguientes dos lanzan excepciones porque b y c están en su zona muerta temporal.

Alcance de bloque vs alcance de función

Un bloque es cualquier conjunto de sentencias encerrado entre { }. Las variables declaradas con let o const dentro de un bloque no son visibles fuera de él, mientras que var sí lo es (si el bloque está dentro de una función).

function ejemploAlcance() {
  if (true) {
    var v = 'var';
    let l = 'let';
    const c = 'const';
  }
  console.log(v); // accesible
  console.log(l); // Error
  console.log(c); // Error
}

ejemAlcance();

Salida esperada:

var
Uncaught ReferenceError: l is not defined
Uncaught ReferenceError: c is not defined

Este comportamiento es clave para evitar fugas de variables y para escribir código más seguro.

Hoisting en bucles

Ya vimos el caso clásico con var y setTimeout. Con let cada iteración obtiene su propia variable, lo que soluciona el problema:

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);
}

Salida esperada:

0
1
2

Cada i es una variable distinta, capturada por la función de callback en su propio alcance.

Buenas prácticas y errores comunes

1. Preferí const por defecto, luego let, y evitá var

• Si sabés que el valor no va a cambiar, usá const.
• Si necesitás reasignar, usá let.
• Sólo recurras a var si tenés que mantener compatibilidad con entornos extremadamente antiguos (IE 11 o menos) y no podés transpilar.

2. Declará siempre antes de usar

Aunque var permite el hoisting, confiar en él genera código confuso. Declará tus variables lo más cerca posible de su primer uso y, si usás let/const, nunca las references antes de la línea de declaración.

3. Usá comentarios para explicar intenciones, no para describir lo obvio

Mal:

let x = 5; // asigno 5 a x

Bien:

// Radio del círculo en píxeles, usado en el cálculo del área
let radio = 5;

4. Evitá variables globales innecesarias

Las variables globales (las declaradas fuera de cualquier función con var, o asignadas sin let/const/var) pueden ser sobrescritas por cualquier parte del código y dificultan el mantenimiento. En módulos ES6 (import/export) cada archivo tiene su propio alcance, lo que ayuda a evitar esto.

5. Cuidado con la TDZ en condicionales

if (false) {
  let x = 1; // nunca se ejecuta, pero sigue estando en TDZ para el bloque
}
console.log(x); // Error: x no existe en este alcance

Aunque el bloque no se ejecuta, la variable x sigue estando declarada en ese alcance y, si intentás acceder a ella desde afuera, obtenerás un error de referencia.

6. Usá console.log con moderación en producción

En entornos de producción, el exceso de console.log puede afectar el rendimiento y exponer información sensible. Considerá usar niveles de log (debug, info, warn, error) mediante bibliotecas como winston o pino cuando trabajás con Node.js.

7. Formateá tu código con herramientas como Prettier o ESLint

Un estilo consistente facilita la lectura y reduce discusiones en equipos de trabajo. Muchas reglas de ESLint incluyen recomendaciones como prefer-const y no-var.

Conclusión

En este recorrido hemos visto los pilares más básicos de la sintaxis de JavaScript:

• Comentarios: // para una línea y /* … */ para bloque, útiles para documentar y depurar.
• console.log: la función más simple para imprimir valores en la consola, con capacidad de interpolación mediante template literals y formato básico.
• Declaración de variables: var (alcance de función, hoisting sin TDZ), let y const (alcance de bloque, hoisting con TDZ, y const impide reasignación).

También hemos explorado cómo el hoisting y la Temporal Dead Zone influyen en el comportamiento del código, especialmente en bucles y condicionales, y por qué es recomendable usar let y const en lugar de var en proyectos modernos.

Aplicando las buenas prácticas mencionadas — declarar con const por defecto, comentar con intención, evitar variables globales y usar console.log de forma controlada — escribirás JavaScript más predecible, fácil de mantener y menos propenso a errores sutiles.

El próximo paso podría ser profundizar en funciones flecha, desestructuración, operadores de propagación y módulos ES6, pero con estas bases ya estás listo para leer y escribir la gran mayoría del código JavaScript que encontrarás en la web y en Node.js.

¡A programar!

Nota: Todos los bloques de código marcados con ```run:javascript son autónomos y pueden ejecutarse directamente en el entorno de juego del sitio para ver la salida en tiempo real.