Sintaxis, Sentencias y Bloques: La Gramática de JS

Conceptos de Sintaxis Básica

Antes de escribir algoritmos complejos, debes interiorizar tres reglas fundamentales que aplicarán a cada línea de código que escribas.

1. Case-Sensitive (Sensible a Mayúsculas)

JavaScript distingue entre mayúsculas y minúsculas en TODOS los identificadores: variables, funciones, métodos y palabras clave. Esto significa que user, User y USER son tres variables completamente diferentes. A diferencia de SQL o HTML (que son case-insensitive), JavaScript heredó esta característica de lenguajes como C y Java.

2. Identificadores y Unicode

Los nombres de variables (identificadores) siguen reglas estrictas: pueden contener letras (a-z, A-Z), dígitos (0-9), guión bajo (_) y signo de dólar ($). No pueden empezar con un dígito. Desde ES6, JavaScript soporta Unicode completo, lo que técnicamente permite usar emojis o caracteres de cualquier idioma, pero esto es una mala práctica en equipos profesionales.

3. Espacios en blanco (Whitespace)

JavaScript ignora espacios, tabulaciones y saltos de línea (excepto en strings y en casos específicos de ASI). El motor trata let x=5; igual que let x = 5;. Esta flexibilidad permite formatear el código de manera legible, pero también puede llevar a guerras de estilo en equipos si no se usa un formateador automático.

Sentencias vs Expresiones

Entender esta diferencia es el "momento eureka" para muchos desarrolladores. Es la razón por la que a veces tu código falla dentro de un if o por qué no puedes usar un bucle for dentro del HTML de React.

Expresiones (Expressions)

Una expresión es cualquier fragmento de código que produce un valor. Puedes pensar en ella como algo que "puedes asignar a una variable". JavaScript evalúa la expresión y obtiene un resultado concreto que puede ser un número, string, booleano, objeto, función, etc.

Sentencias (Statements)

Una sentencia es una instrucción que ejecuta una acción pero no produce un valor por sí misma. Las sentencias controlan el flujo del programa: declaran variables, iteran, condicionan, pero no "retornan" nada utilizable directamente.

Esta distinción es fundamental en lugares donde JavaScript espera específicamente una expresión, como argumentos de funciones, operadores ternarios, o interpolaciones de template literals.

Bloques de Código y Scope

Un bloque se define con llaves { } y agrupa múltiples sentencias en una unidad. Su función más importante en JavaScript moderno (ES6+) es crear un Block Scope: un ámbito privado para variables declaradas con let y const. Esto contrasta con var, que ignora los bloques y solo respeta function scope.

Block Scope con let y const

Cuando declaras una variable con let o const dentro de un bloque, esa variable solo existe dentro de ese bloque. Al salir del bloque, la variable es destruida y no puede ser accedida. Esto previene errores de variables escapando de su contexto.

Bloques Solitarios

Puedes crear bloques sin if, for o while. Esto es útil para aislar variables temporales sin contaminar el scope exterior. Es poco común en código moderno, pero válido y útil en ciertos casos.

El Punto y Coma (;)

JavaScript implementa ASI (Automatic Semicolon Insertion), un mecanismo que inserta puntos y coma automáticamente en lugares "obvios" donde falta. Esto fue diseñado para hacer JavaScript más tolerante a errores, pero en la práctica genera bugs silenciosos difíciles de detectar. El motor JavaScript sigue reglas específicas definidas en la especificación ECMAScript para decidir dónde insertar el punto y coma.

Cómo funciona ASI

ASI inserta un punto y coma automáticamente cuando encuentra un salto de línea que haría el código inválido. Hay tres reglas principales:

• Cuando el siguiente token no puede ser parte de la sentencia actual.
• Al encontrar <code>}</code> que cierra un bloque.
• Al llegar al final del archivo.

Casos Peligrosos de ASI

ASI NO inserta punto y coma cuando el siguiente token puede ser interpretado como continuación de la sentencia anterior. Esto causa los bugs más confusos de JavaScript.

