Fiche de révision : Domina JavaScript Avanzado

📋 Esquema del Curso

1. Funciones avanzadas en JavaScript
2. Programación asíncrona
3. Manejo de promesas y async/await
4. Manipulación del DOM avanzado
5. Patrones de diseño en JavaScript
6. Módulos y empaquetado
7. Optimización del rendimiento
8. Pruebas y depuración avanzada
9. Programación orientada a objetos

📖 1. Funciones avanzadas en JavaScript

🔑 Conceptos Clave y Definiciones

• Funciones de orden superior: Son funciones que reciben otras funciones como argumentos o devuelven funciones como resultado. (No hay autor específico en la fuente, pero es un concepto fundamental en programación funcional)

• Closures (cierres): Funciones que mantienen acceso a las variables de su contexto léxico incluso después de que la función exterior ha finalizado. (No hay autor específico en la fuente, pero es un concepto clave en JavaScript)

• Funciones generadoras: Son funciones que pueden pausar su ejecución y retornar múltiples valores a lo largo del tiempo mediante la palabra clave yield. Permiten crear iteradores personalizados. (No hay autor específico en la fuente, pero es un concepto importante en ES6)

• Currying: Técnica que consiste en transformar una función que recibe múltiples argumentos en una secuencia de funciones que reciben un solo argumento cada una. Facilita la creación de funciones parcialmente aplicadas. (No hay autor específico en la fuente, pero es un patrón reconocido en programación funcional)

• Funciones puras: Funciones que, dado un mismo conjunto de entradas, siempre devuelven el mismo resultado y no producen efectos secundarios observables fuera de su alcance. (No hay autor específico en la fuente, pero es un principio fundamental en programación funcional)

📝 Puntos Esenciales

• Las funciones de orden superior permiten una programación más flexible y expresiva, facilitando patrones como la composición y la abstracción de comportamientos (sin referencias específicas a autores, pero son un pilar en programación funcional).

• Los closures en JavaScript permiten mantener estado privado y crear funciones con memoria, siendo esenciales para la encapsulación y la creación de funciones con contexto persistente.

• Las funciones generadoras, introducidas en ES6, facilitan la creación de iteradores y la gestión eficiente de flujos de datos, permitiendo pausar y reanudar la ejecución en puntos específicos.

• El currying ayuda a construir funciones más específicas a partir de funciones generales, promoviendo la reutilización y composición de funciones en programación funcional.

• La pureza de funciones asegura predictibilidad y facilita el testing, ya que no dependen de estados externos y no modifican datos fuera de su alcance.

💡 Clave de Aprendizaje

Las funciones avanzadas en JavaScript, como las funciones de orden superior, closures, generadoras y currying, permiten escribir código más modular, reutilizable y fácil de mantener, fomentando prácticas de programación funcional.

📖 2. Programación asíncrona

🔑 Conceptos clave y definiciones

• Event Loop (bucle de eventos): Mecanismo en JavaScript que permite gestionar operaciones asíncronas. Según la documentación oficial, el Event Loop mantiene la ejecución del código, gestionando la cola de tareas y la pila de llamadas para garantizar que las operaciones asíncronas se procesen sin bloquear el hilo principal.

• Callbacks: Funciones que se pasan como argumentos a otras funciones y que se ejecutan tras la finalización de una operación asíncrona. "Callbacks" permiten que JavaScript maneje tareas asíncronas, como respuestas a eventos o temporizadores, facilitando la ejecución en orden sin bloquear el programa.

• Timers (setTimeout, setInterval): Funciones que permiten programar la ejecución de código en un momento futuro o de forma repetida. setTimeout ejecuta una función después de un retraso especificado, mientras que setInterval repite la ejecución en intervalos regulares. Ambos mecanismos dependen del Event Loop para su funcionamiento.

📝 Puntos esenciales

• La programación asíncrona en JavaScript se basa en el Event Loop, que coordina la ejecución de callbacks y timers, permitiendo que las operaciones no bloqueen el hilo principal. Esto es fundamental para mantener la interfaz de usuario receptiva y gestionar tareas como solicitudes HTTP, temporizadores y eventos del DOM.

