(자바스크립트) 옵셔널 체이닝 ?. 이거 언제 어떻게 쓰는 거예요

API에서 데이터 받아와서 화면에 뿌리는데 자꾸 이 에러가 떠요. Cannot read properties of undefined (reading 'name') 이런 거요. 서버 응답이 늦거나 값이 없을 때 터지는 거 같더라고요.

제 코드는 대충 이래요.

const user = await fetchUser();
console.log(user.profile.name);

user는 있는데 profile이 없는 경우가 있어서 저기서 터지는 거 같아요. 그래서 지금은 이렇게 방어하고 있는데요.

if (user && user.profile && user.profile.name) {
  console.log(user.profile.name);
}

이렇게 하니까 되긴 되는데 중첩 깊어지면 && 가 너무 많아져서 지저분해요. 검색하다 보니까 ?. 라는 옵셔널 체이닝이란 게 있던데 이걸 쓰면 된다는 말이 있더라고요.

근데 정확히 어떻게 동작하는 건지, 그리고 함수 호출할 때나 배열 인덱스 접근할 때도 쓸 수 있는 건지 궁금해요. 그리고 아까 봤던 ?? 랑 같이 쓰면 기본값도 넣을 수 있다는데 그건 또 어떻게 쓰는 건지 예시 좀 보여주시면 감사하겠습니다.