JavaScript

¿Qué es y por qué existe?

Una variable vincula un nombre con un valor. La diferencia importante entre var, let y const no es solo si permiten reasignación: cambia su alcance, su inicialización, su relación con el objeto global y la forma en que ayudan a prevenir errores.

Cómo funciona internamente

Antes de ejecutar el código, el motor crea bindings dentro de un entorno léxico. var se inicializa con undefined y tiene alcance de función; let y const existen desde el inicio del bloque, pero permanecen sin inicializar dentro de la Temporal Dead Zone hasta llegar a su declaración. const impide reasignar el binding, no volver inmutable al valor apuntado.

Puntos importantes

• Usa const por defecto y let cuando realmente necesitas reasignar.
• Evita var en código moderno: su alcance de función y hoisting facilitan errores.
• const protege la referencia, no las propiedades internas de objetos o arreglos.
• Una redeclaración con var puede pasar silenciosamente; con let y const produce error.

Ejemplo

const user = { name: "Erick" };
user.name = "Alan"; // permitido

let attempts = 1;
attempts += 1;

console.log(user.name, attempts);

Errores comunes

El entrevistador quiere saber…

No busca que recites tres definiciones; quiere comprobar si entiendes bindings, alcance, inicialización y mutabilidad.

Conceptos relacionados

¿Qué es y por qué existe?

El scope determina desde dónde puede resolverse un identificador. En JavaScript esa resolución es léxica: depende de dónde fue escrito el código, no de dónde se invocó una función.

Cómo funciona internamente

Cada ejecución crea contextos y entornos léxicos con un registro de bindings y una referencia al entorno exterior. Cuando se usa un nombre, el motor busca primero en el entorno actual y después recorre la cadena exterior hasta encontrarlo o lanzar ReferenceError.

Puntos importantes

• Existen scope global, de módulo, de función y de bloque.
• La cadena de scopes se define al crear la función.
• Un parámetro pertenece al scope de la función.
• Shadowing es válido, pero puede reducir claridad.

Ejemplo

const role = "global";

function createMessage() {
  const role = "admin";
  return function show() {
    console.log(role);
  };
}

const message = createMessage();
message();

Errores comunes

El entrevistador quiere saber…

La pregunta suele preparar el terreno para closures, hoisting y shadowing.

Conceptos relacionados

¿Qué es y por qué existe?

Hoisting es la forma observable de la fase de creación del contexto de ejecución: las declaraciones se registran antes de ejecutar las sentencias. No significa que el motor “mueva” físicamente líneas.

Cómo funciona internamente

Las function declarations quedan disponibles con su cuerpo. var se crea e inicializa con undefined. let, const y class se crean pero no se inicializan hasta evaluar su declaración; el intervalo anterior es la TDZ.

Puntos importantes

• Las function expressions siguen las reglas de la variable que las contiene.
• typeof sobre una variable no declarada devuelve "undefined", pero sobre un let en TDZ lanza ReferenceError.
• La TDZ evita leer valores antes de que su inicialización sea explícita.
• Las clases también tienen TDZ.

Ejemplo

console.log(total); // undefined
var total = 3;

try {
  console.log(price);
} catch (error) {
  console.log(error.name);
}
let price = 10;

Errores comunes

El entrevistador quiere saber…

El entrevistador evalúa si conoces el modelo de ejecución, no solo si memorizaste una salida.

Conceptos relacionados

¿Qué es y por qué existe?

Un closure es la combinación de una función y la referencia a su entorno léxico. Permite que la función siga accediendo a bindings externos incluso después de que la ejecución exterior terminó.

Cómo funciona internamente

Cuando una función interna escapa —por retorno, callback o listener— el motor conserva los bindings que todavía pueden ser alcanzados. No copia necesariamente sus valores; mantiene acceso a las mismas variables. El recolector libera el entorno cuando ya no existe una ruta alcanzable hacia él.

Puntos importantes

• Los closures se crean al definir funciones, no solo al retornarlas.
• Capturan bindings, no snapshots automáticos.
• Permiten encapsulación, factories, memoización y callbacks.
• También pueden retener memoria o producir valores inesperados en ciclos.

Ejemplo

function createCounter() {
  let count = 0;
  return () => ++count;
}

const counter = createCounter();
console.log(counter());
console.log(counter());

Errores comunes

El entrevistador quiere saber…

Quiere saber si puedes conectar lenguaje, memoria y problemas reales como stale state o listeners sin limpiar.

Conceptos relacionados

¿Qué es y por qué existe?

JavaScript siempre pasa argumentos por valor. La confusión aparece porque, para objetos, ese valor es una referencia. Copiar la referencia crea dos bindings que apuntan al mismo objeto.

Cómo funciona internamente

Los primitivos se almacenan y comparan por su valor. Los objetos tienen identidad; una variable contiene una referencia a esa identidad. Spread y Object.assign crean copias superficiales: duplican el primer nivel, pero las referencias anidadas siguen compartidas.

Puntos importantes

• Dos objetos con el mismo contenido no son estrictamente iguales.
• La asignación de un objeto copia la referencia.
• Spread no realiza deep clone.
• structuredClone sirve para muchos datos estructurados, pero no para funciones ni ciertos objetos especiales.

Ejemplo

const original = { profile: { name: "Erick" } };
const shallow = { ...original };

shallow.profile.name = "Alan";

console.log(original.profile.name);
console.log(original === shallow);
console.log(original.profile === shallow.profile);

Errores comunes

El entrevistador quiere saber…

La precisión importa. Esta pregunta suele revelar si entiendes identidad y por qué React depende de cambios de referencia.

Conceptos relacionados

¿Qué es y por qué existe?

