Surya JS Journey
Learn JavaScript through concepts, code, and guided practice.
A focused workspace for concept study, interactive examples, visual explanations, and challenge solving.
Optional Chaining
Optional chaining safely reads nested properties without throwing when an intermediate value is missing.
Optional chaining uses `?.` to stop property access or function calls when the left side is `null` or `undefined`. It helps avoid repetitive guard checks and reduces runtime errors when working with data that may be incomplete or partially loaded.
Explanation
Optional chaining uses `?.` to stop property access or function calls when the left side is `null` or `undefined`. It helps avoid repetitive guard checks and reduces runtime errors when working with data that may be incomplete or partially loaded.
Key Points
- Optional chaining returns `undefined` instead of throwing when the left side is missing.
- It is useful for nested objects, arrays, and optional callbacks.
- It does not replace understanding the actual data shape.
Common Mistakes
- Using optional chaining everywhere instead of fixing unclear data assumptions.
- Expecting it to handle every falsy value instead of specifically `null` and `undefined`.
- Forgetting that the result may still be `undefined` and require a fallback.
Practice Workspace
optional-chaining.js
Edit the code, run it in the browser, and inspect the console output below. Reset restores the original snippet for this page.
Editor
8 lines
Output
0 entries
Mode
practice
Workspace Notes
Changes stay local until you run the code. Reset restores the original snippet immediately for another pass.
Editor Actions
Use the editor to explore the example, then run it to inspect the console.
Run the code to see output here.
Expected Output
Surya
undefinedContinue in Playground
Open this concept example in the shared playground to keep experimenting without leaving the broader workspace flow.
Open in PlaygroundRelated Concepts
Truthy and Falsy
JavaScript treats some values as truthy and some as falsy when evaluating conditions.
Nullish Coalescing
Nullish coalescing provides a fallback only when a value is `null` or `undefined`.
Objects
Objects store related data and behavior as key-value pairs and are one of JavaScript’s core building blocks.