Preguntas de entrevista front end: guía completa y cheat sheet

Si estás por una entrevista y buscas 'preguntas entrevista desarrollador front end', es porque quieres llegar con respuestas listas (sin quedarte en blanco cuando te pregunten por 'closures' o 'event delegation'). Esta guía junta las preguntas más comunes en entrevistas Front-End (técnicas, de comportamiento y de live coding), más una estructura clara para responder y un cheat sheet para repasar en 10 minutos.

Tip rápido: además de preparar respuestas, asegúrate de que tu CV pase el filtro ATS y matchee con la oferta. Puedes analizar tu CV gratis en Alcaparra (1 análisis ATS gratis sin tarjeta) y ver tu Score ATS 0-100 y el match de keywords MUST/NICE. Mira cómo funciona acá: /como-funciona.

Cómo usar esta guía (y cómo practicar de verdad)

No sirve memorizar definiciones. Lo que sí funciona es:

• Entender el concepto (1 frase)
• Explicar el impacto en producto/performance (1–2 frases)
• Dar un ejemplo concreto (mini caso o snippet)
• Mencionar trade-offs (cuándo usarlo y cuándo no)

Si quieres entrenar esto como en una entrevista real, prueba el simulador de entrevistas con IA (voz, 5 preguntas) para Front-End y practicá cómo lo dices, no solo lo que sabés: /entrevistas. También tiene 1 análisis ATS gratis sin tarjeta.

Preguntas técnicas (Front-End) más comunes

JavaScript (bases que casi siempre aparecen)

• 1) ¿Qué es un closure y para qué sirve?
• Qué buscan: si entendés scope, encapsulación y callbacks.
• Cómo responder: definición simple + ejemplo de función que 'recuerda' variables.

• 2) Diferencias entre var, let y const
• Incluye: scope, hoisting, reasignación y mutabilidad.

• 3) ¿Qué es event delegation y por qué mejora performance?
• Explica bubbling/capturing y el caso de listas dinámicas.

• 4) ¿Qué es el event loop? (microtasks vs macrotasks)
• Que no sea teoría pura: conéctalo con Promises, async/await, render y UI thread.

• 5) ¿Qué diferencia hay entre == y ===?
• Muestra 1 ejemplo de coerción que te haya causado un bug.

• 6) ¿Qué es this y cómo cambia según el contexto?
• menciona: call/apply/bind, arrow functions, métodos de objeto, clases.

• 7) ¿Qué es la inmutabilidad y por qué importa en Front-End?
• conéctalo con render eficiente, state management y debugging.

DOM, navegador y Web APIs

• 8) ¿Cómo optimizás el rendimiento en el DOM?
• Ideas: minimizar reflows/repaints, batch updates, DocumentFragment, virtual DOM.

• 9) ¿Qué es CORS y cómo lo resolvés en desarrollo?
• Evitá 'desactivarlo': hablá de headers, proxies, configuración backend.

• 10) ¿Diferencia entre localStorage, sessionStorage y cookies?
• Sumá: límites, seguridad, envío al servidor, casos de uso.

• 11) ¿Qué es el critical rendering path?
• Relacioná con CSS blocking, JS blocking, preload, lazy loading.

HTML/CSS (lo que te filtra rápido)

• 12) ¿Cómo asegurás accesibilidad (a11y) en un componente?
• Semántica, labels, focus, roles ARIA (sin abusar), teclado.

• 13) ¿Cuándo usar Flexbox vs Grid?
• Respondé con layout 1D vs 2D y un ejemplo.

• 14) ¿Cómo evitás problemas de especificidad en CSS?
• Metodologías (BEM), scoping, CSS Modules, utility classes, orden.

Framework (React suele dominar, adaptá a tu stack)

• 15) ¿Cuándo usar useMemo/useCallback?
• Explica costo, dependencia, memoization real vs premature optimization.