La igualdad estricta === compara sin coerción de tipos; la abstracta == aplica reglas de conversión antes de comparar. Object.is es similar a ===, pero trata NaN como igual a sí mismo y distingue +0 de -0.

Cómo funciona internamente

La coerción usa algoritmos de conversión como ToPrimitive, ToNumber y ToString. En objetos, primero intenta obtener un valor primitivo mediante Symbol.toPrimitive, valueOf o toString según el contexto.

Puntos importantes

• Prefiere === salvo que exista una razón concreta y documentada.
• null == undefined es true, pero no son estrictamente iguales.
• NaN no es igual a sí mismo con ===.
• Los objetos se comparan por identidad.

Ejemplo

console.log(0 == false);
console.log(0 === false);
console.log(NaN === NaN);
console.log(Object.is(NaN, NaN));
console.log([] == "");

Errores comunes

El entrevistador quiere saber…

Quiere comprobar si razonas conversiones, no si sabes una lista de trucos.

Conceptos relacionados

¿Qué es y por qué existe?

Las funciones son objetos invocables de primera clase: pueden almacenarse, pasarse y retornarse. Las declarations, expressions y arrow functions difieren en hoisting, this, arguments, constructibilidad y sintaxis.

Cómo funciona internamente

Una función tradicional obtiene this según la llamada y puede tener arguments y [[Construct]]. Una arrow no crea sus propios this, arguments, super ni new.target; los resuelve léxicamente desde el entorno exterior y no puede usarse con new.

Puntos importantes

• Function declarations están disponibles antes de su línea.
• Arrow functions son ideales para callbacks que necesitan this léxico.
• Los métodos de objeto normalmente no deberían ser arrows si requieren this dinámico.
• Toda función puede cerrar sobre su entorno léxico.

Ejemplo

const team = {
  name: "Frontend",
  regular() { return this.name; },
  arrow: () => this?.name
};

console.log(team.regular());
console.log(team.arrow());

Errores comunes

El entrevistador quiere saber…

El entrevistador busca que conozcas las diferencias semánticas, no una preferencia estética.

Conceptos relacionados

¿Qué es y por qué existe?

En funciones tradicionales, this no se decide por dónde se escribió la función, sino principalmente por cómo se invoca. call y apply ejecutan con un this explícito; bind crea una nueva función enlazada.

Cómo funciona internamente

La resolución típica sigue prioridades: new binding, explicit binding con call/apply/bind, implicit binding mediante objeto.método(), y default binding. Las arrow functions ignoran estas reglas porque capturan this léxicamente.

Puntos importantes

• Extraer un método puede perder su receptor.
• bind no ejecuta inmediatamente; retorna otra función.
• call recibe argumentos separados y apply un arreglo o array-like.
• Un bound function usada con new prioriza el nuevo objeto sobre el this enlazado.

Ejemplo

const user = {
  name: "Erick",
  greet(prefix) { return `${prefix} ${this.name}`; }
};

const greet = user.greet;
console.log(greet.call(user, "Hola"));
console.log(greet.bind(user, "Qué tal")());

Errores comunes

El entrevistador quiere saber…

Quiere verificar si puedes predecir this sin recurrir a “depende” como respuesta final.

Conceptos relacionados

¿Qué es y por qué existe?

El Event Loop coordina la ejecución de JavaScript con las colas de trabajo del entorno. El motor ejecuta una tarea hasta vaciar el call stack; después procesa las microtareas pendientes antes de permitir render y tomar otra tarea.

Cómo funciona internamente

El navegador mantiene task queues para eventos, timers y otras fuentes, además de una microtask queue usada por callbacks de Promise y queueMicrotask. Tras cada tarea se ejecuta un microtask checkpoint. Un exceso de microtareas puede retrasar render y otras tareas.

Puntos importantes

• JavaScript no ejecuta dos frames del mismo agente simultáneamente.
• Promise.then y continuaciones de await son microtareas.
• setTimeout agenda una tarea, no garantiza tiempo exacto.
• Render normalmente ocurre entre tareas, no en medio de una pila ocupada.

Ejemplo

console.log("A");

setTimeout(() => console.log("B"), 0);
Promise.resolve().then(() => console.log("C"));
queueMicrotask(() => console.log("D"));

console.log("E");

Errores comunes

El entrevistador quiere saber…

Quiere comprobar si puedes predecir orden, diagnosticar UI bloqueada y conectar asincronía con performance.

Conceptos relacionados

¿Qué es y por qué existe?

Una Promise representa el resultado eventual de una operación. async/await es sintaxis construida sobre promesas que permite expresar flujos asíncronos con estructura similar al código secuencial.

Cómo funciona internamente

Una Promise pasa de pending a fulfilled o rejected una sola vez. Los handlers de then/catch/finally se programan como microtareas. Una función async siempre retorna una Promise; await suspende esa ejecución y agenda su continuación cuando el valor se resuelve.

Puntos importantes

• Promise.all falla rápido; allSettled espera todos los resultados.
• await secuencial puede desperdiciar concurrencia cuando las operaciones son independientes.
• catch captura rechazos dentro de la cadena que lo precede.
• AbortController es clave para cancelar trabajo soportado por APIs como fetch.

Ejemplo

const wait = (value, ms) =>
  new Promise(resolve => setTimeout(() => resolve(value), ms));

async function load() {
  const [user, orders] = await Promise.all([
    wait("user", 20),
    wait("orders", 10)
  ]);
  return `${user}:${orders}`;
}

load().then(console.log);

Errores comunes

El entrevistador quiere saber…

No basta conocer la sintaxis; se evalúan concurrencia, errores, cancelación y consistencia de datos.

Conceptos relacionados