[JavaScript] 옵셔널 체이닝 & nullish 병합 연산자

유튜브 채널 코딩애플을 보다가,
'모르면 코딩인생 끝나는 자바스크립트 신문법'이라는 제목에 린레벌떡 들어가서 시청 후 벨로그 정리 ... 끄적끄적 ... ✏️

Obtional Chaining

"왼쪽 평가대상이 없어도 괜찮은 경우에만 선택적으로 사용" 이 핵심

• user가 주소 정보를 가지고 있지 않을 때, user.address.street을 사용해 주소에 접근하면 에러가 발생할 수 있다.

let user = {}; // 주소 정보가 없는 사용자
alert(user.address.street); // TypeError: Cannot read property 'street' of undefined

• 자바스크립트를 사용해 페이지에 존재하지 않는 요소에 접근하여, 정보를 가져오려고 하면 문제 발생

// querySelector(...) 호출 결과가 null인 경우 에러 발생
let html = document.querySelector('.my-element').innerHTML;

지금까지는 이를 해결하기 위해, && 연산자를 사용했다.

let user = {}; // 주소 정보가 없는 사용자
alert( user && user.address && user.address.street ); // undefined

✔️ 옵셔널 체이닝은 '?.' 앞의 평가 대상이 undefined나 null이면 평가를 멈추고 undefined를 반환한다.

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

alert( user?.address?.street ); // undefined, 에러 발생 X

let user = null;

alert( user?.address ); // undefined
alert( user?.address.street ); // undefined

Nullish Coalescing

leftExpr ?? rightExpr 왼쪽 표현식이 null 또는 undefined인 경우, 오른쪽 표현식의 결과를 반환!

let a = null ?? 'hello';
let b = '' ?? true;
let c = false ?? true;
let d = 0 ?? 1;
let e = undefined ?? 'world';
console.log(a);	// 'hello'
console.log(b); // ''
console.log(c); // false
console.log(d); // 0
console.log(e); // 'world'

• && 연산자와 || 연산자와 직접적으로 같이 사용하는 것을 불가능!

null || undefined ?? "foo"; // raises a SyntaxError

⚡️ 소괄호와 함께 사용하기!

(null || undefined) ?? "foo"; // returns "foo"