옵셔널 체이닝(Optional Chaining) 연산자와 null 병합 (nullish coalescing) 연산자

1.  ?. (옵셔널 체이닝 연산자)

ES11에서 도입된 옵셔널 체이닝 연산자(?.)는

연산자 ?.는 좌항의 피연산자가 null이나 undefined인 경우 undefined를 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이어간다.

var elem = null;
var value = elem?.value; //?.연산자 좌항이 null이기 때문에 value에는 undefined가 반환.
console.log(value); //undefined

옵셔널 체이닝 연산자는 객체를 가리키기를 기대하는 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티를 참조할 때 유용하다.

다시 말해, 내가 참조할려는 객체 변수가 존재할 때는 프로퍼티를 참조하고 아니라면 그냥 undefined 반환을 명령하는 연산자이다.

위와 같은 방식을 ?. 연산자 도입 이전에는 논리 연산자 &&를 사용하여 단축 평가를 통해 변수가 null 또는 undefined인지 확인했다.

var elem = null;
var value = elem && elem.value;
//null은 falsy 값이기 때문에 && 논리연산자 단축평가로 elem이 반환된다.
//만약 elem이 falsy 값이 아니라면, elem.value 값이 반환된다.
console.log(value); // null

하지만 위와 같은 논리연산자 &&로 단축평가를 활용할  시, 발생할 수 있는 문제가 있다.

var str = '';
var length = str && str.length;
// str = ''는 문자열 str이 비어있다는 뜻이 아니라 문자열 str이 ''란 문자열을 가지고 있단 뜻이다.
// 하지만 빈 문자열 ''는 Falsy 값이기 때문에 단축평가에 이해서 ''를 반환한다.
console.log(length); // ''
// 만약 개발자가 str의 길이를 반환 받고 싶을 때, && 연산자는 의도와 맞지 않는 결과를 받을 수 있다.

이를 옵셔널 체이닝 연산자 ?.를 사용하면 해결된다.

var str = '';
var length = str?.str.length; //str이 null, undefined가 아니기 때문에 우항의 참조를 이어간다.
console.log(length); // 0

 

---

2. ?? (null 병합 연산자)

ES11에서 도입된 null 병합 연산자(??)는

연산자 ?? 좌항의 피연산자가 null 또는 undefined라면 우항의 피연산자를 반환하고, 그렇지 않다면 좌항의 피연산자를 반환한다.

var foo = null ?? 'default string'; 
// ?? 연산자 좌항이 null 또는 undefined라면 우항이 반환된다.
console.log(foo); // "default string"

null병합연산자는 아래와 같이 변수에 기본값을 설정할 때 유용하다.

const add1 = function(a, b){return a+b;};
const add2 = function(a, b){
    const first = a ?? 0; // null병합연산자 ??를 통해서 인자 값이 넘어오지 못하면 0을 초기화
    const second = b ?? 0; 
    return first + second;
};
add1(); // NaN
add2(); // 0

null병합연산자가 도입되기 이전에는 논리연산자 ||를 통한 단축평가를 활용하여 기본값을 설정했다.

||를 통한 단축평가를 활용할 경우 좌항의 피연산자값이 Falsy(false, undefined, null, 0, -0, NaN, '')면 우항의 피연산자를 반환한다.

하지만 Falsy 값으로 평가되는 0 또는 ''가 기본값으로서 유효하다면 예기치 않은 동작이 발생할 수 있다.

var foo = '' || 'default string' ; 
// 빈 문자열 ''이 만약 기본값으로 유효하다면, 기본값이 재할당되는 예기치 않은 동작이 발생한다.
console.log(foo); // "default string"

하지만 null병합연산자 ??는 좌항의 피연산자가 Falsy 값이라도 null 또는 undefined가 아니라면 좌항의 피연산자를 그대로 반환한다.

var foo = '' ?? 'default string';
//''를 기본값으로 판단한다면 기본값 할당을 하지 않는다.
console.log(foo); // ""

---

※ 해당 정리글은 위키북스 모던 자바스크립트 Deep Dive를 참고하여 작성하였습니다.