Preguntas para entrevista de Desarrollador Frontend Junior: Fundamentos de HTML, CSS y JavaScript

Introducción

Esta guía exhaustiva contiene 32 preguntas de entrevista cuidadosamente seleccionadas que cubren los fundamentos básicos del desarrollo frontend: HTML, CSS y JavaScript. Estas son las preguntas que los desarrolladores frontend junior realmente encuentran en las entrevistas de 2024-2025. Cada pregunta incluye una respuesta detallada, una evaluación de rareza y una calificación de dificultad basada en el análisis de cientos de entrevistas reales de las principales empresas tecnológicas y startups.

Esta es la Parte 1 de nuestra guía completa de entrevistas. Para preguntas sobre React, herramientas de construcción, optimización del rendimiento, depuración, accesibilidad, pruebas y habilidades blandas, consulta la Parte 2: React, Herramientas y Temas Avanzados.

Fundamentos de HTML (7 preguntas)

1. ¿Qué son los elementos HTML semánticos y por qué son importantes?

Respuesta: Los elementos HTML semánticos describen claramente su significado y propósito tanto para los navegadores como para los desarrolladores. Algunos ejemplos son <header>, <nav>, <main>, <article>, <section>, <aside> y <footer>. Son importantes porque mejoran la accesibilidad para los lectores de pantalla y las tecnologías de asistencia, mejoran el SEO al ayudar a los motores de búsqueda a comprender la estructura del contenido y hacen que el código sea más mantenible y legible. A diferencia de los elementos genéricos <div> y <span>, que no proporcionan contexto, los elementos semánticos comunican el rol y el significado del contenido.

Rareza: Común Dificultad: Fácil

2. Explica la diferencia entre elementos inline, block e inline-block

Respuesta:

• Los elementos block comienzan en una nueva línea y ocupan todo el ancho disponible (por ejemplo, <div>, <p>, <h1>). Puedes establecer propiedades de ancho y alto.
• Los elementos inline permanecen en la misma línea y solo ocupan el ancho necesario (por ejemplo, <span>, <a>, <strong>). No puedes establecer ancho ni alto.
• Los elementos inline-block permanecen en línea pero te permiten establecer ancho y alto como los elementos block. Esto combina el flujo de inline con las capacidades de dimensionamiento de block.

Rareza: Común Dificultad: Fácil

3. ¿Qué son los elementos void (autocierre) en HTML?

Respuesta: Los elementos void son elementos HTML que no tienen etiquetas de cierre y no pueden contener contenido. Algunos ejemplos comunes son: <img>, <br>, <hr>, <input>, <meta>, <link>, <area>, <base>, <col>, <embed> y <source>. Estos elementos se completan solo con su etiqueta de apertura y sus atributos. Por ejemplo, <img src="photo.jpg" alt="description"> no necesita una etiqueta de cierre </img>.

Rareza: Común Dificultad: Fácil

4. ¿Cómo haces que un sitio web sea accesible? ¿Qué atributos HTML mejoran la accesibilidad?

Respuesta: Para hacer que los sitios web sean accesibles:

• Utiliza elementos HTML semánticos (<nav>, <main>, <header>, <footer>)
• Proporciona atributos alt para todas las imágenes que describan su contenido
• Mantén una jerarquía de encabezados adecuada (H1-H6) sin saltar niveles
• Etiqueta las entradas de formulario con elementos <label> utilizando el atributo for
• Asegura la accesibilidad del teclado con un orden de tabulación adecuado
• Utiliza atributos ARIA cuando el HTML semántico no sea suficiente: aria-label, aria-describedby, aria-hidden, aria-live
• Agrega atributos role para widgets complejos
• Asegura un contraste de color suficiente (4.5:1 para texto normal)
• Haz que los elementos interactivos sean enfocables y proporciona indicadores de enfoque visibles

Rareza: Común Dificultad: Media

5. Explica la diferencia entre los métodos GET y POST en los formularios

Respuesta:

