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
- Sentencias y punto y coma
- La inserción automática de punto y coma (ASI)
- Bloques con llaves
{} - Sensibilidad a mayúsculas y minúsculas
- Reglas y convenciones para los nombres
- Palabras reservadas
- Espacios en blanco, sangrado y estilo
- Expresiones frente a sentencias
- Literales
strict mode: el modo estricto- Cómo se lee un programa de arriba abajo
- Errores Comunes y Consejos
- Ejercicios
- Conclusión
- 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ónLa regla mental es sencilla: el punto y coma cierra una sentencia, no un bloque.
- 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:
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()); // undefinedEl 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.
- Bloques con llaves
{}
{}Un bloque agrupa varias sentencias para que se traten como una unidad. Se delimita con llaves.
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
- 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); // ReferenceErrorEstas 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.
- 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 reservadaTé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.
- 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.
- 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:
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 | Sí | const total = a + b; |
| Espacio tras las comas | Sí | console.log(a, b, c); |
| Llave de apertura | En la misma línea | if (x) { |
Espacio tras if, for, while |
Sí | 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.
- 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:
Pero el operador ternario sí es una expresión, y por eso funciona:
Ese operador lo estudiarás en Operadores Básicos. Quédate con la idea: las expresiones valen; las sentencias mandan.
- 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; // nuloEl 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.
strict mode: el modo estricto
strict mode: el modo estrictoEl 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:
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 conimport/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.
- 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'); // HSalida:
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,forofunction. No es un error grave, pero es incorrecto y delata a un principiante. - Omitir las llaves en un
ifde una sola línea. El sangrado engaña; el motor no. - Fallar con las mayúsculas.
Console,Mathen minúscula,getElementByIDen lugar degetElementById. ProvocanReferenceErroroTypeErrordesconcertantes. - Usar guiones en los nombres.
horas-totalesse interpreta comohoras - 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
ide 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
taskTitleyresponsableTareaen el mismo fichero cansa. - Formatea con
Mayús + Alt + Fen 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:
40const maxHoras = 40;horasEstimadas * 2console.log('Nómada Tareas')if (estado === 'hecha') { console.log('Completada'); }'alta' === 'baja'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:
Horas Estimadas(variable con las horas previstas de una tarea)2responsable(nombre de la segunda persona asignada)fecha-limite(fecha tope de la tarea)numero_maximo_de_horas_por_semana(constante fija de configuración)tarea(clase que representará una tarea)f(variable con la fecha límite)
Soluciones
Ejercicio 1
Los seis errores:
'use strict'sin punto y coma (funciona por ASI, pero es incoherente con el estilo del curso).1titulo: un identificador no puede empezar por un dígito.horas-estimadas: el guion es el operador de resta; hay que usar camelCase.class: palabra reservada.Console.log:consoleva en minúscula.- El
ifsin 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
- ¿Qué es JavaScript?
- Configuración de tu Entorno de Desarrollo
- Tu Primer Programa en JavaScript
- Sintaxis y Conceptos Básicos de JavaScript
- Variables y Tipos de Datos
- Operadores Básicos
- Conversión de Tipos y Comparaciones
- El Proyecto del Curso: Nómada Tareas
Módulo 2: Estructuras de Control
- Sentencias Condicionales
- Bucles: for, while, do-while
- Sentencias Switch
- Control del Flujo: break, continue y Bucles Anidados
- Manejo de Errores con try-catch
Módulo 3: Funciones
- Definición y Llamada de Funciones
- Expresiones de Función y Funciones Flecha
- Parámetros y Valores de Retorno
- Ámbito y Closures
- Hoisting y el Contexto de Ejecución
- Funciones de Orden Superior
- Recursividad
Módulo 4: Objetos y Arrays
- Introducción a los Objetos
- Métodos de Objeto y la Palabra Clave
this - Arrays: Conceptos Básicos y Métodos
- Iteración sobre Arrays
- Buscar, Ordenar y Agregar Datos: find, sort y reduce
- Desestructuración de Arrays
- Desestructuración de Objetos, Spread y Rest
- JSON y Copias de Objetos
Módulo 5: Objetos y Funciones Avanzadas
- Prototipos y Herencia
- Clases y Programación Orientada a Objetos
- Encapsulación: Getters, Setters y Campos Privados
- Módulos e Importación/Exportación
- JavaScript Asíncrono: Callbacks
- Promesas y Async/Await
- El Bucle de Eventos y la Cola de Microtareas
- Iteradores y Generadores
Módulo 6: El Modelo de Objetos del Documento (DOM)
- Introducción al DOM
- Selección y Manipulación de Elementos del DOM
- Manejo de Eventos
- Propagación, Delegación y Eventos Personalizados
- Creación y Eliminación de Elementos del DOM
- Renderizado de Listas y Plantillas HTML
- Manejo y Validación de Formularios
Módulo 7: APIs del Navegador y Temas Avanzados
- Almacenamiento Local y de Sesión
- Fetch API y AJAX
- Peticiones Robustas: Errores, Timeouts y AbortController
- WebSockets
- Service Workers y Aplicaciones Web Progresivas (PWAs)
- APIs del Navegador Esenciales
- Introducción a WebAssembly
Módulo 8: Pruebas y Depuración
- Depuración de JavaScript
- Calidad de Código: ESLint, Prettier y Convenciones
- Pruebas Unitarias con Jest
- Dobles de Prueba: Mocks, Stubs y Spies
- Pruebas de Integración
- Pruebas de Extremo a Extremo con Cypress
Módulo 9: Rendimiento y Optimización
- Medir Antes de Optimizar: DevTools y Web Vitals
- Optimización del Rendimiento de JavaScript
- Gestión de Memoria
- Manipulación Eficiente del DOM
- Carga Perezosa y División de Código
Módulo 10: Frameworks y Librerías de JavaScript
- Por Qué Existen los Frameworks
- Introducción a React
- Gestión de Estado con Redux
- Conceptos Básicos de Vue.js
- Conceptos Básicos de Angular
- Elegir el Framework Adecuado
