0Pricing
JavaScript Academy · Lesson

Optional Calls and Index Access

Use optional chaining with calls and brackets.

Optional Calls and Index Access is a free JavaScript Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the JavaScript Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Beyond Property Reads

Optional chaining also has forms for calling functions and accessing array or dynamic-key elements safely.

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

Optional Method Calls

The ?.() form calls a function only if it exists. If the method is nullish, it returns undefined instead of throwing.

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

Why This Matters

Without it, calling a missing method throws. The optional call form guards against optional callbacks cleanly.

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

Only Nullish Skips the Call

?.() only skips when the value is null or undefined. If it is a non-function value, you still get a TypeError when calling.

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

Optional Index Access

The ?.[ ] form reads an element only if the base is not nullish, useful for arrays and computed keys.

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

Dynamic Keys

Bracket access with ?. handles dynamic property names safely.

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

Nested Arrays

You can chain optional index access through nested arrays or objects.

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

Optional Call on Returned Value

You can mix forms: read a value optionally, then call it optionally.

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

Combining With Defaults

Pair these forms with ?? to give the result a fallback.

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

Calling Array Methods Safely

Optional chaining lets you call a method on a possibly-missing array without a separate existence check.

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

Use Where Optionality Is Real

These forms shine for optional callbacks and uncertain data shapes. Avoid them where a value should always exist, so genuine bugs still surface.

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

Quick Check

Pick the safe call form.

Recap

Optional chaining includes ?.() for safe method calls and ?.[ ] for safe index or dynamic-key access. Both return undefined when the base is nullish but still throw if a non-function is called. Combine them with ?? for defaults, and reserve them for genuinely optional values.

Frequently asked questions

Is the “Optional Calls and Index Access” lesson free?

Yes — the full text of “Optional Calls and Index Access” is free to read here on the web, and the JavaScript Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the JavaScript Academy course, upgrade to CoddyKit PRO.

What will I learn in “Optional Calls and Index Access”?

Use optional chaining with calls and brackets. You practise JavaScript Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start JavaScript Academy?

No prior experience is required. JavaScript Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Optional Calls and Index Access” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this JavaScript Academy lesson?

Yes. Every JavaScript Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Optional Chaining with the ?. Operator
  2. Nullish Coalescing with ??
  3. Combining ?. and ??
  4. Optional Calls and Index Access
← Back to JavaScript Academy