• 16) ¿Cómo manejás estado: local vs global?
• Criterio: alcance, frecuencia de cambios, persistencia, debugging.

• 17) ¿Qué es render innecesario y cómo lo detectás?
• Hablar de React DevTools Profiler, memo, keys, referential equality.

• 18) ¿Cómo consumís datos y manejás errores/loading?
• menciona: cancelación, retry, estados vacíos, cache (React Query/SWR si aplica).

Testing (cada vez más común)

• 19) ¿Qué testeás con unit vs integration vs e2e?
• Ejemplo: componente, hook, flujo de checkout.

• 20) ¿Cómo testeás un componente con UI asíncrona?
• Testing Library: esperar por elementos, no testear implementación.

Preguntas entrevista desarrollador front end en formato behavioral (comportamiento)

Las entrevistas no son solo código. Para roles Front-End, estas preguntas suelen definir el 'sí' o el 'no' porque hablan de colaboración, calidad y criterio.

Preguntas típicas (y lo que evalúan)

• 1) Contame de un bug difícil que resolviste.
• Evalúan: método, paciencia, comunicación, aprendizaje.

• 2) Un PM te pide una fecha imposible. ¿Qué hacés?
• Evalúan: negociación, priorización, manejo de expectativas.

• 3) ¿Cómo manejás feedback duro en PRs (pull requests)?
• Evalúan: madurez, trabajo en equipo, calidad.

• 4) ¿Cuándo te equivocaste en una decisión técnica?
• Evalúan: autocrítica y mejora.

• 5) Contame un conflicto con diseño/QA/back-end y cómo lo resolviste.
• Evalúan: comunicación cross-funcional.

Plantilla para responder (STAR + señal Front-End)

Usa STAR y Agrega 1 capa extra para Front-End:

• S (Situación): contexto y usuario impactado.
• T (Tarea): tu responsabilidad concreta.
• A (Acción): pasos que tomaste (incluí decisiones técnicas).
• R (Resultado): qué cambió (calidad, tiempos, estabilidad).
• Señal Front-End: performance, accesibilidad, DX, mantenibilidad.

Live coding y ejercicios prácticos (lo más temido)

En live coding no buscan perfección, buscan proceso: cómo pensás, cómo testeás mentalmente y cómo comunicás.

Ejercicios comunes de live coding para Front-End

• 1) Implementar debounce o throttle.
• Tips: definí casos borde (cancelación, trailing/leading).

• 2) Flatten de arrays u objetos.
• Tips: recursión vs iteración.

• 3) Event delegation: click en lista dinámica.
• Tips: dataset, closest(), target.

• 4) Consumir una API y renderizar estados: loading/error/empty/success.
• Tips: no olvides abort controller si aplica.

• 5) Reverse/parse string con reglas.
• Tips: validación y ejemplos.

• 6) Pequeño layout con CSS (centrado, grid de cards).
• Tips: accesibilidad y responsive.

Checklist de live coding (antes y durante)

• [ ] Repetí el enunciado con tus palabras y confirmá requisitos.
• [ ] Preguntá por casos borde (nulos, vacíos, performance, accesibilidad).
• [ ] Proponé un enfoque y complejidad (O(n), O(n log n)).
• [ ] Escribí primero un ejemplo de entrada/salida.
• [ ] Codeá por iteraciones: solución simple → mejoras.
• [ ] Hacé un mini test mental con 2–3 casos.
• [ ] Si te trabás: Explica dónde y proponé alternativa.

Ejemplo aplicado real: responder 'closures' sin sonar a libro

Pregunta: '¿Qué es un closure y para qué sirve?'

Respuesta estructurada (modelo):

• Definición simple: 'Un closure es cuando una función puede acceder a variables de su scope externo incluso después de que esa función externa terminó de ejecutarse.'
• Por qué importa: 'Se usa para encapsular estado sin exponerlo globalmente, por ejemplo en handlers, callbacks o módulos.'
• Ejemplo corto:

