[TIL] optional chaining(옵셔널 체이닝), nullish coalescing(널리쉬 콜레싱)
1.optional chaining (.?)
옵셔널 체이닝(optional chaining)을 사용하면 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있다
const addressHtml = document.querySelector('#address').innerHTML;
// querySelector(...) 호출 결과가 null인 경우 에러 발생address를 찾지 못하면 error가 발생한다. 이러한 문제를 발생하지 않기 위해 if조건문을 작성해주면 된다.
하지만 옵셔널 체이닝을 사용하면 편리하게 사용 할 수 있다.
다른 예시로
//객체
let user= {
name:"dwseo",
age: 27,
}
user라는 객체가 있다고 가정해보자!
user.friend.name라고 작성하면,
Uncaught TypeError: Cannot read properties of undefined (reading 'name') error가 발생한다.
이는 user라는 객체에 friend라는 속성도 없는데 name을 접근하였기 때문이다.
옵셔널 체이닝(.?)을 활용하여 user.friend.?name 작성하면, error없이 undefined가 뜬다.
즉, 옵셔널 체이닝은 '앞’의 평가 대상이 undefined나 null이면 평가를 멈추고 undefined를 반환한다!!
하지만 옵셔널 체이닝을 남용하면, 에러를 조기에 발견하지 못하고 디버깅이 어려워지기 때문에 무작정 남발하면 안될 것 같다....
2. nullish coalescing operator (??)
nullish coalescing operator란, 왼쪽 피연산자가 'null' 또는 'undefined' 이면 오른쪽 피연산자를 반환하고, 그렇지 않으면 왼쪽 피연산자를 반환하는 논리 연산자이다.
nullish coalescing operator를 사용하지 않으면 이처럼 코드가 길다.
//nullish coalescing operator(널리쉬 병합 연산자)
x = a ?? b
// nullish 병합 연산자를 사용하지 않았을 예제
x = (a !== null && a !== undefined) ? a : b; nullish 병합 연산자를 연쇄적으로 사용이 가능하다!
let first = null;
let second = null;
let winning = "당첨!";
console.log(first ?? second ?? winning ?? "first, second, winning 셋 다 null 혹은 undefind");
// 결과 : 당첨!
- nullish 병합 연산자는 5번째로 낮은 연산자 우선 순위를 가지며 조건부(삼항) 연산자보다 낮고 || 높다.
=> 그래서 복잡한 표현식 안에서 ??를 사용해 값을 하나 선택할 땐 괄호()를 추가해야 한다.
->추후 연산자 우선순위에 대해서도 정리해봐야지 ㅋㅋ
- '??'와 '||'의 차이
중요한 차이점은 2가지가 존재한다.
- ||는 첫 번째 truthy 값을 반환합니다.
- ??는 첫 번째 정의된(defined) 값을 반환합니다.
소스로 확인해보면
const height = 0;
console.log(height || 100); // 100
console.log(height ?? 100); // 0즉, height라는 변수가 undefind 혹은 null이면 ||를 반응하고, 0이라는 값이 저장되있으면 ?? 반응한다.
optional chaining (.?)와 nullish coalescing(??) 혼용 사용예제
const user= {
name:"dwseo",
}
console.log(user.name?.toUpperCase() ?? "null check"); // "DWSEO"
console.log(user.friend?.toUpperCase() ?? "null check"); // "null check"참고 :
