(?.)

const adventurer = {
  name: "Alice",
  cat: {
    name: "Dinah",
  },
};

const dogName = adventurer.dog?.name;
console.log(dogName);
// : undefined

console.log(adventurer.someNonExistentMethod?.());
// : undefined

obj?.prop
obj?.[expr]
func?.(args)

const nestedProp = obj.first && obj.first.second;

const nestedProp = obj.first?.second;

const temp = obj.first;
const nestedProp =
  temp === null || temp === undefined ? undefined : temp.second;

undeclaredVar?.prop; // ReferenceError: undeclaredVar is not defined

const result = someInterface.customMethod?.();

const propName = "x";
const nestedProp = obj?.[propName];

function printMagicIndex(arr) {
  console.log(arr?.[42]);
}

printMagicIndex([0, 1, 2, 3, 4, 5]); // undefined
printMagicIndex(); // undefined; if not using ?., this would throw an error: "Cannot read properties of undefined (reading '42')"

const object = {};
object?.property = 1; // SyntaxError: Invalid left-hand side in assignment

String?.raw`Hello, world!`;
String.raw?.`Hello, world!`; // SyntaxError: Invalid tagged template on optional chain

new Intl?.DateTimeFormat(); // SyntaxError: Invalid optional chain from new expression
new Map?.();

const potentiallyNullObj = null;
let x = 0;
const prop = potentiallyNullObj?.[x++];

console.log(x); // x  0

const potentiallyNullObj = null;
const prop = potentiallyNullObj?.a.b;
// 

const potentiallyNullObj = null;
const prop =
  potentiallyNullObj === null || potentiallyNullObj === undefined
    ? undefined
    : potentiallyNullObj.a.b;

const potentiallyNullObj = null;
const prop = (potentiallyNullObj?.a).b;
// TypeError: Cannot read properties of undefined (reading 'b')

const potentiallyNullObj = null;
const temp = potentiallyNullObj?.a;
const prop = temp.b;

const myMap = new Map();
myMap.set("JS", { name: "Josh", desc: "I maintain things" });

const nameBar = myMap.get("CSS")?.name;

// 
function doSomething(onContent, onError) {
  try {
    // 
  } catch (err) {
    // onError 
    if (onError) {
      onError(err.message);
    }
  }
}

// 
function doSomething(onContent, onError) {
  try {
    // 
  } catch (err) {
    onError?.(err.message); // onError 
  }
}

const customer = {
  name: "Carl",
  details: {
    age: 82,
    location: "Paradise Falls", // 
  },
};
const customerCity = customer.details?.address?.city;

// 
const customerName = customer.name?.getName?.(); //  customerName  undefined

function printCustomerCity(customer) {
  const customerCity = customer?.city ?? "Unknown city";
  console.log(customerCity);
}

printCustomerCity({
  name: "Nathan",
  city: "Paris",
}); // "Paris"
printCustomerCity({
  name: "Carl",
  details: { age: 82 },
}); // "Unknown city"