---

3항 연산자를 잘못 쓴 거라고 믿고 싶은 모양의 코드를 보았습니다.
매우 당혹스럽네요.
?. 과 ?? 는 뭘까요?

---

옵셔널 체이닝(Optional chaining)

• 옵셔널 체이닝 연산자 ?.는 객체(배열)의 중첩된 프로퍼티가 undefined 또는 null 일 때 에러 없이 접근 가능.
• obj?.prop, obj?.[expr], arr?.[index], func?.(args)
• 객체, 배열, 함수에서 사용 가능.

const user = {};

console.log(user.address.street); // TypeError: Cannot read properties of undefined (reading 'street')
console.log(user?.address?.street); // undefined

평가가 확장되지 않음

• 옵셔널 체이닝은 평가가 확장되지 않음.
• 옵셔널 체이닝은 왼쪽(앞)의 평가 대상이 undefined 또는 null 이면 평가를 멈추고 undefined 반환.

const user = {};

// user만 평가 대상이 되며, user은 undefined나 null이 아니므로, ?.를 사용 안한것과 같은 결과를 가짐.
console.log(user?.address.street); // TypeError: Cannot read properties of undefined (reading 'street')
            
// 이미 address에서 평가가 undefined로 나옴. (평가대상이 address)
console.log(user.address?.street); // undefined

// 따라서 그 이후값은 계속 undefined가 나옴. (평가대상이 address)
console.log(user.address?.street.type); // undefined

• 따라서 중첩된 구조에서 여러 번 사용 가능하나,
• 너무 평가대상(옵셔널 체이닝 왼쪽)을 정확하게 고려하지 않고 중첩하여 사용하면 예상치 않은 오류를 야기.
• 옵셔널 체이닝 왼쪽 평가대상은 없어도 괜찮은 경우에만 사용하고, 꼭 있어야 하는 값인데 사용하면 에러를 찾기 쉽지 않음으로 지양.

대괄호 표현식

• 대괄호 표현식으로 배열 등에서도 이용 가능.

const arr = [
  [1, 8, 2],
  [3, 4, 5],
];
// arr 값은 평가대상이 아니고 무조건 존재해야 하기 때문에 부적합.
console.log(arr?.[5][1]); // TypeError: Cannot read properties of undefined (reading '1')
// 평가대상은 arr이의 index값이 5인 요소의 존재 유무.
console.log(arr[5]?.[1]); // undefined

null 병합 연산자(Nullish coalescing operator)

• null 병합 연산자 ?? 는 왼쪽 평가대상(표현식)이 null 또는 undefined 일 때 오른쪽 표현식를 반환, 그렇지 않으면 왼쪽 평가대상을 반환하는 논리 연산자.
• leftExpr ?? rightExpr
• 논리 연산자(OR)과 차이점을 가짐.

let x = NaN;

console.log(x || 'hi'); // hi
// null 병합 연사자는 null과 undefined 값을 제외하고 모든 값을 truthy하게 판단.
console.log(x ?? 'hi'); // NaN

let x = null;

console.log(x || 'hi'); // hi
console.log(x ?? 'hi'); // hi

---