• GET: Agrega los datos del formulario a la URL como parámetros de consulta, haciendo que los datos sean visibles en el navegador. Tiene limitaciones de longitud (~2000 caracteres), se puede almacenar en caché y marcar, es inseguro para datos confidenciales. Se utiliza para recuperar datos donde la solicitud no modifica el estado del servidor (búsquedas, filtros).
• POST: Envía los datos en el cuerpo de la solicitud, no visible en la URL. No hay restricciones de longitud, no se puede almacenar en caché de forma predeterminada, es más seguro para la información confidencial. Se utiliza para enviar datos que modifican el estado del servidor (formularios de inicio de sesión, cargas de archivos, creación de registros).

Ejemplo: Los formularios de búsqueda suelen utilizar GET para que los resultados puedan marcarse, mientras que los formularios de inicio de sesión utilizan POST para ocultar las credenciales.

Rareza: Común Dificultad: Fácil-Media

6. ¿Cuál es el propósito de la etiqueta <meta>?

Respuesta: La etiqueta <meta> proporciona metadatos sobre el documento HTML que no se muestran en la página, pero que son utilizados por los navegadores, los motores de búsqueda y otros servicios web. Los usos comunes incluyen:

• Codificación de caracteres: <meta charset="UTF-8">
• Configuración de la ventana gráfica para el diseño responsivo: <meta name="viewport" content="width=device-width, initial-scale=1.0">
• Descripciones de SEO: <meta name="description" content="Descripción de la página">
• Información del autor: <meta name="author" content="Nombre">
• Palabras clave (menos relevantes ahora): <meta name="keywords" content="palabra clave 1, palabra clave 2">

Rareza: Común Dificultad: Fácil

7. ¿Cuál es la diferencia entre <script>, <script async> y <script defer>?

Respuesta:

• <script> regular: Bloquea el análisis de HTML mientras la secuencia de comandos se descarga y se ejecuta. La representación de la página se detiene hasta que se completa la secuencia de comandos.
• <script async>: Descarga la secuencia de comandos en paralelo con el análisis de HTML, pero se ejecuta inmediatamente cuando está lista (lo que podría bloquear el análisis). El orden de ejecución no está garantizado. Es bueno para secuencias de comandos independientes como el análisis.
• <script defer>: Se descarga en paralelo, pero se ejecuta solo después de que se completa el análisis de HTML, manteniendo el orden de la secuencia de comandos. Es mejor para secuencias de comandos que dependen del DOM u otras secuencias de comandos.

Mejor práctica: Coloca <script defer> en el <head> para un rendimiento óptimo y, al mismo tiempo, asegurar un orden de ejecución adecuado.

Rareza: Poco común Dificultad: Media

Fundamentos de CSS (10 preguntas)

8. Explica el Modelo de Caja CSS

Respuesta: El Modelo de Caja CSS describe cómo se representan los elementos con cuatro componentes (de adentro hacia afuera):

1. Contenido: El contenido real (texto, imágenes)
2. Padding: Espacio entre el contenido y el borde (interior)
3. Border: El borde que rodea el padding
4. Margin: Espacio fuera del borde (entre elementos)

La propiedad box-sizing afecta los cálculos:

• box-sizing: content-box (predeterminado): El ancho/alto se aplica solo al contenido; se agregan padding y border
• box-sizing: border-box: El ancho/alto incluye contenido + padding + border (más intuitivo)

Ejemplo: Con box-sizing: border-box, un elemento con width: 100px; padding: 10px; border: 2px; permanece exactamente 100px de ancho.

Rareza: Común Dificultad: Fácil-Media

9. Explica la especificidad de CSS y cómo funciona

Respuesta: La especificidad de CSS determina qué estilos se aplican cuando varias reglas apuntan al mismo elemento. La especificidad se calcula contando los selectores:

• Estilos en línea: 1000 puntos
• IDs: 100 puntos cada uno
• Clases, atributos, pseudo-clases: 10 puntos cada uno
• Elementos, pseudo-elementos: 1 punto cada uno

Ejemplos:

• #nav .button = 110 (1 ID + 1 clase)
• .header .nav a = 21 (2 clases + 1 elemento)
• div p = 2 (2 elementos)

Cuando la especificidad es igual, la última regla gana (cascada). !important anula todo, pero debe evitarse. Mejor práctica: Utiliza clases para el estilo, evita los IDs y !important.

