JavaScript Academy · Lesson

Optional Calls and Index Access

Use optional chaining with calls and brackets.

Lesson 4 of 413 steps

Optional Calls and Index Access is a free JavaScript Academy lesson on CoddyKit. This is lesson 4 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the JavaScript Academy learning path, and your progress syncs across the web and the CoddyKit app. The JavaScript Academy course includes 4 lessons in total.

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.

Answer it in the interactive lesson

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.

Free to start

Learn JavaScript with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 59
Lessons: 200

Start learning free View the full course

Frequently Asked Questions

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

Yes — any 3 lessons of the JavaScript Academy learning path, including “Optional Calls and Index Access”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The JavaScript Academy course includes 4 lessons in total.

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, so you can start here or from the beginning and move at your own pace. This is lesson 4 of 4.

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

← Back to JavaScript Academy