Encadenamiento opcional con el operador ?.
Acceda de forma segura a propiedades profundamente anidadas.
Encadenamiento opcional con el operador ?. es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 1 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.
El problema
Leer una propiedad de algo que es undefined o null provoca un TypeError. El encadenamiento opcional permite leer valores anidados de forma segura.
const user = {};
console.log(user.profile && user.profile.name);El operador ?.
El operador de encadenamiento opcional ?. se detiene y devuelve undefined si el valor situado a su izquierda es null o undefined, en lugar de provocar un error.
const user = {};
console.log(user.profile?.name); // undefined, no errorLeer propiedades profundas
Puede encadenar varios pasos ?. para acceder a estructuras profundas sin comprobaciones manuales en cada nivel.
const data = { user: { address: { city: "Paris" } } };
console.log(data.user?.address?.city); // "Paris"Evaluación de cortocircuito
Si algún enlace de la cadena es nullish, toda la expresión termina mediante un cortocircuito y devuelve undefined; el resto no se evalúa.
const data = { user: null };
console.log(data.user?.address?.city); // undefinedSolo se activa con valores nullish
?. solo provoca un cortocircuito con null o undefined. Otros valores falsy, como 0 o "", son valores reales y se accede a ellos normalmente.
const obj = { count: 0 };
console.log(obj.count?.toString()); // "0"Comparación con &&
Antes de ?., se encadenaban comprobaciones con &&. El encadenamiento opcional es más breve y claro para expresar la misma intención.
const u = { profile: { name: "Ada" } };
const a = u && u.profile && u.profile.name;
const b = u?.profile?.name;
console.log(a, b);Encadenar después de una llamada
Puede continuar el encadenamiento después de una llamada a un método y acceder de forma segura a las propiedades del valor devuelto.
const config = { get: () => ({ port: 8080 }) };
console.log(config.get()?.port); // 8080Cortocircuito en mitad de la cadena
Si un enlace intermedio es nullish, la evaluación se detiene inmediatamente, aunque los enlaces posteriores pudieran llamar a funciones.
const obj = { a: null };
console.log(obj.a?.b.c.d); // undefined, never touches b/c/dNo sirve para asignaciones
El encadenamiento opcional sirve para leer. No puede asignar a una cadena opcional; es un error de sintaxis en el lado izquierdo de =.
const o = { x: 1 };
// o?.x = 5; // SyntaxError
o.x = 5;
console.log(o.x);Combinar con arrays
También funciona con el acceso mediante corchetes, que se explicará más adelante. Se aplica la misma seguridad frente a valores nullish.
const state = { items: ["a", "b"] };
console.log(state.items?.[0]); // "a"Evitar el uso excesivo
Use ?. únicamente cuando un valor pueda faltar legítimamente. Usarlo en exceso puede ocultar errores al silenciar problemas que realmente necesita detectar.
const order = { total: 42 };
console.log(order.total?.toFixed(2)); // "42.00"Comprobación rápida
Prediga el resultado.
Resumen
El operador ?. permite leer propiedades de forma segura: si el lado izquierdo es null o undefined, devuelve undefined en lugar de provocar un error y detiene mediante un cortocircuito el resto de la cadena. Solo se activa con valores nullish (no con 0 ni con "") y no se puede utilizar como destino de una asignación.
Aprende JavaScript con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 59
- Lecciones
- 200
Preguntas frecuentes
¿La lección «Encadenamiento opcional con el operador ?.» es gratis?
Sí — el texto completo de «Encadenamiento opcional con el operador ?.» 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 «Encadenamiento opcional con el operador ?.»?
Acceda de forma segura a propiedades profundamente anidadas. 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 1 de 4.
¿Cuánto tiempo toma la lección «Encadenamiento opcional con el operador ?.»?
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
- Encadenamiento opcional con el operador ?.
- Coalescencia nula con ??
- Combinación de ?. y ??
- Llamadas opcionales y acceso mediante índices