Rareza: Común Dificultad: Media

10. ¿Qué es Flexbox y cuándo lo usarías?

Respuesta: Flexbox es un sistema de diseño unidimensional para organizar elementos a lo largo de un solo eje (fila o columna).

Propiedades del padre (contenedor flexible):

• display: flex - habilita flexbox
• flex-direction - row, column, row-reverse, column-reverse
• justify-content - alineación a lo largo del eje principal (center, space-between, space-around)
• align-items - alineación a lo largo del eje transversal (center, flex-start, flex-end, stretch)
• flex-wrap - controla el ajuste (nowrap, wrap)

Propiedades del hijo (elemento flexible):

• flex-grow - cuánto crece el elemento en relación con los demás
• flex-shrink - cuánto se reduce el elemento
• flex-basis - tamaño inicial antes de crecer/reducir
• align-self - anula align-items para un elemento individual

Usa Flexbox para: Barras de navegación, diseños de tarjetas, centrado de elementos, distribución uniforme del espacio, alineación de elementos dentro de los contenedores.

Rareza: Común Dificultad: Media

11. ¿Qué es CSS Grid y en qué se diferencia de Flexbox?

Respuesta: CSS Grid es un sistema de diseño bidimensional para crear diseños complejos con filas Y columnas simultáneamente.

Diferencias clave:

• Grid: Bidimensional (filas + columnas), mejor para diseños de página
• Flexbox: Unidimensional (eje único), mejor para componentes

Propiedades de Grid:

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* 3 columnas */
  grid-template-rows: 100px auto 50px;
  grid-gap: 20px; /* or gap */
}

Cuándo usar:

• Grid: Diseños generales de página, diseños de estilo revista, estructuras de cuadrícula complejas
• Flexbox: Barras de navegación, tarjetas, componentes dentro de las celdas de la cuadrícula
• Ambos juntos: Grid para el diseño macro, Flexbox para el diseño micro

Rareza: Común Dificultad: Media

12. ¿Cómo centras un div horizontal y verticalmente?

Respuesta:

Enfoques modernos (preferidos):

/* Flexbox */
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Grid */
.parent {
  display: grid;
  place-items: center;
}

Enfoques heredados:

/* Posicionamiento absoluto */
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Margin auto (solo horizontal, requiere ancho) */
.child {
  margin: 0 auto;
  width: 300px;
}

Flexbox y Grid son ahora las soluciones estándar, ya que son más limpias y flexibles.

Rareza: Común Dificultad: Fácil-Media

13. Explica el posicionamiento CSS: static, relative, absolute, fixed y sticky

Respuesta:

• Static (predeterminado): Flujo de documento normal, sin posicionamiento especial
• Relative: Posicionado en relación con su posición normal usando top/right/bottom/left. El espacio original en el flujo del documento se conserva. A menudo se utiliza como contexto de posicionamiento para hijos absolutos.
• Absolute: Eliminado del flujo, posicionado en relación con el ancestro posicionado más cercano (o la ventana gráfica si no hay ninguno). No afecta a otros elementos.
• Fixed: Eliminado del flujo, posicionado en relación con la ventana gráfica. Permanece en su lugar al desplazarse.
• Sticky: Híbrido de relative y fixed. Actúa relative hasta el umbral de desplazamiento, luego se vuelve fixed. Útil para encabezados sticky que comienzan en el flujo.

Ejemplo: La navegación que se vuelve fixed después de desplazarse utiliza position: sticky; top: 0;

Rareza: Común Dificultad: Media

14. ¿Cuál es la diferencia entre display: none, visibility: hidden y opacity: 0?

Respuesta:

• display: none: El elemento se elimina por completo del flujo del documento, no ocupa espacio, no es accesible para los lectores de pantalla, no hay eventos de puntero
• visibility: hidden: El elemento es invisible pero mantiene el espacio en el diseño, todavía está en el DOM, no es accesible para los lectores de pantalla, no hay eventos de puntero
• opacity: 0: El elemento es invisible pero mantiene el espacio, todavía está en el DOM, TODAVÍA es accesible para los lectores de pantalla, TODAVÍA recibe eventos de puntero