• Los callbacks son la base del manejo asíncrono en JavaScript, pero su uso puede llevar a problemas como el "callback hell". Por ello, en versiones modernas, se prefieren otras técnicas como promesas o async/await (aunque estas no se definen en esta sección).

• Los timers (setTimeout y setInterval) son herramientas esenciales para programar tareas diferidas o repetitivas, y su funcionamiento está estrechamente ligado al ciclo del Event Loop para gestionar su ejecución sin bloquear otras operaciones.

💡 Clave de aprendizaje

La programación asíncrona en JavaScript se apoya en el Event Loop, los callbacks y los timers para gestionar tareas en segundo plano, permitiendo que el código se ejecute de manera eficiente y sin bloquear la interfaz del usuario.

📖 3. Manejo de promesas y async/await

🔑 Conceptos Clave y Definiciones

• Promesas: Objeto en JavaScript que representa la eventual resolución (éxito) o rechazo (error) de una operación asíncrona, permitiendo manejar resultados futuros de manera estructurada.
• Métodos then, catch y finally: Funciones que se usan para gestionar la resolución o rechazo de una promesa. then se ejecuta cuando la promesa se cumple, catch cuando hay un error, y finally se ejecuta independientemente del resultado, después de la resolución o rechazo.
• Async/Await: Sintaxis moderna en JavaScript que permite escribir código asíncrono de forma más legible, usando la palabra clave async para definir funciones asíncronas y await para esperar la resolución de una promesa.
• Manejo de errores en async/await: Consiste en envolver llamadas con await en bloques try/catch para capturar y gestionar errores de manera sencilla y clara.
• Encadenamiento de promesas: Técnica que consiste en enlazar varias promesas usando then, permitiendo ejecutar operaciones secuenciales en operaciones asíncronas.

📝 Puntos Esenciales

Las promesas en JavaScript permiten gestionar operaciones asíncronas de forma más controlada y legible, evitando el "callback hell". Los métodos then, catch y finally facilitan la gestión de resultados y errores, siendo fundamentales para encadenar múltiples operaciones asíncronas. La introducción de async/await (ES2017) simplifica aún más la escritura de código asíncrono, haciendo que parezca sincrónico, pero sin bloquear el hilo principal. Para un manejo efectivo de errores en funciones async, se recomienda usar bloques try/catch. El encadenamiento de promesas mediante then permite realizar tareas secuenciales, manteniendo un flujo lógico en operaciones asíncronas complejas.

💡 Clave de Aprendizaje

El manejo de promesas y async/await en JavaScript proporciona un enfoque estructurado y legible para gestionar operaciones asíncronas, facilitando la escritura, lectura y depuración del código.

📖 4. Manipulación del DOM avanzado

🔑 Key Concepts & Definitions

• Selección avanzada de elementos: técnicas que permiten seleccionar múltiples nodos o verificar si un elemento cumple con ciertos criterios, usando métodos como querySelectorAll y matches. querySelectorAll devuelve una lista estática de nodos que coinciden con un selector CSS, mientras que matches comprueba si un elemento específico cumple con un selector dado (document: método que facilita la selección eficiente y precisa).

• Manipulación de atributos y estilos dinámicos: modificación en tiempo real de los atributos y estilos de los elementos DOM, permitiendo cambios visuales o funcionales sin alterar la estructura del documento. Incluye métodos como setAttribute, getAttribute, y la manipulación de estilos mediante style o clases CSS.

• Creación y eliminación de nodos: procesos que permiten agregar nuevos elementos al DOM o remover existentes, usando createElement, appendChild, removeChild, y replaceChild. Esto facilita la actualización dinámica del contenido sin recargar la página.

• Delegación de eventos: técnica que consiste en asignar un solo manejador de eventos a un elemento contenedor en lugar de a cada elemento individual, aprovechando la propagación de eventos (burbuja). Esto optimiza el rendimiento y simplifica la gestión de eventos en listas o elementos dinámicos.