Comentarios: Calidad sobre Cantidad

JavaScript soporta dos tipos de comentarios: de una línea (//) y multilínea (/* */). Los comentarios son ignorados completamente por el motor de JavaScript y sirven exclusivamente para documentar el código. Sin embargo, el mejor código es el que no necesita comentarios porque se explica a sí mismo con nombres claros y estructura lógica.

La regla de oro: los comentarios deben explicar el POR QUÉ, nunca el QUÉ. Si el código es obvio, el comentario es ruido.

Tipos de comentarios útiles en producción:

• <code>TODO:</code> Marca trabajo pendiente específico
• <code>FIXME:</code> Señala código que funciona pero debe mejorarse
• <code>HACK:</code> Solución temporal no ideal que debe reemplazarse
• <code>NOTE:</code> Información importante que no es obvia
• <strong>JSDoc</strong>: Documentación formal de funciones/clases (TypeScript puede inferir tipos de esto)

Errores Comunes de Sintaxis

Estos son los 7 errores de sintaxis más frecuentes que encontrarás al escribir JavaScript. Cada uno tiene un mensaje específico en la consola y una causa bien definida. Aprende a reconocerlos para debuggear más rápido.

1. SyntaxError: Unexpected token

Aparece cuando escribes código que viola las reglas gramaticales de JavaScript: llaves, paréntesis o corchetes desbalanceados, palabras reservadas mal usadas, o caracteres inesperados.

Por qué ocurre: El parser de JavaScript lee el código carácter por carácter y espera ciertos tokens según el contexto. Cuando encuentra algo inesperado, no puede continuar parseando y lanza este error antes de ejecutar nada.

2. ReferenceError: X is not defined

Intentas acceder a una variable que no existe en ningún scope accesible, o escribiste mal el nombre (recuerda: JavaScript es case-sensitive).

Por qué ocurre: JavaScript busca la variable en el scope actual, luego en los scopes padres (scope chain). Si no la encuentra en ningún lugar, no puede hacer nada más y lanza el error.

3. TypeError: Assignment to constant variable

Intentas reasignar una variable declarada con const. Las constantes pueden declararse una sola vez y no pueden cambiar su referencia.

Por qué ocurre: const crea un binding inmutable entre el nombre de la variable y la referencia, pero no hace inmutable el valor en sí. Reasignar rompe ese binding.

4. SyntaxError: Identifier 'X' has already been declared

Intentas declarar la misma variable dos veces con let o const en el mismo scope. JavaScript no permite redeclaraciones con estas keywords.

Por qué ocurre: let y const fueron diseñados para prevenir errores causados por redeclaraciones accidentales (un problema común con var). El parser detecta esto antes de ejecutar el código.

5. ReferenceError: Cannot access 'X' before initialization

Intentas usar una variable let o const antes de su declaración en el código. Esto es la Temporal Dead Zone (TDZ) en acción.

Por qué ocurre: let/const son hoisted al inicio del bloque pero quedan en un estado "no inicializado" hasta que el motor ejecuta la línea de declaración. La TDZ protege contra errores lógicos.

6. SyntaxError: Missing initializer in const declaration

Declaras una constante sin asignarle un valor inmediatamente. const requiere inicialización obligatoria porque no puede ser reasignada después.

Por qué ocurre: Las constantes están diseñadas para valores que nunca cambiarán. Si no tienen valor inicial, nunca podrían tener uno (porque no se pueden reasignar).

7. SyntaxError: Illegal return statement

Usas return fuera de una función. return solo es válido dentro del cuerpo de una función o método.

Por qué ocurre: return indica dónde termina la ejecución de una función y qué valor devuelve. Fuera de una función, no hay nada de qué "retornar", por lo que es un error sintáctico.

Entender la sintaxis de JavaScript es como aprender las reglas de tráfico antes de conducir: parece tedioso, pero previene accidentes graves. Con las bases sólidas que has aprendido aquí, estás listo para explorar las estructuras de datos y el comportamiento de las variables en JavaScript.