```js function createCounter() { let count = 0; return function increment() { count += 1; return count; } }

const counter = createCounter(); counter(); // 1 counter(); // 2 ```

• Trade-off: 'Si no tenés cuidado, Puedes retener referencias y generar memory leaks, por ejemplo si guardás closures con muchos datos en listeners que nunca removés.'

Este nivel de respuesta suele ser suficiente y muestra criterio. Para practicar cómo lo contás (sin leer), Usa el simulador de entrevistas: /entrevistas.

Cheat sheet descargable (PDF): 20 preguntas + respuestas rápidas

Usalo como repaso de último minuto. Copiá y pegá este contenido en un doc y exportalo a PDF.

20 preguntas y respuestas rápidas (versión corta)

1) Closures: función que mantiene acceso al scope externo; útil para encapsular estado. 2) Event delegation: listener en contenedor para manejar hijos; mejor para listas dinámicas. 3) Event loop: coordina stack y colas; Promises van a microtasks. 4) var/let/const: scope y hoisting; const no reasigna (pero objetos mutables). 5) this: depende de cómo se llama; arrow hereda this. 6) CORS: política de origen; se resuelve con headers/proxy, no 'desactivando seguridad'. 7) Reflow/repaint: cambios de layout vs pintura; minimizá lecturas/escrituras alternadas. 8) Accesibilidad: semántica, focus visible, navegación teclado, labels. 9) Flex vs Grid: flex 1D, grid 2D; elegir según layout. 10) Especificidad CSS: evitar !important; usar convención (BEM) o scoping. 11) Keys en listas (React): estables y únicas; no usar index si cambia el orden. 12) useMemo/useCallback: evitar recomputar/regen funciones cuando aporta; medir. 13) Estado global: solo lo compartido; si no, local. 14) Fetch con estados UI: loading/error/empty/success; manejar abort y retries si aplica. 15) Debounce: agrupa eventos; útil en search input. 16) Throttle: limita frecuencia; útil en scroll/resize. 17) Testing pirámide: más unit/integration; e2e para flujos críticos. 18) Testing async UI: esperar por resultados; testear comportamiento. 19) Seguridad básica: evitar XSS (sanitize/escape), no confiar en input. 20) Performance web: lazy loading, code splitting, imágenes optimizadas, medir (Lighthouse).

Cómo alinear tus respuestas con la oferta (y evitar perder por ATS)

Aunque el foco sea la entrevista, muchos procesos filtran antes por CV. Si la oferta pide MUST como 'React', 'TypeScript', 'testing' y NICE como 'Next.js' o 'a11y', conviene que tu CV lo refleje con evidencia.

En Alcaparra Puedes:

• Ver tu Score ATS 0-100
• Identificar keywords MUST/NICE que te faltan
• Descargar un CV optimizado en .docx

Empieza gratis con 3 créditos sin tarjeta: /precios. Y para entender el análisis ATS: /como-funciona.

Bonus si estás aplicando a empresas con entrevistas muy estructuradas: practicar en voz cambia mucho tu performance. Probalo en /entrevistas.

FAQ: preguntas frecuentes

¿Cuánto tengo que profundizar en preguntas técnicas para Front-End?

¿Cómo practico live coding si me pongo nervioso?

¿Qué hago si me preguntan algo que no sé (por ejemplo, un detalle de event loop)?

Para profundizar en los conceptos tecnicos: MDN Web Docs para JS, web.dev sobre rendering performance para performance, y el Stack Overflow Developer Survey 2024 para el mercado tech.

Lecturas relacionadas

• Portales tech para programadores junior en LATAM — donde buscar trabajo en tech mas alla de LinkedIn.
• Metodo STAR para entrevistas: como responder con impacto — estructura para las preguntas behavioral de esta guia.
• Simulador de entrevistas de Alcaparra — practica en voz alta antes de la entrevista real.