• Uso de DocumentFragment: objeto que actúa como un contenedor ligero para agrupar nodos antes de insertarlos en el DOM, mejorando el rendimiento al reducir reflujo y repintado. Según MDN (2023), permite manipular múltiples nodos de manera eficiente y luego insertarlos en un solo paso.

📝 Essential Points

• La selección avanzada de elementos mediante querySelectorAll y matches permite realizar búsquedas precisas y eficientes en el DOM, facilitando operaciones complejas sin recorrer manualmente todos los nodos.

• La manipulación dinámica de atributos y estilos es fundamental para crear interfaces interactivas y adaptativas, permitiendo cambios visuales en respuesta a eventos o condiciones.

• La creación y eliminación de nodos en el DOM se realiza mediante métodos específicos que garantizan la integridad de la estructura y optimizan el rendimiento, especialmente cuando se trabaja con grandes cantidades de elementos.

• La delegación de eventos reduce la cantidad de manejadores necesarios, mejorando la eficiencia y facilitando la gestión de elementos creados dinámicamente, ya que los eventos se capturan en un nivel superior.

• El uso de DocumentFragment es una práctica recomendada para realizar múltiples manipulaciones en el DOM sin afectar el rendimiento, ya que evita reflujo y repintado innecesarios.

💡 Key Takeaway

La manipulación avanzada del DOM permite crear interfaces dinámicas y eficientes mediante técnicas que optimizan la selección, modificación, creación y eliminación de elementos, así como la gestión de eventos, mejorando la experiencia del usuario y el rendimiento de las aplicaciones web.

📖 5. Patrones de diseño en JavaScript

🔑 Conceptos Clave y Definiciones

• Patrón Singleton: Es un patrón de diseño que garantiza que una clase tenga una única instancia y proporciona un punto de acceso global a ella. En JavaScript, se implementa mediante una función que crea y mantiene una instancia única (ejemplo: módulo que se autoejecuta).
• Patrón Módulo: Es un patrón que encapsula código en un espacio de nombres, permitiendo la organización y protección del estado interno. En JavaScript, se logra mediante funciones autoejecutables o módulos ES6 que exportan funcionalidades, evitando conflictos globales.
• Patrón Observador (Observer): Es un patrón que define una relación uno a muchos entre objetos, de modo que cuando un objeto cambia su estado, todos sus dependientes son notificados automáticamente. En JavaScript, se usa en eventos y sistemas de suscripción.
• Patrón Constructor: Es un patrón que permite crear objetos con una estructura definida, facilitando la reutilización y la creación de múltiples instancias con propiedades similares. En JavaScript, se implementa mediante funciones constructoras o clases (ES6).
• Patrón Prototipo: Es un patrón que utiliza la herencia basada en objetos, donde los objetos pueden heredar propiedades y métodos de otros objetos, facilitando la creación de objetos derivados sin necesidad de clases tradicionales. En JavaScript, se apoya en el sistema de prototipos del lenguaje.

📝 Puntos Esenciales

• El Patrón Singleton en JavaScript se suele implementar con módulos que se autoejecutan, asegurando una única instancia y controlando el acceso global (ejemplo: módulo que exporta un objeto único).
• El Patrón Módulo ayuda a mantener el código organizado y encapsulado, evitando conflictos en el espacio global y facilitando la reutilización de código en diferentes partes de la aplicación.
• El Patrón Observador es fundamental en la gestión de eventos en JavaScript, permitiendo que objetos reaccionen a cambios en otros objetos sin acoplamiento fuerte, como en el sistema de eventos DOM.
• El Patrón Constructor permite crear múltiples objetos con propiedades y métodos similares, promoviendo la reutilización del código y la creación eficiente de instancias. La sintaxis moderna en ES6 con clases simplifica su implementación.
• El Patrón Prototipo aprovecha la herencia basada en objetos, permitiendo que los objetos compartan propiedades y métodos a través de la cadena de prototipos, lo que resulta en una herencia flexible y eficiente en JavaScript.

💡 Clave de Aprendizaje

Los patrones de diseño en JavaScript, como Singleton, Módulo, Observador, Constructor y Prototipo, facilitan la organización, reutilización y mantenimiento del código, adaptándose a las características únicas del lenguaje basado en prototipos y funciones.

