옵셔널 체이닝 연산자
옵셔널 체이닝 연산자 ?. 는
좌항 피연산자가 false로 평가되는 값이라도
null 또는 undefined가 아니면 우항의 프로퍼티 참조를 이어간다
즉
좌항이 null 또는 undefined만 아니면 우항값을 쓸거임. 이런 뜻
var elem = null;
// elem이 null 또는 undefined면 undefiend를 반환하고
// 그렇지 않으면 우항의 프로퍼티 참조를 이어간다.
var value = elem?.value;
console.log(value); // undefined
옵셔널 체이닝 연산자는
변수가 null 인지 undefined가 아닌지 확인하고
프로퍼티를 참조할 때 유용하다.
하지만
좌항 피연산자가 false로 평가되는 Falsy 값(false, undefined, null, 0, -0, NaN, '')이더라도
null 또는 undefined가 아니면 우항의 프로퍼티 참조를 이어간다.
즉
Only null 또는 undefined만 체크한다. 이런 뜻
var str = '';
var length = str?.length;
console.log(length); // 0
null 병합 연산자
null 병합 연산자 ?? 는 좌항의 피연산자가
null 또는 undefined이면 우항의 피연산자 리턴
아니면 좌항의 피연산자 리턴
// 좌항이 null 또는 undefined일 때
var foo = null ?? 'default string';
console.log(foo); // "default string"
// 좌항이 값이 null 또는 undefined만 아니면 좌항의 값을 반환
var foo = '' ?? 'default string';
console.log(foo); // ""
변수에 기본값을 설정할 때 유용하다
정리
옵셔널 체이닝 연산자는 ( ?. )
왼쪽값이 null 또는 undefined만 아니라면
오른쪽 값 리턴
null 병합 연산자는 ( ?? )
왼쪽값이 null 또는 undefined만 아니라면
왼쪽값 리턴.
헷갈린다...
출처 모던 자바스크립트 Deep dive
'자바스크립트' 카테고리의 다른 글
자바스크립트 타입 변환과 단축 평가 (0) | 2021.09.23 |
---|---|
자바스크립트 연산자 (2) 삼항 조건 연산자, 논리 부정 연산자, 지수 연산자 (0) | 2021.09.23 |
자바스크립트 연산자 (1) (0) | 2021.09.23 |
자바스크립트 변수 사용시 주의사항 (0) | 2021.09.11 |
자바스크립트 동적 타이핑, 동적언어 단점 (0) | 2021.09.09 |