Casos de uso:

• display: none - alternar la visibilidad (modales, menús desplegables)
• visibility: hidden - mantener el diseño mientras se oculta
• opacity: 0 - animaciones de fundido, mantener el elemento interactivo

Rareza: Común Dificultad: Fácil-Media

15. ¿Qué son las pseudo-clases y los pseudo-elementos de CSS? Proporciona ejemplos.

Respuesta:

Pseudo-clases (un solo colon) - Selecciona elementos según el estado o la posición:

a:hover { color: blue; }          /* mouse over */
input:focus { border: 2px solid blue; }  /* keyboard focus */
li:nth-child(odd) { background: #eee; }  /* odd list items */
button:disabled { opacity: 0.5; }  /* disabled state */

Otros ejemplos: :active, :checked, :first-child, :last-child, :nth-of-type()

Pseudo-elementos (doble colon) - Estiliza partes específicas o inserta contenido:

p::first-line { font-weight: bold; }  /* first line of paragraph */
p::first-letter { font-size: 2em; }   /* drop cap */
.icon::before { content: "→"; }        /* insert content */
input::placeholder { color: gray; }    /* placeholder text */

Los pseudo-elementos son excelentes para elementos decorativos sin agregar HTML.

Rareza: Común Dificultad: Media

16. ¿Cómo creas diseños responsivos? Explica las media queries.

Respuesta: Los diseños responsivos se adaptan a diferentes tamaños de pantalla utilizando:

Media Queries:

/* Enfoque mobile first (recomendado) */
.container { width: 100%; }

@media screen and (min-width: 768px) {
  .container { width: 750px; }  /* Tablet */
}

@media screen and (min-width: 1024px) {
  .container { width: 960px; }  /* Desktop */
}

Puntos de interrupción comunes:

• 320px: Móvil pequeño
• 768px: Tableta
• 1024px: Escritorio
• 1440px: Escritorio grande

Otras técnicas responsivas:

• Diseños fluidos (porcentajes, unidades vw/vh)
• Flexbox y Grid flexibles
• Imágenes responsivas (max-width: 100%, atributo srcset)
• Consultas min-width (mobile-first) vs max-width (desktop-first)

Rareza: Común Dificultad: Media

17. ¿Qué es z-index y cómo funciona?

Respuesta: z-index controla el orden de apilamiento de los elementos posicionados (relative, absolute, fixed, sticky) a lo largo del eje z (de adelante hacia atrás).

Puntos clave:

• Solo funciona en elementos posicionados (no static)
• Los valores más altos aparecen al frente
• Puede usar valores negativos
• El valor predeterminado es auto (efectivamente 0)
• Crea un "contexto de apilamiento" que afecta la forma en que se apilan los hijos

Error común:

.parent { position: relative; z-index: 1; }
.child { position: absolute; z-index: 9999; }

El hijo con z-index 9999 no puede aparecer por encima de otro elemento con z-index 2 que esté fuera del contexto de apilamiento del padre.

Rareza: Común Dificultad: Media

Fundamentos de JavaScript (15 preguntas)

18. Explica la diferencia entre var, let y const

Respuesta:

• var: Ámbito de función, elevado e inicializado con undefined, se puede volver a declarar, en gran parte obsoleto en el código moderno
• let: Ámbito de bloque, elevado pero en la Zona Muerta Temporal (TDZ) hasta la declaración, no se puede volver a declarar en el mismo ámbito
• const: Ámbito de bloque, elevado pero en la TDZ, debe inicializarse en la declaración, no se puede reasignar (pero el contenido de objetos/matrices puede mutarse)

Mejores prácticas:

• Usa const de forma predeterminada
• Usa let cuando necesites reasignar
• Nunca uses var en JavaScript moderno

Ejemplo:

const name = "Alice";     // No se puede reasignar
let count = 0;            // Se puede reasignar
count = 1;                // OK
name = "Bob";             // ¡Error!

const user = { age: 25 };
user.age = 26;            // OK - mutando la propiedad del objeto
user = {};                // Error - reasignando

Rareza: Común Dificultad: Fácil

19. ¿Qué son los closures y proporciona un ejemplo práctico?

Respuesta: Un closure es cuando una función interna tiene acceso a las variables del ámbito de su función externa (circundante), incluso después de que la función externa haya regresado. La función interna "se cierra sobre" estas variables.

Ejemplo:

function createCounter() {
  let count = 0;  // Variable privada
  
  return function() {
    count++;
    return count;
  };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3

La función interna mantiene el acceso a count aunque createCounter haya terminado de ejecutarse. Esto permite la privacidad de los datos: count no se puede acceder directamente desde fuera.

Casos de uso: Privacidad de datos, fábricas de funciones, callbacks, patrones de módulos, controladores de eventos

Rareza: Común Dificultad: Media

20. Explica == vs === en JavaScript

Respuesta:

• == (igualdad flexible): Realiza la coerción de tipo antes de la comparación, convierte los tipos para que coincidan
• === (igualdad estricta): Comprueba tanto el valor COMO el tipo, sin coerción de tipo

Ejemplos:

5 == '5'       // true (cadena convertida a número)
5 === '5'      // false (tipos diferentes)

null == undefined   // true (caso especial)
null === undefined  // false (tipos diferentes)

0 == false     // true (ambos coercionados)
0 === false    // false (número vs booleano)

Mejor práctica: Utiliza siempre === y !== para evitar errores inesperados de la coerción de tipo.

Rareza: Común Dificultad: Fácil

21. ¿Qué es el hoisting en JavaScript?

Respuesta: El hoisting es el comportamiento de JavaScript de mover las declaraciones de variables y funciones a la parte superior de su ámbito durante la fase de compilación, antes de la ejecución del código.

Diferentes comportamientos de hoisting:

console.log(x);  // undefined (elevado, inicializado)
var x = 5;

console.log(y);  // ReferenceError (elevado pero en TDZ)
let y = 5;

sayHello();      // "¡Hola!" (función completamente elevada)
function sayHello() {
  console.log("¡Hola!");
}

sayHi();         // TypeError (no es una función)
var sayHi = function() {
  console.log("¡Hola!");
};

Puntos clave:

• Las declaraciones var se elevan e inicializan con undefined
• let/const se elevan pero permanecen sin inicializar (Zona Muerta Temporal)
• Las declaraciones de funciones se elevan por completo (incluida la implementación)
• Las expresiones de función no se elevan por completo

Rareza: Común Dificultad: Media

22. Explica la palabra clave this y cómo difiere en las funciones de flecha

Respuesta: 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.

Funciones regulares:

const obj = {
  name: "John",
  greet: function() {
    console.log(this.name);  // "John"
  }
};
obj.greet();  // this = obj

const greet = obj.greet;
greet();  // this = undefined (modo estricto) o window

Funciones de flecha:

const obj = {
  name: "John",
  greet: () => {
    console.log(this.name);  // undefined
  }
};
obj.greet();  // this = ámbito léxico (contexto circundante)

Diferencias clave:

• Funciones regulares: this determinado por el sitio de llamada
• Funciones de flecha: this heredado léxicamente del ámbito circundante
• Las funciones de flecha no tienen su propio this, arguments o super

Caso de uso: Las funciones de flecha son excelentes para callbacks donde deseas preservar el this externo:

class Timer {
  start() {
    setTimeout(() => {
      console.log(this);  // Instancia de Timer (léxica)
    }, 1000);
  }
}

Rareza: Común Dificultad: Media-Difícil

23. ¿Qué son los template literals y cuáles son sus beneficios?

Respuesta: Los template literals son literales de cadena que utilizan comillas inversas (`) que admiten la interpolación de cadenas y las cadenas multilínea.

Características:

const name = "Alice";
const age = 25;

// Interpolación de cadenas
const message = `Hola, mi nombre es ${name} y tengo ${age} años.`;

// Cadenas multilínea
const html = `
  <div>
    <h1>${title}</h1>
    <p>${content}</p>
  </div>
`;

// Evaluación de expresiones
const price = `Total: $${(quantity * unitPrice).toFixed(2)}`;

Beneficios:

• Sintaxis más limpia que la concatenación de cadenas
• No es necesario \n para los saltos de línea
• Puede insertar cualquier expresión de JavaScript con ${}
• Mejor para la generación de HTML/CSS

Rareza: Común Dificultad: Fácil

24. Explica las Promesas y sus tres estados

Respuesta: Una Promesa representa la eventual finalización (o fallo) de una operación asíncrona y su valor resultante.

Tres estados:

1. Pending: Estado inicial, operación no completa
2. Fulfilled: Operación completada con éxito
3. Rejected: Operación fallida

Ejemplo:

const fetchData = new Promise((resolve, reject) => {
  setTimeout(() => {
    const success = true;
    if (success) {
      resolve({ data: "Información del usuario" });
    } else {
      reject(new Error("Error al obtener"));
    }
  }, 1000);
});

fetchData
  .then(result => console.log(result))
  .catch(error => console.error(error))
  .finally(() => console.log("Hecho"));

Beneficios sobre los callbacks:

• Evita el infierno de los callbacks
• Encadenable con .then()
• Mejor manejo de errores con .catch()
• Puede usar Promise.all() para operaciones paralelas

Rareza: Común Dificultad: Media

25. ¿Qué es async/await y cómo mejora la legibilidad del código?

Respuesta: async/await es azúcar sintáctico construido sobre Promesas que hace que el código asíncrono se vea y se comporte más como código síncrono.

Ejemplo:

// Con Promesas (más difícil de leer)
function fetchUserData() {
  return fetch('/api/user')
    .then(response => response.json())
    .then(data => {
      return fetch(`/api/posts/${data.id}`);
    })
    .then(response => response.json())
    .catch(error => console.error(error));
}

// Con async/await (más limpio)
async function fetchUserData() {
  try {
    const response = await fetch('/api/user');
    const user = await response.json();
    
    const postsResponse = await fetch(`/api/posts/${user.id}`);
    const posts = await postsResponse.json();
    
    return posts;
  } catch (error) {
    console.error(error);
  }
}

Puntos clave:

• La función async siempre devuelve una Promesa
• await pausa la ejecución hasta que la Promesa se resuelva
• Usa try/catch para el manejo de errores
• Hace que las operaciones secuenciales sean más claras
• Manejo de errores más natural que .catch()

Rareza: Común Dificultad: Media

26. Explica el Event Loop y cómo JavaScript maneja las operaciones asíncronas

Respuesta: JavaScript es de un solo hilo, pero maneja las operaciones asíncronas a través del mecanismo del Event Loop.

Componentes:

1. Call Stack: Ejecuta código síncrono (LIFO)
2. Web APIs: Maneja operaciones asíncronas (setTimeout, fetch, eventos DOM)
3. Callback Queue (Task Queue): Contiene callbacks de Web APIs
4. Microtask Queue: Contiene callbacks de Promesas (mayor prioridad)
5. Event Loop: Mueve tareas de las colas a la pila de llamadas cuando la pila está vacía

Orden de ejecución:

console.log('1');

setTimeout(() => console.log('2'), 0);

Promise.resolve().then(() => console.log('3'));

console.log('4');

// Salida: 1, 4, 3, 2
// Explicación:
// - El código síncrono (1, 4) se ejecuta primero
// - Las microtareas (Promesa) se ejecutan antes que las macrotareas
// - Las macrotareas (setTimeout) se ejecutan al final

Orden de ejecución: Call Stack → Microtask Queue → Callback Queue (Macrotasks)

Rareza: Común Dificultad: Difícil

27. ¿Cómo seleccionas y manipulas elementos DOM?

Respuesta:

Métodos de selección:

// Moderno (preferido)
const element = document.querySelector('#myId');
const elements = document.querySelectorAll('.myClass');
const firstItem = document.querySelector('.list-item');

// Legado (todavía válido)
const elem = document.getElementById('myId');
const elems = document.getElementsByClassName('myClass');
const tags = document.getElementsByTagName('div');

Manipulación:

// Contenido
element.textContent = 'Texto nuevo';
element.innerHTML = '<span>Contenido HTML</span>';

// Estilo
element.style.color = 'blue';
element.style.backgroundColor = '#eee';

// Clases
element.classList.add('active');
element.classList.remove('hidden');
element.classList.toggle('visible');
element.classList.contains('active');

// Atributos
element.setAttribute('data-id', '123');
element.getAttribute('data-id');

// Creación de elementos
const newDiv = document.createElement('div');
newDiv.textContent = 'Hola';
document.body.appendChild(newDiv);

Rareza: Común Dificultad: Fácil

28. Explica la delegación de eventos y por qué es útil

Respuesta: La delegación de eventos es adjuntar un solo listener de eventos a un elemento padre en lugar de múltiples listeners a elementos hijos, aprovechando el event bubbling.

Sin delegación (ineficiente):

document.querySelectorAll('.item').forEach(item => {
  item.addEventListener('click', handleClick);
});

Con delegación (eficiente):

document.getElementById('list').addEventListener('click', (e) => {
  if (e.target.matches('.item')) {
    handleClick(e);
  }
});

Beneficios:

• Mejor rendimiento: Un solo listener vs muchos
• Funciona con elementos dinámicos: Maneja automáticamente los elementos agregados más tarde
• Menor uso de memoria: Menos listeners de eventos
• Código más limpio: Manejo de eventos centralizado

Caso de uso: Listas donde los elementos se pueden agregar/eliminar dinámicamente (listas de tareas, carritos de compra, secciones de comentarios)

Rareza: Común Dificultad: Media

29. ¿Qué es event bubbling? ¿Cómo detienes la propagación?

Respuesta: Event bubbling es cuando un evento activado en un elemento hijo "asciende" a través de sus ancestros hasta la raíz del documento.

Tres fases:

1. Capturing Phase: El evento viaja desde la ventana hasta el objetivo
2. Target Phase: El evento llega al elemento objetivo
3. Bubbling Phase: El evento asciende desde el objetivo hasta la ventana (predeterminado)

Ejemplo:

<div id="parent">
  <button id="child">Haz clic aquí</button>
</div>

<script>
document.getElementById('parent').addEventListener('click', () => {
  console.log('Padre clicado');
});

document.getElementById('child').addEventListener('click', (e) => {
  console.log('Hijo clicado');
  // El evento asciende al padre
});
// Al hacer clic en el botón se registra: "Hijo clicado", luego "Padre clicado"
</script>

Detener la propagación:

element.addEventListener('click', (e) => {
  e.stopPropagation();  // Detiene el bubbling
  e.preventDefault();    // Evita el comportamiento predeterminado (envío de formulario, navegación de enlaces)
});

Rareza: Común Dificultad: Media

30. Explica la desestructuración para objetos y matrices

Respuesta: La desestructuración extrae valores de matrices o propiedades de objetos en variables distintas.

Desestructuración de matrices:

const colors = ['red', 'green', 'blue', 'yellow'];

const [first, second, ...rest] = colors;
// first = 'red'
// second = 'green'
// rest = ['blue', 'yellow']

// Omitir elementos
const [primary, , tertiary] = colors;
// primary = 'red', tertiary = 'blue'

Desestructuración de objetos:

const user = {
  name: 'Alice',
  age: 25,
  email: '[email protected]'
};

const { name, age, city = 'NYC' } = user;
// name = 'Alice'
// age = 25
// city = 'NYC' (valor predeterminado)

// Renombrar variables
const { name: userName, age: userAge } = user;

// Desestructuración anidada
const { address: { street, zip } } = person;

Parámetros de función:

function greet({ name, age = 18 }) {
  console.log(`Hola ${name}, edad ${age}`);
}

greet({ name: 'Bob', age: 25 });

Rareza: Común Dificultad: Fácil-Media

31. Explica el operador spread y los parámetros rest

Respuesta:

Operador spread (...) - Expande iterables:

// Matrices
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];  // [1, 2, 3, 4, 5]
const combined = [...arr1, ...arr2];

// Objetos (copia superficial)
const user = { name: 'Alice', age: 25 };
const updatedUser = { ...user, age: 26 };  // Actualización inmutable

// Argumentos de función
const numbers = [1, 2, 3];
Math.max(...numbers);  // 3

Parámetros rest (...) - Recopila múltiples elementos:

// Parámetros de función
function sum(...numbers) {
  return numbers.reduce((a, b