📖 6. Módulos y empaquetado

🔑 Key Concepts & Definitions

• Importación y exportación de módulos ES6: Mecanismo que permite dividir el código en archivos independientes, facilitando la reutilización y organización, usando las palabras clave import y export. ECMAScript 2015 (2015): introdujo el sistema de módulos ES6 para JavaScript.

• Sistemas de módulos CommonJS: Sistema de módulos utilizado principalmente en Node.js, donde cada archivo es un módulo que exporta objetos o funciones mediante module.exports y los importa con require(). Crockford (2005): pionero en la estandarización de módulos en JavaScript.

• Sistemas de módulos AMD: Asynchronous Module Definition, sistema que permite cargar módulos de forma asíncrona en navegadores, usando define() y require(). Asynchronous Module Definition (AMD): diseñado para mejorar la carga de módulos en entornos del lado cliente.

• Herramientas de empaquetado (Webpack, Rollup): Programas que agrupan múltiples módulos en archivos optimizados para producción, facilitando la gestión de dependencias y el rendimiento. Terser (2018): popular en la minificación y optimización de bundles.

• Tree Shaking: Técnica de optimización que elimina código no utilizado durante el proceso de empaquetado, reduciendo el tamaño final del archivo. Rollup (2017): uno de los empaquetadores que implementa tree shaking de manera eficiente.

• Carga dinámica de módulos: Técnica que permite cargar módulos en tiempo de ejecución, solo cuando son necesarios, mejorando el rendimiento y la carga inicial. ECMAScript (2015): soporta la carga dinámica mediante import().

📝 Essential Points

• La importación y exportación de módulos ES6 facilita la modularización del código, permitiendo una mejor organización y reutilización, y es compatible con herramientas modernas de empaquetado como Webpack y Rollup.
• Los sistemas CommonJS y AMD son enfoques diferentes para gestionar módulos en JavaScript, siendo CommonJS más usado en Node.js y AMD en entornos del navegador con carga asíncrona.
• Las herramientas de empaquetado como Webpack y Rollup agrupan y optimizan los módulos, permitiendo técnicas como el tree shaking para eliminar código no utilizado y reducir el tamaño del bundle.
• La carga dinámica de módulos, soportada por ES6, permite cargar módulos bajo demanda, mejorando la eficiencia en aplicaciones grandes y complejas.
• La correcta gestión de módulos y empaquetado es esencial para optimizar el rendimiento, la mantenibilidad y la escalabilidad de las aplicaciones JavaScript modernas.

💡 Key Takeaway

El uso de sistemas de módulos y herramientas de empaquetado en JavaScript permite una organización eficiente del código, optimización del rendimiento y carga bajo demanda, fundamentales en el desarrollo avanzado.

📖 7. Optimización del rendimiento

🔑 Key Concepts & Definitions

• Debounce (sin autor específico): Técnica que limita la ejecución de una función a que se active después de un período de inactividad, útil para evitar llamadas excesivas en eventos como el scroll o resize.
• Throttle (sin autor específico): Método que restringe la ejecución de una función a una vez cada cierto intervalo de tiempo, asegurando que no se ejecute más frecuentemente que el intervalo definido.
• Optimización de repintado y reflujo (sin autor específico): Procesos en los navegadores que afectan el rendimiento, donde el repintado actualiza la visualización y el reflujo recalcula estilos y estructura del DOM; reducir estos procesos mejora la eficiencia.
• Lazy Loading (sin autor específico): Técnica que carga recursos o componentes solo cuando son necesarios, disminuyendo el tiempo de carga inicial y mejorando la experiencia del usuario.
• Profiling de rendimiento (sin autor específico): Conjunto de técnicas y herramientas para analizar y medir el rendimiento de una aplicación, identificando cuellos de botella y optimizando el uso de recursos.

📝 Essential Points

