JavaScript — Intermedio

Este curso está dirigido a desarrolladores que ya dominan los fundamentos de JavaScript y quieren consolidar un perfil intermedio capaz de afrontar código real de mayor complejidad. A lo largo de ocho horas de trabajo práctico, el participante profundizará en los mecanismos internos del lenguaje —cierres, el comportamiento de this, la asincronía y las estructuras de datos modernas— y los aplicará de forma integrada en situaciones concretas: consumir una API REST, modularizar funcionalidades reutilizables y depurar problemas habituales con las herramientas del navegador. Al finalizar, el participante será capaz de escribir y mantener código JavaScript asíncrono, organizado en módulos y libre de los errores más frecuentes asociados a variables capturadas, delegación de eventos y promesas no resueltas.

1. Explicar el comportamiento de this en distintos contextos de ejecución (método de objeto, callback y arrow function) y razonar sobre la regla léxica o de invocación aplicada en cada caso.
2. Comparar las estructuras Map/Object y Set/Array ante un problema concreto de datos, seleccionando y justificando la opción más adecuada en función de la semántica y las operaciones necesarias.
3. Adaptar funciones síncronas a versiones asíncronas con async/await y manejo explícito de errores mediante try/catch, sin bloquear el hilo principal.
4. Depurar código asíncrono con comportamiento incorrecto —race conditions o promesas no resueltas— utilizando las DevTools del navegador e identificando la causa raíz en el call stack o la pestaña Network.
5. Adaptar el manejo de eventos en listas dinámicas mediante delegación en el nodo padre, justificando su ventaja frente al registro de listeners individuales.
6. Depurar un cierre con comportamiento inesperado en un bucle, corregir el código y explicar qué variable del entorno léxico estaba siendo capturada incorrectamente.
7. Diseñar un módulo ES con import/export que encapsule una funcionalidad reutilizable, exponiendo solo la API pública necesaria.
8. Integrar el consumo de una API REST pública mediante la Fetch API, transformar la respuesta a JSON y renderizar los datos en el DOM controlando los posibles errores de red.

Bloque 1 — Mecanismos internos del lenguaje Se estudia en profundidad cómo JavaScript resuelve el valor de this según el contexto de invocación: llamada como método de objeto, uso dentro de callbacks y comportamiento especial de las arrow functions, que capturan this del entorno léxico en lugar de definirlo en la invocación. A continuación se analiza el mecanismo de cierre (closure): qué variables quedan capturadas en el entorno léxico de una función, por qué esto puede producir comportamientos inesperados en bucles y cómo corregirlos de forma razonada. El bloque cierra con la comparación entre estructuras de datos modernas —Map frente a Object y Set frente a Array— examinando las diferencias semánticas y de rendimiento que determinan la elección adecuada para cada caso de uso.

Bloque 2 — Asincronía y control de errores Este bloque aborda la asincronía como eje central del JavaScript moderno. Se parte de funciones síncronas de consulta de datos y se recorre el proceso de adaptarlas a async/await, incorporando bloques try/catch para capturar rechazos de promesas sin bloquear el hilo principal. Se profundiza en los problemas más habituales en código asíncrono —race conditions y promesas que nunca se resuelven— y se practica su detección y corrección usando el call stack y la pestaña Network de las DevTools del navegador.

Bloque 3 — DOM, eventos y comunicación con APIs Se revisa la delegación de eventos como estrategia eficiente para gestionar listas de elementos dinámicos: en lugar de registrar un listener en cada nodo, se captura el evento en el ancestro común y se discrimina el origen con event.target. Seguidamente se trabaja el consumo de APIs REST mediante la Fetch API: encadenamiento de la transformación de la respuesta a JSON, propagación y manejo de errores de red, y renderizado de los datos obtenidos en el DOM sin dejar excepciones no controladas.

Bloque 4 — Módulos ES y arquitectura de código El curso concluye con la organización del código en módulos ES nativos. Se diseña un módulo que encapsula una funcionalidad reutilizable —utilidades de formateo o validación— exponiendo únicamente la interfaz pública mediante export e importándola desde otros archivos con import. Se discuten las implicaciones de esta separación de responsabilidades para la mantenibilidad y la colaboración en equipo, cerrando el curso con un ejercicio integrador que combina asincronía, delegación de eventos y módulos en un mini-proyecto funcional.

• Navegador moderno con DevTools disponibles (Google Chrome 120+ o Firefox 121+ recomendados).
• Node.js 20 LTS instalado localmente para ejecutar módulos ES en entorno de desarrollo.
• Editor de código con soporte para JavaScript: Visual Studio Code con las extensiones ESLint y Prettier.
• Acceso a internet para consumir APIs REST públicas durante los ejercicios prácticos (p. ej., JSONPlaceholder o similar).
• Cuenta en una plataforma de sandbox en línea (CodePen, StackBlitz o equivalente) como alternativa al entorno local.

Para aprovechar este curso el participante debe haber completado JJS01 — JavaScript Iniciación o demostrar un dominio equivalente de los siguientes conceptos: sintaxis ES6+ (variables con let/const, arrow functions, destructuring, template literals), manipulación básica del DOM, uso de funciones de orden superior (map, filter, reduce) y comprensión elemental del modelo de eventos del navegador.