[9장] 단축평가 - 옵셔녈 체이닝 연산자와 null 병합 연산자

📂9장 타입 변환과 단축 평가

옵셔널 체이닝 연산자

• .? : 좌항이 null,undefined인 경우 undefined를 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이어감.

let user = {}; // 주소 정보가 없는 사용자

alert( user ?. user.address); // undefined, 에러가 발생하지 않습니다.
alert( user ?. user.address.street); // undefined

// 만약 address가 필수값이 아닐때, user.address.street는 에러가 발생함.
alert(user.address?.street) // 그럴경우 이 코드처럼 사용함.

• 선언이 완료된 변수가 좌항에 있어야함.
• ?.를 계속 연결해서 체인을 만들면 중첩 프로퍼티들에 안전하게 접근할 수 있음.
  • 단, ?.은 ?.좌항이 없어도 괜찮은 경우에만 선택적으로 사용해야 함.
    • why? 에러를 발생하지 않기때문에 디버깅이 어려움

let str = '';

const length = str && str.lenth; // null과 undefined는 아니지만 빈 문자열은 false임.
console.log(length) // ''

const length = str ?. length; // 옵셔널 체이닝 연산자는 null과 undefined만 
console.log(length) // 0

• 논리 연산자를 활용하여 작성 할수도 있지만 null과 undefined가 아닌 Falsy값일때 우항을 참조하지 않고 좌항을 참조하여 오류를 발생함.

null 병합 연산자

• ES11에 도입된 null 병합 연산자
• 좌항 ?? 우항 : 좌항이 null, undefined이면 우항 반환, 그렇지 않으면 좌항 반환
• 그 이전에는 || 연산자를 사용한 단축 평가를 통해 변수에 기본값 설정.
  • 하지만, 0 이나 빈 문자열('')을 값으로 설정하고 싶을때 예측하지 못한 동작 발생 할 수 있음.

let height = 0;

alert(height || 100); // 100
alert(height ?? 100); // 0

heigth ?? 100

• heigth 값이 null이나 undefined이면 기본값으로 100을 설정함.

alert(height || 100); // 100

• 0도 값인데 논리 연산자를 사용하면 false이니깐 100이 반환됨.

alert(height ?? 100); // 0

• heigth 값이 null이나 undefined이 아니고 0이란 값이 있으니 0 반환함.

2022.12.12 - [개발언어/[JS] deep-dive 정리] - [9장] 단축 평가

[9장] 단축 평가

2022.12.12 - [개발언어/[JS] deep-dive 정리] - [9장] 타입 변환

[9장] 타입 변환

---

참고 - https://ko.javascript.info/optional-chaining , https://ko.javascript.info/nullish-coalescing-operator

[모던 자바스크립트 Deep Dive, ⌜이웅모 ⌟, 위키북스, 20210103]를 읽고 정리한 글입니다.