JavaScript Preguntas de entrevista

Lo que cubren las entrevistas de JavaScript

Ejemplos de preguntas de entrevista sobre JavaScript

• ¿Qué es un closure y da un uso práctico para uno?
  Lo que cubre una buena respuesta

  • Definición de closure como función que recuerda su ámbito léxico
  • Captura de variables del entorno exterior
  • Uso práctico para encapsulación y ocultación de datos
  • Aplicación en fábricas de funciones y memoización
  • Tema común en entrevistas: pérdida de memoria por closures innecesarias

  Ver respuesta de ejemplo

  Un closure es una función que conserva el acceso a las variables de su ámbito externo incluso después de que ese ámbito haya finalizado. Se forma al definir una función dentro de otra y exponerla. Un uso práctico es crear un contador privado: la función externa inicializa una variable local 'contador', y devuelve una función interna que la incrementa y la retorna. Así, 'contador' no es accesible desde fuera, logrando encapsulación. Otro ejemplo común es la memoización, donde el closure almacena resultados previos en un objeto interno. Un error típico es creer que el closure captura el valor de la variable, pero en realidad captura una referencia; por eso los bucles con var requieren un closure inmediato. En React, los closures se usan en hooks como useState y useEffect para manejar estado. También se usan para crear manejadores de eventos con datos persistentes.

• Explica el bucle de eventos, las microtareas y las macrotareas.
  Lo que cubre una buena respuesta

  • Monohilo del motor JavaScript y pila de llamadas
  • Cola de macrotareas: setTimeout, setInterval, I/O
  • Cola de microtareas: promesas, MutationObserver
  • Prioridad: microtareas se ejecutan antes que macrotareas tras cada ciclo
  • Uso de requestAnimationFrame como macrotarea visual

  Ver respuesta de ejemplo

  El bucle de eventos es el mecanismo que permite a JavaScript manejar operaciones asíncronas siendo monohilo. La pila de llamadas ejecuta el código síncrono. Cuando se encuentra una operación asíncrona (como setTimeout), la función se pasa a la API del navegador (o Node), y cuando se completa, su callback se coloca en una cola. Hay dos tipos: macrotareas (setTimeout, setInterval, I/O, UI events) y microtareas (promesas .then, queueMicrotask, MutationObserver). El bucle de eventos primero vacía la pila de llamadas, luego procesa todas las microtareas pendientes, y después toma una sola macrotarea. Esto explica por qué una promesa se resuelve antes que un setTimeout con el mismo retardo. Las microtareas pueden encadenarse y retrasar las macrotareas. Un caso extremo es no abusar de microtareas porque bloquean el renderizado. En las preguntas de orden de logs, siempre se debe considerar la prioridad de microtareas sobre macrotareas.

• ¿Cuál es la diferencia entre == y ===, y cuándo es aceptable ==?
  Lo que cubre una buena respuesta

  • == realiza coerción de tipos antes de comparar
  • === compara valor y tipo sin coerción
  • Excepciones: null == undefined true, null === undefined false
  • Uso aceptable de == para comparar nulos de forma abreviada
  • Riesgo de resultados inesperados con valores como 0, '' , false

  Ver respuesta de ejemplo

  El operador == (igualdad abstracta) convierte operandos al mismo tipo antes de comparar, siguiendo reglas complejas. Por ejemplo, 0 == '' da true, y '1' == 1 también. === (igualdad estricta) no hace coerción: verifica que valor y tipo sean idénticos. Se recomienda usar siempre === para evitar errores sutiles. Sin embargo, hay un caso donde == es aceptable y hasta idiomático: comparar si un valor es null o undefined de una vez, porque null == undefined da true. Así, si quieres comprobar si una variable es null o undefined, puedes escribir 'if (valor == null)'. Esto es equivalente a 'valor === null || valor === undefined'. Muchos frameworks como Vue.js lo usan. Pero fuera de ese caso específico, es preferible usar ===. También, al comparar con objetos, == y === funcionan igual (comparan referencias). La coerción de == puede dar resultados contra intuitivos; por ejemplo, [] == false da true. Por eso, linters como ESLint suelen forzar el uso de ===.

