En la lección anterior escribiste tu primer programa: unas cuantas líneas que imprimían el resumen de una tarea de Taller Nómada. Funcionaba, pero copiaste la forma sin conocer las reglas. Ahora vas a aprenderlas. La sintaxis es la gramática del lenguaje: qué símbolos existen, cómo se separan las instrucciones, qué nombres puedes usar y cómo se lee un programa. Dominarla es lo que convierte los errores de "no sé qué pasa" en "ah, falta un punto y coma en la línea 12". Es la base sobre la que se apoya absolutamente todo lo demás.

Contenido

  1. Sentencias y punto y coma
  2. La inserción automática de punto y coma (ASI)
  3. Bloques con llaves {}
  4. Sensibilidad a mayúsculas y minúsculas
  5. Reglas y convenciones para los nombres
  6. Palabras reservadas
  7. Espacios en blanco, sangrado y estilo
  8. Expresiones frente a sentencias
  9. Literales
  10. strict mode: el modo estricto
  11. Cómo se lee un programa de arriba abajo
  12. Errores Comunes y Consejos
  13. Ejercicios
  14. Conclusión

  1. Sentencias y punto y coma

Un programa es una secuencia de sentencias (o instrucciones): órdenes completas que el motor ejecuta una tras otra. Cada sentencia termina con punto y coma (;).

const titulo = 'Rediseñar la sala polivalente';
const responsable = 'Iván';
console.log(titulo, responsable);

Ahí hay tres sentencias: dos declaraciones y una llamada a función. Se ejecutan en orden, de arriba abajo.

Técnicamente puedes poner varias en la misma línea si las separas con ;, pero no lo hagas: se lee mucho peor.

// Válido pero ilegible: evítalo
const prioridad = 'alta'; const horas = 12; console.log(prioridad, horas);

1.1 Sentencias que no llevan punto y coma

Hay excepciones importantes. Los bloques de código no llevan punto y coma después de la llave de cierre:

// Correcto: no hay punto y coma tras la llave de cierre
if (prioridad === 'alta') {
  console.log('Tarea urgente');
}

// Tampoco lo lleva una declaración de función
function mostrarTarea() {
  console.log('Tarea de Taller Nómada');
}

Sin embargo, cuando una función se asigna a una variable, sí lleva punto y coma, porque la sentencia completa es la asignación:

const mostrarTarea = function () {
  console.log('Tarea de Taller Nómada');
}; // ← este punto y coma cierra la asignación

La regla mental es sencilla: el punto y coma cierra una sentencia, no un bloque.

  1. La inserción automática de punto y coma (ASI)

Aquí llega una de las particularidades más discutidas de JavaScript. El lenguaje tiene un mecanismo llamado ASI (Automatic Semicolon Insertion): si una línea acaba y el motor considera que la sentencia está completa, inserta un punto y coma por su cuenta.

Por eso este código funciona sin errores:

const responsable = 'Lucía'
const horas = 8
console.log(responsable, horas)

Entonces, ¿hace falta escribirlos? El problema es que ASI acierta casi siempre, pero no siempre, y cuando falla el error resultante es desconcertante.

2.1 El caso peligroso: return

// ¡Trampa! ASI inserta un punto y coma después de return
function obtenerResumen() {
  return
  {
    titulo: 'Preparar el taller de serigrafía'
  };
}

console.log(obtenerResumen()); // undefined

El motor lee return, ve el final de línea, decide que la sentencia está completa e inserta ;. El objeto de las líneas siguientes queda huérfano y la función devuelve undefined. La solución es poner la llave de apertura en la misma línea que return.