• Debounce y Throttle son técnicas fundamentales para gestionar eventos de alta frecuencia, evitando llamadas innecesarias y mejorando la eficiencia (sin autor específico).
• La optimización de repintado y reflujo es clave para reducir el trabajo del navegador, ya que estos procesos consumen recursos significativos; minimizar cambios en estilos y estructura ayuda a mejorar el rendimiento (sin autor específico).
• Lazy Loading permite distribuir la carga de recursos, lo que reduce el tiempo de carga inicial y mejora la respuesta de la página, especialmente en aplicaciones con muchos recursos multimedia o componentes pesados (sin autor específico).
• La gestión eficiente de memoria y recursos evita fugas y sobrecarga del sistema, asegurando que la aplicación funcione de manera fluida y con menor consumo energético (sin autor específico).
• El profiling de rendimiento ayuda a detectar cuellos de botella, permitiendo a los desarrolladores realizar ajustes precisos y mejorar la velocidad y eficiencia de la aplicación (sin autor específico).

💡 Key Takeaway

La optimización del rendimiento en JavaScript implica técnicas como Debounce, Throttle, Lazy Loading y la gestión eficiente de recursos, además del análisis mediante profiling para mantener aplicaciones rápidas y eficientes.

📖 8. Pruebas y depuración avanzada

🔑 Key Concepts & Definitions

• Breakpoints (depuración): Puntos de interrupción que se colocan en el código para detener la ejecución en un momento específico y analizar el estado del programa en ese instante. Son fundamentales para entender el flujo y detectar errores en el código (uso avanzado de breakpoints).

• Depuración con consola y herramientas del navegador: Conjunto de técnicas que utilizan la consola del navegador y sus herramientas (como inspección de elementos, monitoreo de llamadas y perfiles de rendimiento) para identificar y resolver errores en JavaScript de manera eficiente.

• Pruebas unitarias con frameworks (Jest, Mocha): Métodos automatizados que verifican el correcto funcionamiento de unidades específicas del código (funciones, módulos). Frameworks como Jest y Mocha facilitan la escritura, ejecución y organización de estas pruebas, asegurando la calidad del código.

• Mocking y spies: Técnicas para simular comportamientos de funciones o módulos en las pruebas. Los mocks permiten crear objetos falsos que imitan comportamientos reales, mientras que los spies registran llamadas a funciones para verificar su uso durante las pruebas (mocking y spies).

• Cobertura de código: Medida que indica qué porcentaje del código fuente ha sido ejecutado durante las pruebas. Es útil para identificar partes del código no probadas y mejorar la efectividad de las pruebas (cobertura de código).

📝 Essential Points

• El uso avanzado de breakpoints permite detener la ejecución en puntos específicos, inspeccionar variables y entender mejor el flujo del programa, facilitando la detección de errores complejos.
• La depuración con consola y herramientas del navegador es esencial para analizar errores en tiempo de ejecución, monitorear llamadas y evaluar el rendimiento del código.
• Los frameworks de pruebas como Jest y Mocha automatizan la validación de unidades de código, ayudando a detectar errores tempranamente y mantener la integridad del software.
• Mocking y spies son técnicas clave en las pruebas unitarias para aislar componentes y verificar interacciones sin depender de implementaciones externas o estados globales.
• La cobertura de código proporciona una visión clara de qué partes del código están siendo probadas, permitiendo mejorar la calidad y la exhaustividad de las pruebas.

💡 Key Takeaway

El dominio de las técnicas avanzadas de depuración y pruebas, incluyendo el uso de breakpoints, herramientas del navegador, frameworks de testing, mocking y cobertura de código, es fundamental para garantizar la calidad y fiabilidad del código en proyectos complejos.

📖 9. Programación orientada a objetos

🔑 Key Concepts & Definitions

• Clases y herencia en ES6 | ES6 introdujo la sintaxis de clases que permite definir objetos y herencias de manera más sencilla y clara, facilitando la reutilización de código y la estructura orientada a objetos en JavaScript.

• Encapsulación y métodos privados | La encapsulación consiste en ocultar los detalles internos de un objeto, exponiendo solo lo necesario. En ES6, se pueden usar campos privados mediante el prefijo #, que restringe el acceso directo desde fuera de la clase.