• ¿Cómo se determina `this` y cómo lo cambian call/apply/bind?
  Lo que cubre una buena respuesta

  • Vinculación por defecto: this global (window en navegador, undefined en strict)
  • Vinculación implícita: this es el objeto que contiene la función al invocarla
  • Vinculación explícita: call, apply fijan this y ejecutan; bind crea nueva función
  • Vinculación con new: this es el nuevo objeto instanciado
  • Arrow functions heredan this del ámbito léxico, no aplican las reglas anteriores

  Ver respuesta de ejemplo

  El valor de this se determina en tiempo de ejecución según cómo se invoca la función, no dónde se define. Las reglas son: 1) Default: si se llama sin contexto (f()), this es global (en strict mode undefined). 2) Implícita: si es método de un objeto (obj.f()), this es el objeto. 3) Explícita: con call y apply se pasa el this deseado como primer argumento; call recibe argumentos separados, apply un array. Ambos invocan la función inmediatamente. Bind devuelve una nueva función con el this fijo, que puede ser llamada después. 4) Con new, this es el nuevo objeto creado. Las arrow functions no tienen su propio this; toman el del ámbito externo. Para cambiar this en una arrow function, no sirve call/apply/bind porque ignoran el this. Un error común es perder el contexto al pasar un método como callback (ej: setTimeout(obj.method, 100)), donde this se vuelve global; la solución es usar bind o arrow function.

• Implementa una función de debounce (o throttle).
  Lo que cubre una buena respuesta

  • Cancela invocaciones anteriores con clearTimeout
  • Closure para mantener la variable timer
  • Uso de apply para preservar this y argumentos
  • Versión leading vs trailing (ejecutar al inicio en lugar de al final)
  • Complejidad O(1) por llamada, sin bucles internos

  Ver respuesta de ejemplo

  Debounce retrasa la ejecución de una función hasta que haya transcurrido un período de inactividad. Es útil en búsquedas en tiempo real o resize de ventana. La implementación usa un closure que guarda un timer. Cada vez que se invoca la función devuelta, se cancela el timer anterior con clearTimeout y se establece uno nuevo con setTimeout, que llamará a la función original con el this y argumentos correctos usando apply. La complejidad temporal de cada llamada es O(1) (solo operaciones de timer). Una variante común es el 'leading' debounce que ejecuta la función al inicio y luego ignora llamadas. El throttle es similar pero garantiza una ejecución cada cierto tiempo, no solo al final. El código siguiente implementa un debounce estándar (trailing).

  function debounce(func, delay) {
    let timerId;
    return function(...args) {
      clearTimeout(timerId); // cancelar la ejecución anterior
      timerId = setTimeout(() => {
        func.apply(this, args); // preservar this y argumentos
      }, delay);
    };
  }
  
  // Ejemplo de uso:
  const log = debounce(console.log, 200);
  log('Hola'); // se reinicia el timer
  log('Mundo'); // solo se ejecutará 'Mundo' tras 200ms sin llamadas

• ¿Cuál es la diferencia entre var, let y const?
  Lo que cubre una buena respuesta

  • var tiene ámbito de función, let y const ámbito de bloque
  • Hoisting: var se eleva e inicializa como undefined, let y const solo se elevan (TDZ)
  • Redeclaración: var permite, let y const no
  • const no permite reasignación de la referencia, pero muta objetos
  • Uso recomendado: const por defecto, let cuando se reasigna, evitar var

  Ver respuesta de ejemplo

  Las tres declaran variables pero difieren en ámbito y comportamiento. var tiene ámbito de función (o global si se declara fuera), lo que puede causar errores en bucles o condicionales. Además, sufre hoisting: la declaración se mueve al inicio, y se inicializa con undefined. let y const tienen ámbito de bloque (entre llaves) y también hoisting, pero no se inicializan hasta la línea de declaración (zona muerta temporal), por lo que acceder antes da ReferenceError. let puede reasignarse, const no puede reasignarse (la referencia es constante). Sin embargo, const no hace inmutable el valor; si es un objeto, sus propiedades pueden cambiar. No se permite redeclarar una misma variable con let o const en el mismo ámbito, mientras que con var sí (aunque no suele ser intencionado). La buena práctica moderna es usar const por defecto, let solo cuando necesitas reasignar, y evitar var a menos que se trabaje con código legacy o se necesite comportamiento de hoisting global.

Cómo prepararse

• Sé capaz de predecir la salida de fragmentos engañosos (closures en bucles, orden async).
• Practica implementar debounce, throttle y una promesa simple desde cero.
• Entiende el bucle de eventos lo suficientemente bien como para explicar el orden async con precisión.
• Conoce las características modernas (let/const, funciones flecha, desestructuración, módulos) y por qué existen.

Preguntas frecuentes