[JS] 옵셔널 체이닝과 null 병합 연산자

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

옵셔널 체이닝 연산자(?)는 물음표 한 개로 표기한다.
옵셔널 체이닝 연산자는 좌항의 피연산자가 null 또는 undefined 인 경우
undefined 를 반환하고 그렇지 않으면 우항의 프로퍼티 참조를 이어간다.

예시 ①

var student;
var result = student?.name;
console.log(result); // undefined

위의 코드에서 student 는 선언만 되고 할당이 되지 않았다.
따라서 undefined 의 값을 갖는다.
옵셔널 체이닝 연산자인 '?' 는 좌항이 null 또는 undefined 인 경우 undefined 를 반환하기 때문에 result 는 undefined 이다.

예시 ②

var str = '';
var result = str?.length;
console.log(result); // 0

위의 코드에서 str 변수에 빈 문자열인 ' ' 가 할당되었다.
따라서 str 은 null, undefined 가 아니므로 옵셔널 체이닝 연산자는 우항의 참조를 이어나간다.
str 문자열의 길이인 length 는 0이기 때문에 result 는 0이 된다!

➋ null 병합 연산자 (??)

null 병합 연산자(??)는 물음표 두 개로 표기한다.
null 병합 연산자는 옵셔널 체이닝과 반대 개념이라 볼 수 있으며,
좌항의 피연산자가 null 또는 undefined 인 경우
우항의 피연산자를 반환하고 그렇지 않으면 좌항의 피연산자를 반환한다.

예시 ①

var foo = null ?? 'string';
console.log(foo); // 'string'

위 코드에서 ??의 좌항은 null 이기 때문에 우항을 참조하게 된다.
따라서 foo 를 출력하면 'string'이다.

예시 ②

var foo = '' ?? 'string';
console.log(foo); // ''

위 코드에서 ??의 좌항은 빈 문자열인 ' ' 이며 null, undefined 가 아니다.
따라서 null 병합 연산자는 좌항을 참조하게 되며 ' '를 출력한다.

-끝-