CodeBlanks Logo Icon CodeBlanks
Login Register

Optional chaining

Learn null-safe access with ?.

Optional chaining

When accessing a nested property of an object you can manage the risk of intermediate values being null or undefined with the optional chaining operator ?.. user?.address?.city returns undefined instead of throwing when user or address is null/undefined.

The traditional equivalent is user && user.address && user.address.city; this is long and error-prone. With ?. you get the same result shortly and safely. It is especially useful for API responses where some fields may be missing.

null vs undefined

In JavaScript null means an intentional "no value" while undefined means "not defined". A variable that has not been assigned yet is undefined; a programmer writes null to leave it empty on purpose.

Optional chaining handles both safely: in x?.y, whether x is null or undefined, the result is undefined. No error is thrown. Thanks to this you can write safe code without try/catch or long && chains when reaching nested data.

Practice Reach the user address

The user variable holds null. Declare a variable city and assign the result of user?.address?.city to it. Then print city with console.log. The output on a single line must be undefined.

Starter code

index.js
const user = null;
// Declare city with ?. and print it

Sample solution

index.js
const user = null;
const city = user?.address?.city;
console.log(city);

Expected output

undefined

Questions and answers

Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.

1 Write the optional chaining

Question 
const city = user____address?.city;
Answer 
const city = user?.address?.city;

Explanation: ?. gives null-safe access.

2 What is the result of null?.city?

index.js
null?.city
  • "city"
  • true
  • null.city error
  • undefined Correct answer

Explanation: ?. does not throw on null; it returns undefined.

3 Match each operator to its meaning

Term Meaning
?. Null-safe access
. Ordinary access
?? Nullish coalescing
|| Logical or

All lessons in Beginner

1 Node.js basics

  1. What is Node.js?
  2. Your first program
  3. ES modules
  4. package.json
  5. CommonJS vs ESM
  6. Summary - Node.js basics

2 Variables

  1. let and const
  2. var and scope
  3. Type inference
  4. Destructuring
  5. Spread and rest
  6. Summary - Variables

3 Data types

  1. Primitive types
  2. Template literals
  3. Number and Math
  4. Symbol
  5. typeof
  6. Summary - Data types

4 Project: Calculator

  1. Project design
  2. Add and subtract
  3. Multiply and divide
  4. process.argv
  5. Putting it together

5 Operators

  1. Arithmetic operators
  2. Assignment operators
  3. Comparison operators
  4. Logical operators
  5. Nullish coalescing
  6. Summary - Operators

6 Strings

  1. String methods
  2. String search
  3. substring and slice
  4. replace and split
  5. padStart and trim
  6. Summary - Strings

7 Conditionals

  1. The if statement
  2. else and else if
  3. switch
  4. Ternary
  5. Optional chaining
  6. Summary - Conditionals

8 Loops

  1. The for loop
  2. The while loop
  3. for...of
  4. for...in
  5. break and continue
  6. Summary - Loops

9 Project: Shopping cart

  1. Cart design
  2. Adding items
  3. Calculating totals
  4. Listing the cart
  5. Putting it together

10 Arrays

  1. Declaring arrays
  2. Array access
  3. push and pop
  4. shift and unshift
  5. splice and slice
  6. Summary - Arrays

11 Array methods

  1. map
  2. filter
  3. reduce
  4. find and some
  5. forEach
  6. Summary - Array methods

12 Objects

  1. Object literal
  2. Property access
  3. Computed properties
  4. Object methods
  5. Object spread
  6. Summary - Objects

13 Functions

  1. Defining functions
  2. Return values
  3. Arrow functions
  4. Default parameters
  5. Rest parameters
  6. Summary - Functions

14 Callbacks

  1. What are callbacks?
  2. Higher-order functions
  3. forEach with callbacks
  4. Error-first callbacks
  5. Callback hell
  6. Summary - Callbacks

15 Project: To-do CLI

  1. Task model
  2. Adding tasks
  3. Listing tasks
  4. Completing tasks
  5. Putting it together

16 Promises

  1. What are promises?
  2. then and catch
  3. Promise.all
  4. Promise.race
  5. finally
  6. Summary - Promises

17 async/await

  1. async function
  2. await
  3. try/catch
  4. await with Promise.all
  5. Sequential await
  6. Summary - async/await

18 fs module

  1. fs.promises
  2. readFile
  3. writeFile
  4. appendFile
  5. existsSync
  6. Summary - fs module

19 path module

  1. path.join
  2. path.resolve
  3. path.parse
  4. path.dirname and basename
  5. path.extname
  6. Summary - path module

20 Beginner final

  1. Project design
  2. Data model
  3. Business logic
  4. fs persistence
  5. Putting it together