2.2 El caso peligroso: líneas que empiezan por ( o [

const horasIvan = 12
const horasLucia = 8

// Esta línea empieza por un paréntesis
;(function () {
  console.log('Bloque independiente');
})();

Sin ese punto y coma inicial, el motor interpretaría que 8(...) es una llamada a función sobre el número 8, y lanzaría un TypeError. El mismo problema ocurre con líneas que empiezan por [.

2.3 La recomendación

Estilo Ventajas Inconvenientes
Escribir siempre ; Predecible, sin sorpresas, mayoritario en el sector Un carácter más por línea
Omitirlos Código algo más limpio a la vista Exige conocer y recordar las excepciones

En este curso escribiremos siempre el punto y coma. Es la opción segura mientras aprendes, y la más habitual en equipos profesionales. Si algún día trabajas en un proyecto que los omite, una herramienta de formato se encargará automáticamente.

  1. Bloques con llaves {}

Un bloque agrupa varias sentencias para que se traten como una unidad. Se delimita con llaves.

if (prioridad === 'alta') {
  console.log('Avisar al equipo');
  console.log('Marcar en el tablero');
}

Las llaves aparecen en condicionales, bucles, funciones y clases. Dos observaciones para principiantes:

Primera: si un if tiene una sola sentencia, las llaves son opcionales. Pero omitirlas es una fuente clásica de errores:

// Trampa clásica: solo la primera línea depende del if
if (prioridad === 'alta')
  console.log('Avisar al equipo');
  console.log('Esta línea se ejecuta SIEMPRE');

El sangrado sugiere que las dos líneas dependen del if, pero solo la primera lo hace. Pon siempre las llaves, aunque haya una sola línea.

Segunda: los bloques crean ámbito para let y const. Una variable declarada dentro de un bloque no existe fuera de él. Es una idea central que verás en detalle en Variables y Tipos de Datos y a fondo en Ámbito y Closures.

{
  const nota = 'Solo visible dentro del bloque';
  console.log(nota); // funciona
}
// console.log(nota); // ReferenceError: nota is not defined

  1. Sensibilidad a mayúsculas y minúsculas

JavaScript distingue mayúsculas de minúsculas. Sin excepciones y sin avisos.

const horasEstimadas = 12;

console.log(horasEstimadas); // 12
// console.log(HorasEstimadas); // ReferenceError
// console.log(horasestimadas); // ReferenceError

Estas cuatro escrituras son cuatro identificadores distintos: tarea, Tarea, TAREA, tArEa.

Esto también afecta a las palabras clave y a las funciones del lenguaje:

Correcto Incorrecto Error resultante
console.log() Console.log() ReferenceError: Console is not defined
const Const SyntaxError
if If ReferenceError: If is not defined
Math.round() math.round() ReferenceError: math is not defined

Fíjate en algo revelador: console va en minúscula pero Math en mayúscula. No hay lógica que lo explique; es historia del lenguaje. Cuando dudes, consulta la documentación.

  1. Reglas y convenciones para los nombres

Un identificador es el nombre que le das a una variable, función o clase. Hay reglas (obligatorias) y convenciones (acuerdos del sector).

5.1 Reglas obligatorias

Un identificador válido:

  • Empieza por una letra, un guion bajo (_) o un símbolo de dólar ($).
  • Puede contener después letras, dígitos, _ y $.
  • No puede empezar por un dígito.
  • No puede contener espacios ni guiones (-).
  • No puede ser una palabra reservada.
// Válidos
const titulo = 'Preparar el taller';
const horas2026 = 40;
const _interno = true;
const $elemento = null;

// Inválidos
// const 2horas = 10;        // SyntaxError: empieza por dígito
// const horas-totales = 10; // SyntaxError: el guion es el operador de resta
// const const = 10;         // SyntaxError: palabra reservada

Técnicamente JavaScript admite acentos y eñes (const añoInicio = 2026; funciona), pero no lo hagas: complica la colaboración, provoca problemas de codificación y no es la práctica del sector. Los identificadores, en inglés o en español sin acentos.

5.2 Convenciones de nombrado

Convención Aspecto Se usa para Ejemplo en Nómada Tareas
camelCase Primera palabra en minúscula, siguientes con inicial mayúscula Variables y funciones horasEstimadas, fechaLimite, calcularCarga
PascalCase Todas las palabras con inicial mayúscula Clases y constructores Tarea, GestorDeTareas
UPPER_SNAKE_CASE Todo en mayúsculas, palabras separadas por _ Constantes globales fijas PRIORIDADES_VALIDAS, MAX_HORAS_SEMANA
_guionBajoInicial Empieza por _ Convención antigua para "uso interno" _cacheInterna

Aplicado al proyecto:

// Constante global de configuración: UPPER_SNAKE_CASE
const MAX_HORAS_SEMANA = 40;

// Variables normales: camelCase
const responsableTarea = 'Marta';
const horasEstimadas = 6;
const fechaLimite = '2026-10-15';

5.3 Nombres que se entienden

Las convenciones dicen cómo escribir; el criterio dice qué escribir.

Mal nombre Buen nombre Por qué
x horasEstimadas x no dice nada
d fechaLimite Las abreviaturas de una letra se olvidan
datos tareasPendientes "Datos" describe todo y nada
flag estaCompletada Los booleanos se leen mejor como una afirmación
tmp2 horasRestantes Los nombres numerados esconden el significado

Regla práctica: si necesitas un comentario para explicar qué guarda una variable, cambia su nombre.

  1. Palabras reservadas

Son términos con significado propio en el lenguaje; no puedes usarlos como identificadores.

Categoría Palabras
Declaración var, let, const, function, class
Control de flujo if, else, switch, case, default, for, while, do, break, continue, return
Errores try, catch, finally, throw
Objetos new, this, super, delete, in, instanceof, typeof, void
Módulos import, export, from, as
Asincronía async, await, yield
Valores true, false, null
Reservadas para el futuro enum, implements, interface, package, private, protected, public, static
// const class = 'diseño';  // SyntaxError
// const new = 'tarea';     // SyntaxError

// Alternativas correctas
const clase = 'diseño';
const tareaNueva = 'tarea';

Dos matices curiosos: undefined no es una palabra reservada (es una variable global, aunque no debas reasignarla), y await solo es reservada dentro de funciones async y en módulos.

  1. Espacios en blanco, sangrado y estilo

Para el motor, los espacios en blanco y los saltos de línea son irrelevantes (salvo dentro de cadenas de texto). Estas dos versiones son idénticas para JavaScript:

const t={titulo:'Revisar facturas',responsable:'Marta',horas:3};
const t = {
  titulo: 'Revisar facturas',
  responsable: 'Marta',
  horas: 3
};

Idénticas para la máquina, pero radicalmente distintas para una persona. Y el código se lee muchas más veces de las que se escribe.

Convenciones habituales:

Aspecto Convención Ejemplo
Sangrado 2 espacios por nivel console.log(x);
Espacios alrededor de operadores const total = a + b;
Espacio tras las comas console.log(a, b, c);
Llave de apertura En la misma línea if (x) {
Espacio tras if, for, while if (prioridad === 'alta') {
Espacio antes del paréntesis al llamar No calcularCarga(tareas)
Longitud de línea Unos 80-100 caracteres

No memorices esta tabla: en el Módulo 8 configurarás herramientas que aplican el formato automáticamente al guardar. Lo importante ahora es que elijas un estilo y lo mantengas.

  1. Expresiones frente a sentencias

Esta distinción parece teórica y resulta ser tremendamente práctica.

  • Una expresión es un trozo de código que produce un valor.
  • Una sentencia es una orden completa que hace algo.

La prueba definitiva: ¿puedo poner esto donde se espera un valor? Si sí, es una expresión.

// Expresiones: cada una produce un valor
12                          // el número 12
12 + 8                      // 20
'Marta'                     // el texto 'Marta'
horasEstimadas > 10         // true o false
'alta' === 'alta'           // true
calcularCarga('Iván')       // lo que devuelva la función
// Sentencias: son órdenes, no valores
const responsable = 'Lucía';
if (horas > 8) { console.log('Jornada larga'); }
for (let i = 0; i < 3; i++) { console.log(i); }

Las expresiones se anidan dentro de las sentencias:

//        ┌──── sentencia de declaración ────┐
const totalHoras = 12 + 8 + 6;
//                 └── expresión: vale 26 ──┘

¿Por qué importa? Porque explica qué se puede escribir dónde. Un if es una sentencia, así que no puedes asignarlo a una variable:

// const resultado = if (horas > 8) { 'largo' } else { 'corto' }; // SyntaxError

Pero el operador ternario sí es una expresión, y por eso funciona:

const jornada = horas > 8 ? 'larga' : 'normal'; // correcto

Ese operador lo estudiarás en Operadores Básicos. Quédate con la idea: las expresiones valen; las sentencias mandan.

  1. Literales

Un literal es un valor escrito directamente en el código, tal cual.

Tipo de literal Ejemplo Descripción
Numérico 12, 3.5, 1_000_000 Números escritos directamente
De cadena 'Marta', "alta" Texto entre comillas
De plantilla `Tarea de ${responsable}` Texto entre acentos graves, admite interpolación
Booleano true, false Los dos valores lógicos
Nulo null Ausencia intencionada de valor
De objeto { titulo: 'Revisar', horas: 3 } Un objeto escrito directamente
De array ['diseño', 'espacio'] Una lista escrita directamente
De expresión regular /^\d{4}-\d{2}-\d{2}$/ Un patrón de texto
// Distintos literales describiendo una tarea de Taller Nómada
const id = 1;                            // numérico
const titulo = 'Rediseñar la sala';      // de cadena
const estaHecha = false;                 // booleano
const etiquetas = ['diseño', 'espacio']; // de array
const asignadaA = null;                  // nulo

El guion bajo como separador de miles (1_000_000) es una comodidad moderna: el motor lo ignora y para ti el número es mucho más legible.

  1. strict mode: el modo estricto

El modo estricto activa una versión más rigurosa de JavaScript: convierte en errores algunos comportamientos silenciosos y prohíbe sintaxis problemática heredada.

Se activa escribiendo 'use strict'; como primera línea de un fichero o de una función:

'use strict';

// A partir de aquí, el motor es más exigente
const responsable = 'Iván';

10.1 Qué cambia

Sin modo estricto Con modo estricto
x = 5; sin declarar crea una variable global silenciosamente ReferenceError: x is not defined
Asignar a algo de solo lectura falla en silencio Lanza TypeError
this en una función suelta vale el objeto global this vale undefined
Se admiten parámetros duplicados en funciones SyntaxError
Palabras futuras usables como nombres Prohibidas

El primer caso es el que más problemas causa:

'use strict';

function registrarTarea() {
  horasTotales = 12; // ReferenceError: horasTotales is not defined
}
registrarTarea();

Sin modo estricto, esa línea crearía una variable global sin avisar. Es una errata que puede tardar semanas en manifestarse. Con modo estricto, el error aparece al instante.

10.2 Cuándo hace falta escribirlo

Buena noticia: cada vez menos. El modo estricto está activado automáticamente en dos contextos muy habituales:

  • Dentro de módulos de JavaScript (ficheros cargados con <script type="module"> o con import/export). Se ven en Módulos e Importación/Exportación.
  • Dentro del cuerpo de las clases.

Así que la regla práctica es: escribe 'use strict'; al principio de los ficheros de script clásicos, y no te preocupes por él cuando trabajes con módulos o clases.

Un detalle: la directiva debe ser literalmente la primera sentencia (los comentarios anteriores no cuentan). Si la pones más abajo, se ignora sin avisar.

  1. Cómo se lee un programa de arriba abajo

Un motor de JavaScript ejecuta las sentencias en el orden en que están escritas, de arriba abajo y de izquierda a derecha. Sigue este programa mentalmente antes de leer el resultado:

'use strict';

console.log('1. Empieza el programa');           // A

const responsable = 'Marta';                     // B
console.log('2. Responsable:', responsable);     // C

const horasLunes = 3;                            // D
const horasMartes = 5;                           // E
const horasTotales = horasLunes + horasMartes;   // F

console.log('3. Horas totales:', horasTotales);  // G
console.log('4. Fin del programa');              // H

Salida:

1. Empieza el programa
2. Responsable: Marta
3. Horas totales: 8
4. Fin del programa

Detalle de la línea F: primero se evalúan las expresiones (horasLunes vale 3, horasMartes vale 5, la suma vale 8) y solo después se asigna el resultado. Siempre en ese orden: primero se calcula el lado derecho, luego se guarda en el izquierdo.

flowchart TD
    A["Línea 1: mensaje inicial"] --> B["Línea 2: guardar 'Marta'"]
    B --> C["Línea 3: imprimir responsable"]
    C --> D["Líneas 4-5: guardar 3 y 5"]
    D --> E["Línea 6: evaluar 3 + 5 → 8<br/>y asignar a horasTotales"]
    E --> F["Líneas 7-8: imprimir resultados"]

Consecuencia práctica: no puedes usar algo antes de crearlo. Esto falla:

console.log(responsable); // ReferenceError: Cannot access 'responsable' before initialization
const responsable = 'Lucía';

Existe un mecanismo llamado hoisting que hace que las declaraciones de función sí puedan usarse antes de aparecer en el código, y que explica el mensaje concreto de ese error. Es un tema con suficiente miga como para tener su propia lección: Hoisting y el Contexto de Ejecución. Por ahora, la regla segura es: declara antes de usar.

Errores Comunes y Consejos

Errores comunes

  • Poner punto y coma después de la llave de cierre de un if, for o function. No es un error grave, pero es incorrecto y delata a un principiante.
  • Omitir las llaves en un if de una sola línea. El sangrado engaña; el motor no.
  • Fallar con las mayúsculas. Console, Math en minúscula, getElementByID en lugar de getElementById. Provocan ReferenceError o TypeError desconcertantes.
  • Usar guiones en los nombres. horas-totales se interpreta como horas - totales, una resta. El error resultante no menciona el guion para nada.
  • Escribir 'use strict'; en medio del fichero. Se ignora silenciosamente. Debe ser la primera sentencia.
  • Creer que el sangrado tiene significado. En JavaScript no lo tiene (a diferencia de Python): el sangrado es solo para las personas. Los bloques los definen las llaves.
  • Nombres de una letra. Se escriben en dos segundos y cuestan horas de descifrado. Salvo el i de un bucle corto, pon nombres completos.

Consejos

  • Escribe siempre el punto y coma mientras aprendes. Te ahorra las excepciones de ASI.
  • Pon siempre las llaves.
  • Deja una línea en blanco entre bloques lógicos. El código respira y se lee mejor.
  • Nombra en camelCase y en un solo idioma. Mezclar taskTitle y responsableTarea en el mismo fichero cansa.
  • Formatea con Mayús + Alt + F en VS Code. Un código bien alineado revela errores de estructura a simple vista.
  • Cuando veas un SyntaxError, mira también la línea anterior a la indicada. El motor detecta el problema donde deja de entender el código, que suele ser una línea después de donde falta el símbolo.

Ejercicios

Ejercicio 1: Corrige la sintaxis

El siguiente fragmento tiene seis errores de sintaxis o de convención. Encuéntralos y escribe la versión corregida.

'use strict'

const 1titulo = 'Revisar el inventario del taller';
const horas-estimadas = 4;
const RESPONSABLE = 'Lucía';
const class = 'mantenimiento';

if (horas-estimadas > 3)
  Console.log('Tarea larga');
  console.log('Avisar a Marta');

Ejercicio 2: ¿Expresión o sentencia?

Clasifica cada fragmento como expresión o sentencia, y en el caso de las expresiones indica qué valor produce:

  1. 40
  2. const maxHoras = 40;
  3. horasEstimadas * 2
  4. console.log('Nómada Tareas')
  5. if (estado === 'hecha') { console.log('Completada'); }
  6. 'alta' === 'baja'
  7. estado = 'en-curso'

Ejercicio 3: Nombra correctamente

Reescribe estos nombres siguiendo las reglas y convenciones de JavaScript, y explica en cada caso qué estaba mal:

  1. Horas Estimadas (variable con las horas previstas de una tarea)
  2. 2responsable (nombre de la segunda persona asignada)
  3. fecha-limite (fecha tope de la tarea)
  4. numero_maximo_de_horas_por_semana (constante fija de configuración)
  5. tarea (clase que representará una tarea)
  6. f (variable con la fecha límite)

Soluciones

Ejercicio 1

Los seis errores:

  1. 'use strict' sin punto y coma (funciona por ASI, pero es incoherente con el estilo del curso).
  2. 1titulo: un identificador no puede empezar por un dígito.
  3. horas-estimadas: el guion es el operador de resta; hay que usar camelCase.
  4. class: palabra reservada.
  5. Console.log: console va en minúscula.
  6. El if sin llaves hace que la segunda línea se ejecute siempre, pese al sangrado.

Versión corregida:

'use strict';

const titulo = 'Revisar el inventario del taller';
const horasEstimadas = 4;
const responsable = 'Lucía';
const categoria = 'mantenimiento';

if (horasEstimadas > 3) {
  console.log('Tarea larga');
  console.log('Avisar a Marta');
}

Nota adicional: RESPONSABLE en mayúsculas no es un error sintáctico, pero por convención UPPER_SNAKE_CASE se reserva para constantes globales de configuración, no para datos concretos.

Ejercicio 2

# Clasificación Valor que produce
1 Expresión (literal numérico) 40
2 Sentencia (declaración)
3 Expresión (aritmética) El doble de horasEstimadas
4 Expresión (llamada a función) undefined (imprime, pero no devuelve nada)
5 Sentencia (condicional)
6 Expresión (comparación) false
7 Expresión (asignación) 'en-curso'

Los casos 4 y 7 son los interesantes. Una llamada a función es una expresión aunque la función no devuelva nada útil: por eso la consola muestra undefined bajo tus console.log. Y una asignación también es una expresión cuyo valor es el asignado; por eso a = b = 5 funciona, aunque no sea recomendable escribirlo.

Ejercicio 3

Original Corregido Problema
Horas Estimadas horasEstimadas Los espacios no se admiten; además, camelCase
2responsable segundoResponsable No puede empezar por dígito
fecha-limite fechaLimite El guion es el operador de resta
numero_maximo_de_horas_por_semana MAX_HORAS_SEMANA Constante fija: UPPER_SNAKE_CASE y más conciso
tarea Tarea Las clases usan PascalCase
f fechaLimite Un nombre de una letra no dice nada

Conclusión

Ya conoces la gramática de JavaScript. Sabes qué es una sentencia y por qué conviene cerrarla siempre con punto y coma pese a la existencia de ASI; usas bloques {} correctamente y sabes que crean ámbito; tienes claro que el lenguaje distingue mayúsculas de minúsculas; conoces las reglas de los identificadores y las convenciones camelCase, PascalCase y UPPER_SNAKE_CASE; sabes qué son las palabras reservadas; distingues expresiones (producen un valor) de sentencias (dan una orden); reconoces los distintos literales; entiendes qué activa el strict mode y dónde viene activado de serie; y sigues mentalmente la ejecución de arriba abajo de un programa.

Con esto ya puedes leer código sin que la forma te distraiga. Lo que te falta es el contenido: los datos. En la siguiente lección, Variables y Tipos de Datos, verás en profundidad cómo declarar variables con let y const, por qué var está desaconsejado, y qué tipos de valores existen en JavaScript: textos, números, booleanos, undefined, null y algunos más. Al terminarla podrás modelar con precisión todos los campos de una tarea de Nómada Tareas.

Curso de JavaScript: De Principiante a Avanzado

Módulo 1: Introducción a JavaScript

Módulo 2: Estructuras de Control

Módulo 3: Funciones

Módulo 4: Objetos y Arrays

Módulo 5: Objetos y Funciones Avanzadas

Módulo 6: El Modelo de Objetos del Documento (DOM)

Módulo 7: APIs del Navegador y Temas Avanzados

Módulo 8: Pruebas y Depuración

Módulo 9: Rendimiento y Optimización

Módulo 10: Frameworks y Librerías de JavaScript

Módulo 11: Proyecto Final

© Copyright 2026. Todos los derechos reservados