0Pricing
JavaScript Academy · Lección

Combinación de ?. y ??

Combine el acceso seguro con valores predeterminados adecuados.

Combinación de ?. y ?? es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de JavaScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de JavaScript Academy incluye 4 lecciones en total.

Dos herramientas juntas

El encadenamiento opcional ?. lee de forma segura valores que podrían faltar, y la coalescencia nullish ?? proporciona un valor predeterminado. Combinados, permiten leer datos anidados y usar un valor predeterminado de forma clara.

const user = {};
console.log(user.profile?.name ?? "Anonymous");

El patrón habitual

El patrón a?.b ?? fallback lee de forma segura y utiliza el valor predeterminado si el resultado es nullish. Esto reemplaza las cadenas de comprobaciones verbosas.

const data = { settings: { theme: "dark" } };
const theme = data.settings?.theme ?? "light";
console.log(theme); // "dark"

Usar un valor predeterminado cuando falta

Si algún enlace es nullish, ?. produce undefined, que ?? reemplaza entonces por el valor predeterminado.

const data = {};
const theme = data.settings?.theme ?? "light";
console.log(theme); // "light"

Anidamiento profundo

El patrón se adapta a estructuras profundamente anidadas y mantiene un único valor predeterminado al final.

const res = { data: { user: { city: "Berlin" } } };
const city = res.data?.user?.city ?? "Unknown";
console.log(city); // "Berlin"

Conservar valores falsy válidos

Como ?? solo utiliza el valor predeterminado ante valores nullish, los valores 0 reales de la cadena se conservan.

const cart = { items: [], count: 0 };
const count = cart?.count ?? 5;
console.log(count); // 0

Frente a la trampa de && / ||

Escribir a && a.b || fallback reemplazaría incorrectamente un 0 o "" legítimo. La combinación de ?. y ?? evita este problema.

const cfg = { volume: 0 };
console.log(cfg && cfg.volume || 50); // 50, wrong
console.log(cfg?.volume ?? 50);      // 0, correct

Con resultados de funciones

También puede utilizar un valor predeterminado para el resultado de una llamada opcional, combinando ambos operadores alrededor de una invocación de método.

const api = { fetchName: () => null };
const name = api.fetchName?.() ?? "default";
console.log(name); // "default"

Establecer valores predeterminados para el acceso a arrays

El patrón funciona con el acceso mediante corchetes para arrays o claves dinámicas.

const state = { list: ["a"] };
const first = state.list?.[0] ?? "empty";
console.log(first); // "a"

Crear cadenas para mostrar

Un uso práctico es generar texto seguro para mostrar a partir de datos inciertos.

function label(order) {
  return "Total: " + (order?.total ?? 0);
}
console.log(label(undefined)); // "Total: 0"

Nota sobre la precedencia

?. tiene mayor precedencia que ??, por lo que a?.b ?? c se interpreta como (a?.b) ?? c, exactamente como necesita.

const u = { age: null };
console.log(u?.age ?? 18); // 18

Un patrón claro

Juntos, estos operadores reemplazan código defensivo extenso por una sola línea legible, lo que hace evidente la intención.

const profile = null;
console.log(profile?.bio?.length ?? 0); // 0

Comprobación rápida

Prediga el resultado.

Repaso

El patrón obj?.deep?.prop ?? fallback lee valores anidados que podrían faltar y proporciona un valor predeterminado únicamente cuando el resultado es null o undefined. Conserva valores falsy válidos como 0 y "", a diferencia del enfoque con &&/||. ?. tiene mayor precedencia que ??, por lo que la agrupación es correcta de forma natural.

Preguntas frecuentes

¿La lección «Combinación de ?. y ??» es gratis?

Sí — el texto completo de «Combinación de ?. y ??» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de JavaScript Academy, actualiza a CoddyKit PRO. El curso de JavaScript Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Combinación de ?. y ??»?

Combine el acceso seguro con valores predeterminados adecuados. Practicas JavaScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar JavaScript Academy?

No se requiere experiencia previa. JavaScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.

¿Cuánto tiempo toma la lección «Combinación de ?. y ??»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de JavaScript Academy?

Sí. Cada lección de JavaScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Encadenamiento opcional con el operador ?.
  2. Coalescencia nula con ??
  3. Combinación de ?. y ??
  4. Llamadas opcionales y acceso mediante índices
← Volver a JavaScript Academy