Introducción
Bienvenido a esta guía completa diseñada para equiparte con el conocimiento y la confianza necesarios para destacar en entrevistas de JavaScript. Este documento cubre meticulosamente un amplio espectro de temas, desde conceptos fundamentales de JavaScript y paradigmas avanzados hasta desafíos prácticos de codificación y principios de diseño de sistemas. Ya seas un desarrollador principiante o un ingeniero experimentado, este recurso ofrece preguntas y respuestas detalladas en áreas clave como JavaScript asíncrono, frameworks (React, Angular, Vue), testing y mejores prácticas. Prepárate para agudizar tus habilidades, comprender errores comunes y navegar con confianza en cualquier escenario de entrevista de JavaScript.
Conceptos Fundamentales de JavaScript
Explica la diferencia entre null y undefined en JavaScript.
Respuesta:
undefined significa que una variable ha sido declarada pero aún no se le ha asignado un valor, o que una propiedad no existe. null es un valor de asignación, que significa 'sin valor' o 'vacío'. Es un valor primitivo que representa la ausencia intencional de cualquier valor de objeto.
¿Cuál es el propósito de la palabra clave this en JavaScript?
Respuesta:
La palabra clave this se refiere al contexto en el que se ejecuta una función. Su valor depende de cómo se llama a la función: puede referirse al objeto global, a un método de objeto, a un constructor o a un objeto específico cuando se usan call(), apply() o bind().
Describe el concepto de hoisting en JavaScript.
Respuesta:
Hoisting es un mecanismo de JavaScript donde las declaraciones de variables y funciones se mueven a la parte superior de su ámbito contenedor durante la fase de compilación. Esto significa que puedes usar variables y funciones antes de que se declaren en el código, aunque solo se elevan las declaraciones, no las inicializaciones.
¿Qué es una closure en JavaScript?
Respuesta:
Una closure es una función empaquetada junto con su entorno léxico. Permite que una función acceda a variables de su ámbito exterior (envolvente), incluso después de que la función exterior haya terminado de ejecutarse. Esto permite la privacidad de los datos y funciones con estado.
Explica el event loop en JavaScript.
Respuesta:
El event loop (bucle de eventos) es una parte fundamental del modelo de concurrencia de JavaScript, que permite operaciones de I/O no bloqueantes. Comprueba continuamente la cola de mensajes en busca de tareas y las inserta en la pila de llamadas cuando la pila está vacía, permitiendo que las operaciones asíncronas se procesen.
¿Cuál es la diferencia entre los operadores == y ===?
Respuesta:
== es el operador de igualdad flexible (loose equality), que realiza coerción de tipo antes de la comparación. === es el operador de igualdad estricta (strict equality), que compara tanto el valor como el tipo sin coerción de tipo. Generalmente se recomienda usar === para evitar problemas inesperados de conversión de tipos.
¿Cómo difieren let, const y var en términos de ámbito (scope) y hoisting?
Respuesta:
var tiene ámbito de función (function-scoped) y se eleva (hoisted) con un valor inicial de undefined. let y const tienen ámbito de bloque (block-scoped) y también se elevan, pero están en una 'zona muerta temporal' (temporal dead zone) hasta que se alcanza su declaración, lo que significa que no se puede acceder a ellas antes de su declaración. const también requiere inicialización inmediata y no se puede reasignar.
¿Qué son las arrow functions y cuáles son sus beneficios?
Respuesta:
Las arrow functions (funciones flecha) son una forma concisa de escribir expresiones de función en ES6. Sus principales beneficios incluyen una sintaxis más corta y, lo que es crucial, no enlazan su propio valor de this; en su lugar, heredan this del contexto léxico envolvente, resolviendo problemas comunes de enlace de this.
Explica la herencia prototípica en JavaScript.
Respuesta:
La herencia prototípica es el principal mecanismo de herencia de JavaScript. Los objetos pueden heredar propiedades y métodos de otros objetos a través de su cadena de prototipos (prototype chain). Cuando se accede a una propiedad en un objeto, si no se encuentra directamente en el objeto, JavaScript busca en la cadena de prototipos hasta que encuentra la propiedad o llega a null.
¿Cuál es la diferencia entre JavaScript síncrono y asíncrono?
Respuesta:
JavaScript síncrono ejecuta el código secuencialmente, una línea a la vez, bloqueando la ejecución posterior hasta que la operación actual se completa. JavaScript asíncrono permite que las operaciones se ejecuten en segundo plano sin bloquear el hilo principal, utilizando típicamente callbacks, Promises o async/await, lo que permite I/O no bloqueante y una mejor capacidad de respuesta.
Temas Avanzados de JavaScript
Explica el event loop en JavaScript y su rol en la programación asíncrona.
Respuesta:
El event loop (bucle de eventos) es una parte crucial del modelo de concurrencia de JavaScript. Comprueba continuamente la cola de mensajes (message queue) en busca de tareas (como callbacks de setTimeout o peticiones de red) y las inserta en la pila de llamadas (call stack) cuando esta está vacía. Este mecanismo no bloqueante permite a JavaScript manejar operaciones asíncronas sin congelar el hilo principal.
¿Cuál es la diferencia entre null y undefined en JavaScript?
Respuesta:
undefined significa que una variable ha sido declarada pero aún no se le ha asignado un valor, o que una propiedad no existe. null es un valor de asignación, que significa 'sin valor' o 'vacío'. Es un valor primitivo que representa la ausencia intencional de cualquier valor de objeto.
Describe el concepto de closures en JavaScript y proporciona un ejemplo sencillo.
Respuesta:
Una closure es la combinación de una función empaquetada junto con referencias a su estado circundante (el entorno léxico). Te da acceso al ámbito de una función externa desde una función interna, incluso después de que la función externa haya terminado de ejecutarse. Por ejemplo, function outer() { let count = 0; return function inner() { count++; return count; }; }
¿Qué es la herencia prototípica en JavaScript?
Respuesta:
La herencia prototípica es un mecanismo por el cual los objetos de JavaScript pueden heredar propiedades y métodos de otros objetos. Cada objeto de JavaScript tiene una propiedad prototype, que es una referencia a otro objeto. Cuando intentas acceder a una propiedad en un objeto, si no se encuentra, JavaScript busca en la cadena de prototipos hasta que encuentra la propiedad o llega a null.
Explica el propósito de los métodos bind, call y apply.
Respuesta:
Estos métodos se utilizan para establecer explícitamente el contexto de this de una función. call invoca la función inmediatamente con argumentos pasados individualmente. apply también invoca inmediatamente pero acepta argumentos como un array. bind devuelve una nueva función con el contexto de this permanentemente enlazado, pero no la invoca inmediatamente.
¿Qué son las Promises en JavaScript y por qué se utilizan?
Respuesta:
Las Promises son objetos que representan la eventual finalización o fallo de una operación asíncrona y su valor resultante. Proporcionan una forma más limpia de manejar código asíncrono en comparación con los callbacks tradicionales, evitando el 'callback hell' y mejorando la legibilidad con .then() y .catch().
Diferencia entre los operadores == y ===.
Respuesta:
== es el operador de igualdad que realiza coerción de tipo antes de la comparación, lo que significa que intenta convertir los operandos al mismo tipo. === es el operador de igualdad estricta que compara tanto el valor como el tipo sin ninguna coerción de tipo. Generalmente se recomienda usar === para evitar comportamientos inesperados.
¿Qué es la delegación de eventos (event delegation) y por qué es beneficiosa?
Respuesta:
La delegación de eventos es una técnica en la que adjuntas un único listener de eventos a un elemento padre, en lugar de adjuntar múltiples listeners a elementos hijos individuales. Cuando un evento burbujea desde un hijo, el listener del padre lo maneja. Esto reduce el consumo de memoria y mejora el rendimiento, especialmente con elementos añadidos dinámicamente.
Explica el concepto de 'hoisting' en JavaScript.
Respuesta:
Hoisting es el comportamiento predeterminado de JavaScript de mover las declaraciones a la parte superior del ámbito actual (script o función). Las declaraciones de variables (var) se elevan (hoisted) y se inicializan con undefined, mientras que las declaraciones de funciones se elevan completamente. Las declaraciones let y const también se elevan pero no se inicializan, lo que lleva a una 'zona muerta temporal' (temporal dead zone).
¿Qué es la 'zona muerta temporal' (TDZ) en JavaScript?
Respuesta:
La Zona Muerta Temporal (TDZ) es el período entre la creación del enlace de una variable let o const y la evaluación de su declaración. Durante este tiempo, intentar acceder a la variable resultará en un ReferenceError. Evita el uso de variables antes de que se declaren e inicialicen correctamente.
Describe el propósito de async/await.
Respuesta:
async/await es azúcar sintáctico (syntactic sugar) construido sobre Promises, que hace que el código asíncrono se vea y se comporte más como código síncrono. Una función async siempre devuelve una Promise. La palabra clave await solo se puede usar dentro de una función async y pausa su ejecución hasta que la Promise esperada se resuelve o rechaza.
Resolución de Problemas Basada en Escenarios
Estás construyendo una aplicación de chat en tiempo real. ¿Cómo manejarías la visualización de mensajes en orden cronológico, asegurando que los nuevos mensajes aparezcan abajo sin desplazamiento manual?
Respuesta:
Al recibir un nuevo mensaje, añádelo al DOM del contenedor del chat. Luego, desplaza programáticamente el contenedor hasta su parte inferior usando element.scrollTop = element.scrollHeight para asegurar que el último mensaje sea siempre visible.
Un usuario informa que tu aplicación de página única (SPA) se siente lenta después de navegar por muchas páginas. ¿Cuáles son las causas comunes de esto y cómo lo depurarías/optimizarías?
Respuesta:
Las causas comunes incluyen fugas de memoria (memory leaks) (por ejemplo, listeners de eventos no eliminados), manipulación excesiva del DOM o grandes cargas de datos (data payloads). Usaría las herramientas de desarrollador del navegador (pestaña Memory, pestaña Performance) para identificar fugas o cuellos de botella de rendimiento, y optimizaría usando debouncing/throttling, virtualizando listas o requestAnimationFrame.
Necesitas obtener datos de dos APIs diferentes simultáneamente y mostrar los resultados solo después de que ambas hayan respondido exitosamente. ¿Cómo lograrías esto usando JavaScript moderno?
Respuesta:
Usaría Promise.all(). Este método toma un array de promesas y devuelve una única promesa que se resuelve cuando todas las promesas de entrada se han resuelto, o se rechaza si alguna de las promesas de entrada se rechaza. Esto asegura que ambas peticiones se completen antes de procesar los resultados.
Describe un escenario en el que usarías localStorage frente a sessionStorage frente a cookies.
Respuesta:
localStorage para datos persistentes entre sesiones del navegador (por ejemplo, preferencias del usuario). sessionStorage para datos que solo necesitan persistir durante la sesión de la pestaña actual del navegador (por ejemplo, datos de formularios antes del envío). Cookies para pequeñas cantidades de datos enviadas con cada petición HTTP, a menudo para autenticación o seguimiento.
Tu aplicación realiza llamadas frecuentes a la API. ¿Cómo implementarías un mecanismo de caché para reducir peticiones redundantes y mejorar el rendimiento?
Respuesta:
Implementaría una caché del lado del cliente usando un Map o localStorage. Antes de realizar una llamada a la API, verificaría si los datos ya están en la caché y si siguen siendo válidos (por ejemplo, no expirados). Si es así, devolvería los datos cacheados; de lo contrario, realizaría la petición, la almacenaría y luego devolvería los nuevos datos.
Estás construyendo un formulario con múltiples campos de entrada. ¿Cómo manejarías la validación del formulario de manera eficiente, proporcionando retroalimentación inmediata al usuario sin enviar el formulario?
Respuesta:
Adjuntaría listeners de eventos onchange o onblur a campos de entrada individuales. Cuando una entrada cambia o pierde el foco, ejecutaría reglas de validación específicas para ese campo y mostraría mensajes de error junto a él si es inválido. Una validación final ocurriría al enviar el formulario.
Una parte crítica de tu aplicación implica cálculos complejos que bloquean el hilo principal, causando falta de respuesta en la interfaz de usuario. ¿Cómo descargarías estos cálculos?
Respuesta:
Usaría Web Workers. Los Web Workers permiten ejecutar scripts en un hilo de fondo, separado del hilo de ejecución principal. Esto evita bloquear la interfaz de usuario, manteniendo la aplicación receptiva mientras se realizan cálculos pesados.
Tienes una lista de elementos y necesitas filtrarlos según múltiples criterios (por ejemplo, categoría, rango de precios, disponibilidad). ¿Cómo estructurarías tu lógica de filtrado?
Respuesta:
Encadenaría métodos filter de arrays. Cada criterio de filtro sería una llamada filter separada en el array, reduciendo progresivamente los resultados. Esto hace que la lógica sea modular y fácil de añadir/eliminar criterios.
Necesitas implementar una función 'debounce' para el evento keyup de un campo de entrada para evitar llamadas excesivas a la API mientras se escribe. ¿Cómo lo abordarías?
Respuesta:
Crearía una función de debounce que toma una función y un retraso (delay). Devuelve una nueva función que, cuando se llama, borra cualquier timeout existente y establece uno nuevo. La función original solo se ejecuta después del retraso especificado sin más llamadas.
Tu aplicación necesita soportar capacidades offline. ¿Cómo almacenarías datos localmente para que persistan incluso cuando el usuario está offline?
Respuesta:
Usaría IndexedDB. Es una API de bajo nivel para el almacenamiento del lado del cliente de cantidades significativas de datos estructurados, incluyendo archivos/blobs. Es asíncrona y proporciona un sistema robusto similar a una base de datos para la persistencia de datos offline.
Desafíos Prácticos de Codificación
Escribe una función de JavaScript para invertir una cadena sin usar el método reverse() incorporado.
Respuesta:
Puedes invertir una cadena iterando desde el final hacia el principio y concatenando caracteres, o convirtiéndola a un array, invirtiendo el array y luego uniéndolo de nuevo. Un enfoque común es for (let i = str.length - 1; i >= 0; i--) { reversedStr += str[i]; }.
Implementa una función debounce(func, delay) que limite la frecuencia con la que se puede llamar a una función.
Respuesta:
Debouncing asegura que una función solo se ejecute después de que haya pasado un retraso especificado desde la última vez que se invocó. Típicamente implica un setTimeout y la limpieza del timeout anterior si la función se llama de nuevo dentro del período de retraso. Esto es útil para eventos como redimensionar o escribir.
Escribe una función throttle(func, limit) que limite la frecuencia con la que se puede llamar a una función.
Respuesta:
Throttling asegura que una función se llame como máximo una vez dentro de una ventana de tiempo especificada. Típicamente utiliza un setTimeout y una bandera para rastrear si la función está actualmente en 'enfriamiento' (cooling down). Esto es útil para eventos como el desplazamiento (scrolling) o movimientos del ratón para evitar llamadas excesivas.
Dado un array de números, devuelve un nuevo array solo con los números únicos.
Respuesta:
La forma más eficiente es usar un Set para almacenar valores únicos, luego convertir el Set de nuevo a un array. Alternativamente, puedes iterar a través del array y usar indexOf o includes para verificar duplicados antes de añadirlos a un nuevo array.
Implementa una función deepClone(obj) que cree una copia profunda de un objeto.
Respuesta:
Un clon profundo crea un nuevo objeto con nuevas copias de todos los objetos y arrays anidados, evitando problemas de referencia. Para objetos simples serializables en JSON, JSON.parse(JSON.stringify(obj)) funciona. Para objetos más complejos (funciones, Dates, etc.), se necesita una función recursiva para iterar a través de las propiedades y clonarlas.
Escribe una función que aplane un array anidado (por ejemplo, [1, [2, 3], [4, [5]]] a [1, 2, 3, 4, 5]).
Respuesta:
Puedes usar recursión para aplanar un array anidado. Itera a través del array; si un elemento es un array, llama recursivamente a la función de aplanamiento sobre él y concatena los resultados. De lo contrario, añade el elemento directamente al array de resultados. Array.prototype.flat() es una solución moderna incorporada.
Implementa un equivalente básico de Promise.all.
Respuesta:
Un equivalente de Promise.all toma un array de promesas y devuelve una nueva promesa que se resuelve cuando todas las promesas de entrada se han resuelto, o se rechaza si alguna promesa de entrada se rechaza. Recopila todos los valores resueltos en un array, manteniendo el orden. Usa el constructor Promise con resolve y reject.
Escribe una función para verificar si dos cadenas son anagramas una de la otra.
Respuesta:
Dos cadenas son anagramas si contienen los mismos caracteres con las mismas frecuencias. Un enfoque común es ordenar ambas cadenas alfabéticamente y compararlas. Alternativamente, usa un mapa de frecuencias (hash map) para cada cadena y compara los mapas.
Dado un array de enteros, encuentra la suma máxima de un subarray contiguo.
Respuesta:
Este es el Algoritmo de Kadane. Itera a través del array, manteniendo un registro de la suma máxima actual que termina en la posición actual y la suma máxima general encontrada hasta ahora. Si la suma actual se vuelve negativa, restablécela a cero (o al elemento actual si todos son negativos).
Implementa un emisor de eventos básico (patrón publish/subscribe).
Respuesta:
Un emisor de eventos necesita métodos como on (para suscribirse a un evento), emit (para publicar un evento) y opcionalmente off (para darse de baja). Internamente, mantiene un mapa donde las claves son nombres de eventos y los valores son arrays de funciones de listener. emit itera y llama a estas funciones.
Mejores Prácticas y Patrones de Diseño en JavaScript
¿Cuál es la diferencia entre null y undefined en JavaScript?
Respuesta:
undefined significa que una variable ha sido declarada pero aún no se le ha asignado un valor, o que una propiedad no existe. null es un valor de asignación, lo que significa que una variable ha sido explícitamente asignada para representar 'sin valor' o 'nada'.
Explica el concepto de 'hoisting' en JavaScript.
Respuesta:
Hoisting es el comportamiento predeterminado de JavaScript de mover las declaraciones a la parte superior del ámbito actual (ámbito global o de función) durante la fase de compilación. Esto significa que las variables y funciones se pueden usar antes de que se declaren en el código, aunque solo se elevan las declaraciones, no las inicializaciones.
¿Qué es una closure (clausura) en JavaScript y por qué es útil?
Respuesta:
Una closure es una función empaquetada junto con referencias a su estado circundante (el entorno léxico). Permite que una función acceda a variables de su ámbito exterior incluso después de que la función externa haya terminado de ejecutarse. Las closures son útiles para la privacidad de datos, la creación de variables privadas y la implementación de patrones de programación funcional como el currying.
Describe el bucle de eventos (event loop) en JavaScript.
Respuesta:
El bucle de eventos es una parte fundamental del modelo de concurrencia de JavaScript, que permite operaciones de E/S (I/O) no bloqueantes. Comprueba continuamente la cola de mensajes (message queue) en busca de tareas (como callbacks de setTimeout o solicitudes AJAX) y las inserta en la pila de llamadas (call stack) cuando la pila está vacía, asegurando que las operaciones asíncronas no bloqueen el hilo principal.
¿Qué son las Promises y qué problema resuelven?
Respuesta:
Las Promises son objetos que representan la eventual finalización o falla de una operación asíncrona y su valor resultante. Resuelven el problema del 'callback hell' (infierno de callbacks) al proporcionar una forma más legible y manejable de manejar código asíncrono, permitiendo encadenar operaciones y una mejor gestión de errores.
Explica el concepto de 'debouncing' y 'throttling' y cuándo los usarías.
Respuesta:
Debouncing asegura que una función solo se llame después de un cierto período de inactividad (por ejemplo, entrada de búsqueda). Throttling limita la tasa a la que se puede llamar a una función, ejecutándola como máximo una vez dentro de un marco de tiempo especificado (por ejemplo, eventos de redimensionamiento de ventana o desplazamiento). Ambos optimizan el rendimiento al reducir el número de ejecuciones de funciones.
¿Qué es el 'Module Pattern' (Patrón de Módulo) en JavaScript y cuáles son sus beneficios?
Respuesta:
El Patrón de Módulo es un patrón de diseño utilizado para encapsular variables y métodos privados mientras se expone una API pública. Típicamente utiliza expresiones de función invocadas inmediatamente (IIFEs) para crear un ámbito privado. Sus beneficios incluyen la prevención de la contaminación del ámbito global, la promoción de la organización del código y la consecución de la privacidad de los datos.
¿Cuándo usarías let, const y var?
Respuesta:
const es para variables cuyos valores no serán reasignados (referencias constantes). let es para variables que pueden ser reasignadas dentro de su ámbito de bloque. var tiene ámbito de función y generalmente debe evitarse en JavaScript moderno debido a su comportamiento de hoisting y la falta de ámbito de bloque, lo que puede generar problemas inesperados.
¿Cuál es el propósito de async/await?
Respuesta:
async/await es azúcar sintáctico construido sobre Promises, lo que hace que el código asíncrono se vea y se comporte más como código síncrono. Una función async siempre devuelve una Promise, y await pausa la ejecución de la función async hasta que la Promise se resuelve o rechaza, mejorando la legibilidad y la gestión de errores.
Describe el 'Factory Pattern' (Patrón Fábrica) y proporciona un caso de uso simple.
Respuesta:
El Patrón Fábrica proporciona una interfaz para crear objetos sin especificar sus clases concretas. Centraliza la lógica de creación de objetos, facilitando su gestión y extensión. Un caso de uso simple es crear diferentes tipos de objetos de usuario (por ejemplo, 'Admin', 'Guest', 'Editor') basándose en parámetros de entrada, sin usar directamente new para cada tipo.
¿Qué es la 'memoización' y cómo puede mejorar el rendimiento?
Respuesta:
La memoización es una técnica de optimización donde los resultados de llamadas a funciones costosas se almacenan en caché y se devuelven cuando ocurren las mismas entradas nuevamente. Mejora el rendimiento al evitar cálculos redundantes, siendo especialmente útil para funciones puras con entradas recurrentes, reduciendo el tiempo de ejecución y el consumo de recursos.
Explica el concepto de 'Inmutabilidad' (Immutability) en JavaScript.
Respuesta:
Inmutabilidad significa que una vez que se crea un objeto o estructura de datos, no se puede cambiar. En lugar de modificar los datos existentes, se crean nuevas estructuras de datos con los cambios deseados. Esta práctica simplifica la depuración, previene efectos secundarios inesperados y es crucial en la programación funcional y en bibliotecas de gestión de estado como Redux.
Solución de Problemas y Depuración de JavaScript
¿Cuáles son las herramientas principales que utilizas para depurar JavaScript en un navegador?
Respuesta:
Las herramientas principales son las Herramientas para Desarrolladores (Developer Tools) integradas del navegador, específicamente la 'Consola' (Console) para mensajes de registro y errores, y la pestaña 'Fuentes' (Sources) o 'Depurador' (Debugger) para establecer puntos de interrupción (breakpoints), avanzar paso a paso por el código e inspeccionar variables.
Explica el propósito de console.log() y cuándo lo usarías para depurar.
Respuesta:
console.log() se utiliza para mostrar mensajes, variables u objetos en la consola del navegador. Es invaluable para inspeccionar el estado de las variables en diferentes puntos de ejecución, confirmar rutas de código y comprender el flujo de datos sin detener la ejecución.
¿Cómo se establece un punto de interrupción (breakpoint) en las herramientas de desarrollador del navegador y por qué son útiles?
Respuesta:
Los puntos de interrupción se establecen haciendo clic en el número de línea en la pestaña 'Fuentes' de las herramientas de desarrollador del navegador. Son útiles porque pausan la ejecución del código en una línea específica, lo que te permite inspeccionar la pila de llamadas (call stack), el ámbito (scope) y los valores de las variables en ese momento exacto, facilitando la depuración paso a paso.
¿Cuál es la diferencia entre 'avanzar sobre' (stepping over) y 'entrar en' (stepping into) una función durante la depuración?
Respuesta:
'Avanzar sobre' (F10) ejecuta la línea de código actual, incluidas las llamadas a funciones, y se mueve a la siguiente línea sin entrar en el código interno de la función. 'Entrar en' (F11) entra en la función que se está llamando en la línea actual, lo que te permite depurar su lógica interna.
Describe los tipos comunes de errores que encuentras en JavaScript y cómo podrías abordarlos para depurarlos.
Respuesta:
Los errores comunes incluyen ReferenceError (variable no definida), TypeError (operación sobre tipo incorrecto) y SyntaxError (estructura de código inválida). La depuración implica verificar los mensajes de la consola, inspeccionar los tipos y valores de las variables, y usar puntos de interrupción para rastrear el flujo de ejecución hasta el punto de fallo.
¿Cómo depuras código JavaScript asíncrono, como Promises o async/await?
Respuesta:
Depurar código asíncrono a menudo implica establecer puntos de interrupción dentro de los bloques .then() o catch(), o dentro de funciones async. La 'Pila de Llamadas' (Call Stack) en las herramientas de desarrollo ayuda a rastrear el flujo asíncrono, y console.log() puede confirmar cuándo las promesas se resuelven o rechazan.
¿Qué es una declaración debugger y cómo se utiliza?
Respuesta:
La declaración debugger es una palabra clave de JavaScript que, al encontrarse, pausa la ejecución y abre las herramientas de desarrollador del navegador en esa línea específica. Actúa como un punto de interrupción programático, útil para insertar rápidamente puntos de interrupción temporales sin tener que configurarlos manualmente en la interfaz de usuario.
Estás recibiendo un error 'Uncaught TypeError: Cannot read properties of undefined'. ¿Qué significa esto típicamente y cómo lo depurarías?
Respuesta:
Este error significa que estás intentando acceder a una propiedad o llamar a un método en una variable que es undefined. Para depurar, usaría puntos de interrupción o console.log() para rastrear de dónde se originó el valor undefined, verificando los valores de retorno de las funciones, las respuestas de la API o la inicialización de objetos.
¿Cómo manejas y depuras fugas de memoria (memory leaks) en aplicaciones JavaScript?
Respuesta:
Las fugas de memoria a menudo se depuran utilizando la pestaña 'Memoria' (Memory) en las herramientas de desarrollador del navegador, específicamente tomando instantáneas del heap (heap snapshots) y comparándolas para identificar nodos DOM desconectados, closures no cerradas o oyentes de eventos excesivos. Las herramientas de perfilado ayudan a identificar objetos que no están siendo recolectados por el recolector de basura (garbage collected).
¿Qué es una 'pila de llamadas' (call stack) en el contexto de la depuración y por qué es importante?
Respuesta:
La pila de llamadas es un mecanismo para que un intérprete rastree su lugar en un script que llama a múltiples funciones. En la depuración, muestra la secuencia de llamadas a funciones que llevaron al punto de ejecución actual, ayudando a comprender el flujo e identificar el origen de un error.
Frameworks y Librerías (ej. React, Angular, Vue)
¿Cuál es la diferencia principal entre un framework y una librería en el contexto del desarrollo web?
Respuesta:
Una librería es una colección de código preescrito que tú llamas y controlas (ej. jQuery, React). Un framework, por el contrario, dicta la arquitectura y el flujo de tu aplicación, llamando a tu código cuando es necesario (ej. Angular, Vue). La diferencia clave es la 'inversión de control'.
Explica el concepto de DOM Virtual (Virtual DOM) y por qué React lo utiliza.
Respuesta:
El DOM Virtual es una copia ligera del DOM real. React lo utiliza para mejorar el rendimiento minimizando las manipulaciones directas del DOM. Cuando el estado cambia, React compara el nuevo DOM Virtual con el antiguo, calcula la forma más eficiente de actualizar el DOM real y luego aplica solo los cambios necesarios.
¿Qué son los React Hooks y por qué se introdujeron?
Respuesta:
Los React Hooks son funciones que te permiten 'conectarte' a las características de estado y ciclo de vida de React desde componentes de función. Se introdujeron en React 16.8 para permitir a los desarrolladores escribir lógica con estado sin escribir clases, mejorando la reutilización, legibilidad y testeabilidad del código.
Describe el concepto de 'componentes' y 'módulos' en Angular.
Respuesta:
En Angular, los componentes son los bloques de construcción básicos de la UI, combinando una plantilla, una hoja de estilos y una clase TypeScript. Los módulos (NgModules) son contenedores para un bloque cohesivo de funcionalidad, organizando componentes, servicios y otro código, y definiendo su ámbito de compilación.
¿Qué es el data binding (enlace de datos) en Angular y cuáles son los diferentes tipos?
Respuesta:
El data binding en Angular sincroniza datos entre el código TypeScript del componente y la plantilla HTML. Los tipos principales son: Interpolación {{}} (unidireccional del componente a la vista), Property Binding [] (unidireccional del componente a la vista), Event Binding () (unidireccional de la vista al componente) y Two-Way Binding [()] (que combina property y event binding).
Explica el propósito del sistema de reactividad de Vue.
Respuesta:
El sistema de reactividad de Vue rastrea automáticamente los cambios en las propiedades de los datos y actualiza eficientemente el DOM cuando ocurren esos cambios. Utiliza getters y setters para detectar cambios y un DOM virtual para un patching eficiente, asegurando que la UI se mantenga sincronizada con el estado de la aplicación.
¿Cómo manejas la gestión de estado (state management) en una aplicación React a gran escala?
Respuesta:
Para aplicaciones React a gran escala, las soluciones comunes de gestión de estado incluyen Context API para un estado global más simple, y librerías como Redux o Zustand para una gestión de estado más compleja y predecible. Estas soluciones proporcionan almacenes centralizados y patrones para gestionar el flujo de datos en toda la aplicación.
¿Qué son los lifecycle hooks (ganchos de ciclo de vida) en frameworks como React, Angular o Vue?
Respuesta:
Los lifecycle hooks son métodos especiales que permiten a los desarrolladores ejecutar código en etapas específicas de la existencia de un componente, como la creación, montaje, actualización y desmontaje. Proporcionan puntos de control para la inicialización, la obtención de datos, la manipulación del DOM y la limpieza.
¿Cuándo elegirías Vue.js sobre React o Angular, o viceversa?
Respuesta:
Vue.js se elige a menudo por su simplicidad, curva de aprendizaje suave y flexibilidad, lo que lo hace ideal para proyectos más pequeños o para integrarlo en proyectos existentes. React es preferido para SPAs grandes y complejas debido a su vasto ecosistema y comunidad. Angular es adecuado para aplicaciones a nivel empresarial que requieren un framework estructurado y opinionado con funcionalidades integradas.
¿Cuál es el propósito del routing (enrutamiento) en una Single Page Application (SPA)?
Respuesta:
El enrutamiento en una SPA permite la navegación entre diferentes 'páginas' o vistas sin una recarga completa de la página. Mapea URLs a componentes o vistas específicas, proporcionando una experiencia de usuario fluida al actualizar dinámicamente el contenido según la URL, imitando los sitios web tradicionales de múltiples páginas.
JavaScript Asíncrono y APIs
¿Qué es JavaScript asíncrono y por qué es importante?
Respuesta:
JavaScript asíncrono permite que los programas ejecuten operaciones de larga duración (como solicitudes de red) sin bloquear el hilo principal. Esto es crucial para mantener una interfaz de usuario receptiva y evitar que la aplicación se congele, mejorando la experiencia general del usuario.
Explica el Bucle de Eventos (Event Loop) en JavaScript.
Respuesta:
El Bucle de Eventos es una parte fundamental del modelo de concurrencia de JavaScript. Comprueba continuamente si la pila de llamadas (call stack) está vacía. Si lo está, toma el primer mensaje de la cola de mensajes (task queue) y lo empuja a la pila de llamadas para su ejecución, permitiendo operaciones de I/O no bloqueantes.
¿Qué son las Promises en JavaScript y qué problemas resuelven?
Respuesta:
Las Promises son objetos que representan la eventual finalización o fallo de una operación asíncrona. Proporcionan una forma más limpia de manejar código asíncrono en comparación con los callbacks tradicionales, resolviendo el 'callback hell' al permitir encadenar operaciones asíncronas con .then() y .catch().
Diferencia entre async/await y Promises.
Respuesta:
async/await es azúcar sintáctico construido sobre Promises, haciendo que el código asíncrono se vea y se comporte más como código síncrono. Mientras que las Promises usan .then() y .catch() para el encadenamiento, async/await usa bloques try/catch para el manejo de errores y await para pausar la ejecución hasta que una Promise se resuelva.
¿Cuándo usarías Promise.all() en lugar de Promise.race()?
Respuesta:
Promise.all() se usa cuando necesitas que todas las Promises en un iterable se resuelvan exitosamente antes de continuar; se rechaza si alguna Promise se rechaza. Promise.race() se usa cuando solo te importa la primera Promise en resolverse (resolver o rechazar) entre un iterable de Promises.
¿Cómo manejas los errores en las funciones async/await?
Respuesta:
Los errores en las funciones async/await se manejan usando bloques try...catch estándar, similar al código síncrono. Cualquier Promise rechazada dentro de una expresión await lanzará un error que puede ser capturado por el bloque catch.
¿Qué es el 'callback hell' y cómo lo mitigan las Promises o async/await?
Respuesta:
El 'callback hell' (o 'pirámide de la perdición') ocurre cuando múltiples callbacks asíncronos anidados hacen que el código sea difícil de leer y mantener. Las Promises y async/await lo mitigan proporcionando estructuras más planas y lineales para las operaciones asíncronas, mejorando la legibilidad y el manejo de errores.
Explica la diferencia entre microtareas (microtasks) y macrotareas (macrotasks).
Respuesta:
Las macrotareas (como setTimeout, setInterval, I/O) se procesan una por ciclo del bucle de eventos. Las microtareas (como los callbacks de Promise, queueMicrotask, MutationObserver) se procesan después de la ejecución del script actual y antes de la siguiente macrotarea, lo que significa que todas las microtareas pendientes se ejecutan antes de la siguiente macrotarea.
¿Cuál es el propósito de la API fetch?
Respuesta:
La API fetch proporciona una interfaz moderna basada en Promises para realizar solicitudes de red (ej. solicitudes HTTP) en navegadores web y Node.js. Es una alternativa más potente y flexible a XMLHttpRequest para obtener recursos a través de la red.
¿Puedes explicar las funciones async sin await?
Respuesta:
Una función async sin la palabra clave await seguirá devolviendo una Promise. Sin embargo, se comportará como una función síncrona regular, resolviendo inmediatamente su valor devuelto en una Promise. La palabra clave async principalmente indica que la función eventualmente devolverá una Promise.
Estrategias de Testing y Despliegue
¿Cuáles son los principales tipos de testing en el desarrollo de software y en qué se diferencian?
Respuesta:
Los principales tipos son pruebas Unitarias (Unit), de Integración (Integration) y de Extremo a Extremo (End-to-End o E2E). Las pruebas unitarias verifican componentes individuales de forma aislada, las pruebas de integración comprueban las interacciones entre componentes, y las pruebas E2E simulan flujos de usuario a través de todo el sistema.
Explica el concepto de 'desarrollo guiado por pruebas' (TDD).
Respuesta:
TDD es una metodología de desarrollo en la que escribes pruebas fallidas antes de escribir el código mínimo necesario para que pasen. Este ciclo (Red-Green-Refactor) asegura que el código sea testeable, mejora el diseño y proporciona retroalimentación inmediata sobre los cambios.
¿Cuáles son algunos frameworks y librerías populares de testing en JavaScript?
Respuesta:
Para pruebas unitarias y de integración, Jest y Mocha son muy populares. Para pruebas E2E, Cypress y Playwright son ampliamente utilizados. React Testing Library y Enzyme son comunes para probar componentes de React.
¿Cómo configuras típicamente un pipeline de CI/CD para una aplicación JavaScript?
Respuesta:
Un pipeline de CI/CD típicamente involucra pasos como obtener código de un repositorio, instalar dependencias, ejecutar pruebas, construir la aplicación y luego desplegarla a un entorno de staging o producción. Herramientas como GitHub Actions, GitLab CI o Jenkins automatizan este proceso.
¿Cuál es el propósito de un 'entorno de staging' en el despliegue?
Respuesta:
Un entorno de staging es una réplica del entorno de producción utilizada para pruebas finales antes del despliegue. Permite a los equipos verificar la funcionalidad, el rendimiento y la estabilidad en un entorno similar a producción sin afectar a los usuarios activos.
Describe el 'versionado semántico' (semantic versioning) y por qué es importante para los despliegues.
Respuesta:
El versionado semántico (MAJOR.MINOR.PATCH) indica el tipo de cambios en una versión. MAJOR para cambios que rompen la compatibilidad, MINOR para nuevas funcionalidades (compatibles hacia atrás), y PATCH para correcciones de errores (compatibles hacia atrás). Ayuda a los usuarios a comprender el impacto de las actualizaciones y a gestionar las dependencias de manera efectiva.
¿Qué son las estrategias de 'rollback' (reversión) en el despliegue y por qué son necesarias?
Respuesta:
Las estrategias de rollback permiten revertir rápidamente a una versión anterior y estable de una aplicación si un nuevo despliegue introduce problemas críticos. Esto minimiza el tiempo de inactividad y el impacto en los usuarios, a menudo logrado manteniendo versiones anteriores fácilmente disponibles.
Explica la diferencia entre 'integración continua' (CI) y 'entrega continua' (CD).
Respuesta:
CI implica fusionar frecuentemente los cambios de código en un repositorio central, seguido de compilaciones y pruebas automatizadas. CD extiende CI al preparar y hacer que los cambios de código estén listos para su lanzamiento a producción de forma automática, a menudo con un paso de aprobación manual. El Despliegue Continuo automatiza completamente el lanzamiento a producción.
¿Qué es el 'snapshot testing' (pruebas de instantánea) y cuándo lo usarías?
Respuesta:
El snapshot testing, a menudo utilizado con Jest, captura la salida o estructura de datos de un componente renderizado y la compara con una instantánea guardada previamente. Es útil para asegurar que los componentes de la UI no cambien involuntariamente, especialmente durante la refactorización.
¿Cómo manejas las configuraciones específicas del entorno en una aplicación JavaScript durante el despliegue?
Respuesta:
Las configuraciones específicas del entorno (ej. claves de API, URLs de bases de datos) se gestionan típicamente usando variables de entorno. Estas variables se inyectan en la compilación o en tiempo de ejecución de la aplicación según el entorno de destino (desarrollo, staging, producción) para asegurar la configuración correcta.
Diseño de Sistemas y Arquitectura
Explica la diferencia entre escalado horizontal y vertical en el contexto de una aplicación web.
Respuesta:
El escalado horizontal implica añadir más máquinas a tu grupo de recursos (ej. más servidores), distribuyendo la carga entre ellas. El escalado vertical implica aumentar los recursos (CPU, RAM) de una sola máquina. El escalado horizontal es generalmente más flexible y resiliente.
¿Qué es una CDN (Content Delivery Network) y por qué es importante para el rendimiento web?
Respuesta:
Una CDN es una red geográficamente distribuida de servidores proxy y centros de datos. Mejora el rendimiento web almacenando en caché contenido estático (imágenes, CSS, JS) más cerca del usuario final, reduciendo la latencia y la carga del servidor de origen. Esto acelera la entrega de contenido y mejora la experiencia del usuario.
Describe el propósito de un balanceador de carga (load balancer) en un sistema distribuido.
Respuesta:
Un balanceador de carga distribuye el tráfico de red entrante entre múltiples servidores para asegurar que ningún servidor esté sobrecargado. Mejora la disponibilidad, escalabilidad y fiabilidad de la aplicación al prevenir cuellos de botella y proporcionar tolerancia a fallos mediante comprobaciones de estado y redirección de tráfico.
¿Cuándo elegirías una base de datos NoSQL en lugar de una base de datos relacional (SQL)?
Respuesta:
Elige NoSQL cuando trabajes con grandes volúmenes de datos no estructurados o semiestructurados, requieras alta escalabilidad y flexibilidad, o necesites ciclos de desarrollo rápidos. Las bases de datos SQL son preferibles para transacciones complejas, fuerte consistencia de datos y esquemas bien definidos.
¿Qué son los microservicios y cuáles son sus ventajas y desventajas?
Respuesta:
Los microservicios son un estilo de arquitectura de software donde una aplicación se construye como una colección de servicios pequeños e independientes. Las ventajas incluyen despliegue independiente, escalabilidad y diversidad tecnológica. Las desventajas incluyen una mayor complejidad operativa, gestión de datos distribuidos y sobrecarga en la comunicación entre servicios.
Explica la consistencia eventual (eventual consistency) en sistemas distribuidos.
Respuesta:
La consistencia eventual es un modelo de consistencia donde, si no se realizan nuevas actualizaciones a un elemento de datos dado, todas las lecturas de ese elemento eventualmente devolverán el último valor actualizado. Prioriza la disponibilidad y la tolerancia a particiones sobre la consistencia inmediata, común en bases de datos NoSQL.
¿Qué es el caching (almacenamiento en caché) y cuáles son las estrategias comunes de caching?
Respuesta:
El caching es el almacenamiento de datos accedidos frecuentemente en una capa de almacenamiento temporal más rápida para reducir el tiempo de recuperación de la fuente principal. Las estrategias comunes incluyen 'write-through' (los datos se escriben en la caché y la base de datos simultáneamente), 'write-back' (los datos se escriben en la caché y luego asincrónicamente en la base de datos) y 'cache-aside' (la aplicación gestiona las lecturas/escrituras de la caché).
¿Cómo manejas la gestión de sesiones en una aplicación escalada horizontalmente?
Respuesta:
En una aplicación escalada horizontalmente, la gestión de sesiones requiere un almacén externo compartido como Redis o Memcached para asegurar que los datos de sesión sean accesibles por cualquier instancia del servidor. También se pueden usar sesiones pegajosas (sticky sessions) (el balanceador de carga siempre dirige al usuario al mismo servidor), pero esto reduce la flexibilidad.
¿Cuál es el rol de una cola de mensajes (message queue, ej. RabbitMQ, Kafka) en el diseño de sistemas?
Respuesta:
Una cola de mensajes facilita la comunicación asíncrona entre diferentes partes de un sistema distribuido. Desacopla servicios, almacena en búfer solicitudes durante picos de carga y asegura la entrega fiable de mensajes, mejorando la resiliencia, escalabilidad y capacidad de respuesta del sistema.
Describe el concepto de idempotencia en el diseño de APIs.
Respuesta:
Una operación idempotente es aquella que produce el mismo resultado ya sea que se ejecute una vez o múltiples veces. Por ejemplo, una solicitud DELETE debería eliminar un recurso una vez, y las solicitudes DELETE idénticas subsiguientes no deberían alterar más el estado del sistema. Esto es crucial para sistemas distribuidos fiables.
¿Qué es el teorema CAP y sus implicaciones para la elección de bases de datos?
Respuesta:
El teorema CAP establece que un almacén de datos distribuido solo puede garantizar dos de tres propiedades: Consistencia (Consistency), Disponibilidad (Availability) y Tolerancia a Particiones (Partition tolerance). Las bases de datos relacionales típicamente priorizan Consistencia y Disponibilidad (CA), mientras que las bases de datos NoSQL a menudo priorizan Disponibilidad y Tolerancia a Particiones (AP) o Consistencia y Tolerancia a Particiones (CP).
Resumen
Navegar por las entrevistas de JavaScript puede ser una experiencia desafiante pero gratificante. Este documento ha tenido como objetivo proporcionarte una base sólida de preguntas comunes y respuestas efectivas, cubriendo conceptos fundamentales, temas avanzados y escenarios prácticos. Al revisar diligentemente estas preguntas y comprender los principios subyacentes, has dado un paso importante para demostrar tu competencia y confianza. Recuerda, un candidato bien preparado no solo conoce las respuestas, sino que también comprende el "por qué" detrás de ellas.
El viaje de un desarrollador de JavaScript es de aprendizaje y adaptación continuos. Si bien esta guía proporciona información valiosa para las entrevistas, la verdadera maestría proviene de la práctica constante, la construcción de proyectos y la actualización con el ecosistema de JavaScript en constante evolución. Abraza la oportunidad de aprender de cada entrevista, ya sea exitosa o no, y deja que impulse tu crecimiento. Sigue codificando, sigue explorando y sigue superando los límites de lo que puedes crear con JavaScript.