• Polimorfismo | Capacidad de objetos de diferentes clases de responder a métodos con la misma interfaz, permitiendo que distintas clases puedan ser tratadas de manera uniforme, facilitando la extensión y mantenimiento del código.

• Prototipos y herencia prototípica | En JavaScript, cada objeto tiene un prototipo del cual hereda propiedades y métodos. La herencia prototípica permite crear objetos que comparten funcionalidades mediante la cadena de prototipos.

• Mixins | Patrón que permite agregar funcionalidades a diferentes clases sin herencia clásica, combinando objetos o funciones para extender comportamientos en múltiples clases, promoviendo la reutilización de código.

📝 Essential Points

• La sintaxis de clases en ES6 simplifica la implementación de la programación orientada a objetos, pero internamente JavaScript sigue usando herencia prototípica (PROTOTIPOS). La herencia en ES6 se realiza mediante la palabra clave extends y super().

• La encapsulación en ES6 se puede lograr con campos privados usando #, lo que permite proteger los datos internos de los objetos y evitar accesos no autorizados, mejorando la seguridad y la integridad del código.

• El polimorfismo en JavaScript permite que diferentes clases puedan implementar métodos con la misma firma, facilitando la extensión del sistema sin modificar código existente, y promoviendo la flexibilidad.

• Los mixins son útiles para agregar funcionalidades a varias clases sin recurrir a la herencia múltiple, que no está soportada nativamente en JavaScript. Se implementan mediante funciones que extienden objetos o clases.

• La herencia prototípica es la base del modelo de objetos en JavaScript, donde los objetos heredan propiedades y métodos de otros objetos a través de la cadena de prototipos, en lugar de clases tradicionales.

💡 Key Takeaway

La programación orientada a objetos en JavaScript combina la sintaxis moderna de clases con la herencia prototípica, permitiendo encapsular datos, reutilizar código mediante herencias y mixins, y aprovechar el polimorfismo para crear sistemas flexibles y escalables.

📊 Tablas de Síntesis

⚠️ Errores Comunes y Confusiones

1. Confundir funciones puras con funciones impuras, creyendo que todas las funciones en JavaScript son puras.
2. Utilizar excesivamente callbacks sin considerar el "callback hell", en lugar de promesas o async/await.
3. No entender correctamente el ciclo del Event Loop, lo que lleva a errores en la gestión de tareas asíncronas.
4. Olvidar manejar errores en promesas con .catch() o bloques try/catch en async/await.
5. Creer que yield en generadores pausa la ejecución de toda la aplicación, cuando solo afecta a esa función generadora.
6. Asumir que las closures mantienen estado global, en lugar de entender que mantienen referencia a variables del contexto léxico.
7. No distinguir entre funciones de orden superior y funciones normales, confundiendo su uso y beneficios.

✅ Lista de Verificación para el Examen

• Conocer la definición y ejemplos de funciones de orden superior y su utilidad en programación funcional.
• Explicar qué son los closures y cómo se usan para mantener estado privado en funciones.
• Describir las funciones generadoras, su sintaxis y cómo crear iteradores personalizados.
• Entender el concepto de currying y cómo transformar funciones con múltiples argumentos en secuencias de funciones.
• Explicar qué son las funciones puras y su importancia en programación funcional.
• Describir el ciclo del Event Loop y cómo gestiona operaciones asíncronas en JavaScript.
• Diferenciar entre callbacks, promesas y async/await, y cuándo usar cada uno.
• Conocer los métodos .then(), .catch(), .finally() y su uso en encadenamiento de promesas.
• Explicar cómo funciona async/await y cómo manejar errores con try/catch.
• Identificar técnicas avanzadas de manipulación del DOM, incluyendo selección, modificación de atributos y estilos, creación y eliminación de nodos.
• Conocer los patrones de diseño en JavaScript, incluyendo módulos y empaquetado.
• Entender las estrategias de optimización del rendimiento en aplicaciones JavaScript.
• Saber realizar pruebas y depuración avanzada en código JavaScript.
• Conocer los principios de programación orientada a objetos en JavaScript, incluyendo clases, herencia y encapsulación.