0Pricing
JavaScript Academy · Lección

Llamadas opcionales y acceso mediante índices

Use el encadenamiento opcional con llamadas y corchetes.

Llamadas opcionales y acceso mediante índices es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 4 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.

Más allá de la lectura de propiedades

El encadenamiento opcional también ofrece formas para llamar a funciones y acceder de forma segura a elementos de arrays o a claves dinámicas.

const obj = { greet: () => "hi" };
console.log(obj.greet?.()); // "hi"

Llamadas opcionales a métodos

La forma ?.() llama a una función únicamente si existe. Si el método es nullish, devuelve undefined en lugar de producir un error.

const obj = {};
console.log(obj.greet?.()); // undefined, no error

Por qué es importante

Sin esta forma, llamar a un método inexistente produce un error. La llamada opcional protege de forma clara frente a callbacks opcionales.

function run(onDone) {
  onDone?.(); // safe whether or not onDone is provided
}
run();
run(() => console.log("done"));

Solo los valores nullish omiten la llamada

?.() solo omite la llamada cuando el valor es null o undefined. Si es un valor que no es una función, al llamar se produce un TypeError.

const obj = { greet: 42 };
try {
  obj.greet?.();
} catch (e) {
  console.log("not a function");
}

Acceso opcional mediante índice

La forma ?.[ ] lee un elemento únicamente si la base no es nullish, lo que resulta útil para arrays y claves calculadas.

const arr = ["a", "b"];
console.log(arr?.[1]); // "b"
const none = null;
console.log(none?.[0]); // undefined

Claves dinámicas

El acceso mediante corchetes con ?. gestiona de forma segura los nombres de propiedades dinámicos.

const data = { user: { name: "Mia" } };
const key = "name";
console.log(data.user?.[key]); // "Mia"

Arrays anidados

Puede encadenar accesos opcionales mediante índice a través de arrays u objetos anidados.

const grid = [[1, 2], [3, 4]];
console.log(grid?.[1]?.[0]); // 3
console.log(grid?.[5]?.[0]); // undefined

Llamada opcional sobre el valor devuelto

Puede combinar las formas: leer un valor opcionalmente y después llamarlo también de forma opcional.

const handlers = { click: () => "clicked" };
console.log(handlers.click?.()); // "clicked"
console.log(handlers.hover?.()); // undefined

Combinar con valores predeterminados

Combine estas formas con ?? para proporcionar un valor predeterminado al resultado.

const config = {};
const port = config.get?.() ?? 3000;
console.log(port); // 3000

Llamar a métodos de arrays de forma segura

El encadenamiento opcional permite llamar a un método sobre un array que podría faltar sin realizar una comprobación de existencia por separado.

const state = { tags: null };
console.log(state.tags?.join(", ") ?? "none"); // "none"

Utilícelo cuando la opcionalidad sea real

Estas formas resultan especialmente útiles para callbacks opcionales y estructuras de datos inciertas. Evítelas cuando un valor deba existir siempre, para que los errores reales sigan siendo visibles.

const events = { onSave: null };
events.onSave?.("payload"); // silently does nothing
console.log("continued");

Comprobación rápida

Elija la forma de llamada segura.

Repaso

El encadenamiento opcional incluye ?.() para realizar llamadas seguras a métodos y ?.[ ] para acceder de forma segura mediante índices o claves dinámicas. Ambos devuelven undefined cuando la base es nullish, pero siguen produciendo un error si se intenta llamar a un valor que no es una función. Combínelos con ?? para proporcionar valores predeterminados y resérvelos para valores realmente opcionales.

Preguntas frecuentes

¿La lección «Llamadas opcionales y acceso mediante índices» es gratis?

Sí — el texto completo de «Llamadas opcionales y acceso mediante índices» 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 «Llamadas opcionales y acceso mediante índices»?

Use el encadenamiento opcional con llamadas y corchetes. 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 4 de 4.

¿Cuánto tiempo toma la lección «Llamadas opcionales y acceso mediante índices»?

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