• Home
  • JavaScript
    • Introduction to JavaScript
    • JavaScript Developer
  • TypeScript
    • Introduction to TypeScript
    • TypeScript Developer
  • React.js
    • Introduction to React
    • React Developer
  • Python
    • Introduction to Python
    • Python Developer
  • C++
    • Introduction to C++
    • C++ Developer
  • C Language
    • Introduction to C
    • C Developer
  • Rust
    • Introduction to Rust
    • Rust Developer
  • Zig
    • Introduction to Zig
    • Zig Developer
  • Linux Shell
    • Introduction to the Linux Shell
    • Linux Shell Developer
  • Interactive Training
  • Pricing
  • Brainstorm
STEMTrainingGrounds
  • Courses
    • Home
    • JavaScript
      • Introduction to JavaScript
      • JavaScript Developer
    • TypeScript
      • Introduction to TypeScript
      • TypeScript Developer
    • React
      • Introduction to React
      • React Developer
    • Python
      • Introduction to Python
      • Python Developer
    • C++
      • Introduction to C++
      • C++ Developer
    • C Language
      • Introduction to C
      • C Developer
    • Rust
      • Introduction to Rust
      • Rust Developer
    • Zig
      • Introduction to Zig
      • Zig Developer
    • Linux Shell
      • Introduction to the Linux Shell
      • Linux Shell Developer
  • Interactive Training
  • Pricing
  • Reading Grounds

Quick Links

  • About Us
  • Pricing
  • Partnership
  • Brainstorm
  • Terms
  • Privacy
  • Refunds
  • Featured on DanielLaunches

Courses

  • JavaScript
    • Introduction to JavaScript
    • JavaScript Developer
  • TypeScript
    • Introduction to TypeScript
    • TypeScript Developer
  • React
    • Introduction to React
    • React Developer
  • Python
    • Introduction to Python
    • Python Developer
  • C++
    • Introduction to C++
    • C++ Developer
  • C Language
    • Introduction to C
    • C Developer
  • Rust
    • Introduction to Rust
    • Rust Developer
  • Zig
    • Introduction to Zig
    • Zig Developer
  • Linux Shell
    • Introduction to the Linux Shell
    • Linux Shell Developer

Newsletter

Subscribe to our free monthly newsletter, for a quick update on Python, JavaScript, and React news

© 2025 - 2026 STEMTrainingGrounds. All Rights Reserved.

JavaScript Developer - Lesson 19

Lesson 19 of 40

Optional Chaining (?.)

Lesson Progress: 0%

Lesson Progress: 0%
Optional Chaining (?.)
Lesson Incomplete
← Previous: Default Parameters
Lesson 19 of 40
Next: Nullish Coalescing (??) →
Code Example
const user = {
  profile: {
    name: "Alice"
  }
};

console.log(user.profile?.name);
// Alice

Instructions

▼ ← Click the triangle to hide or reveal instructions.

JavaScript Code Editor

Task Incomplete

Editor Input:

Editor Output:

Click "Run Code" to see the output here
  • Optional chaining ?. is used to safely check if something exists before using it.
  • In user.profile?, the ? checks if profile exists.
  • If profile does not exist, the code will not cause an error.
  • The ?.name part safely tries to get the name inside profile.
  • This helps prevent crashes when working with nested data.
Code Example
const user = {};

console.log(user.profile?.name);
// undefined

Instructions

▼ ← Click the triangle to hide or reveal instructions.

JavaScript Code Editor

Task Incomplete

Editor Input:

Editor Output:

Click "Run Code" to see the output here
  • Optional chaining uses the ?. symbol to safely peek inside a piece of information without causing an error.
  • The user.profile? part asks the computer, "Does a profile exist here first?" before moving forward.
  • When you use ?.name, the computer only looks for the name if it successfully found the profile folder first.
  • Instead of the program breaking, it simply says "undefined," which is the computer's way of saying "I couldn't find anything there."
  • It is like trying to find a toy in a box; if the box is missing, the inspector tells you it’s empty instead of getting upset!
Code Example
const numbers = [10, 20];

console.log(numbers[1]);
// 20

console.log(numbers?.[0]);
// undefined
console.log(numbers?.[2]);
// undefined

Instructions

▼ ← Click the triangle to hide or reveal instructions.

JavaScript Code Editor

Task Incomplete

Editor Input:

Editor Output:

Click "Run Code" to see the output here
  • Optional chaining is a safety check that prevents your code from crashing when looking at lists.
  • The numbers? part asks the computer, "Is there even a list here?" before it tries to look inside.
  • Using ?.[2] tells the computer to safely check for the third item without panicking if the list is too short.
  • If the list is missing or the spot is empty, the computer just says "undefined" instead of stopping the whole program.
  • It is like reaching into a bag for a marble; the ?. makes sure you don't get upset if your hand comes back empty!
Code Example
const user = {
  greet() {
    return "Hello!";
  }
};

console.log(user.greet?.());
// Hello!

Instructions

▼ ← Click the triangle to hide or reveal instructions.

JavaScript Code Editor

Task Incomplete

Editor Input:

Editor Output:

Click "Run Code" to see the output here
  • Optional chaining lets you safely try to run a command only if that command actually exists.
  • The user.greet? part asks the computer, "Does this user actually know how to greet people?" before trying to do it.
  • The ?.() part is the magic button that only clicks if the function is ready and waiting to be used.
  • If the greeting isn't there, the computer simply skips it instead of stopping your whole program with an error.
  • It is like checking if a toy has batteries before you flip the switch—it saves you from a disappointment or a "crash"!
Code Example
const user = {};

console.log(user.greet?.());
// undefined

Instructions

▼ ← Click the triangle to hide or reveal instructions.

JavaScript Code Editor

Task Incomplete

Editor Input:

Editor Output:

Click "Run Code" to see the output here
  • Optional chaining uses ?. as a safety shield to check if a command exists before trying to run it.
  • The user.greet? part asks the computer, "Is there a greeting command inside this user?"
  • The ?.() part tells the computer to only "push the button" to start the action if it actually found one.
  • In this example, because the user is empty, the computer just says "undefined" instead of crashing with a big error message.
  • It is like checking if a toy has a "Play" button before you try to press it—it keeps your game running smoothly!