JavaScript 옵셔널 체이닝 연산자와 null 병합 연산자

---

옵셔널 체이닝 연산자와 null 병합 연산자

단축 평가와 관련하여 ES11(ECMAScript2020)에서 추가 된 연산자가 있다. 단축 연산을 좀 더 꼼꼼하게 사용할 수 있도록 해준다. 만약 실제 코드에 쓴다면 무척이나 유용하긴 할 듯. 실제로 써본적도 없고, 사실 있는 줄도 몰랐다;; 다른 사람이 짠 코드를 이해해야 하는 경우가 생길 수도 있으니 학습해둔다. 손에 익게 자주 써봐야겠지만 아직까지 이 코드로 다른 개발자와 얼마나 잘 소통될진 확신할 수 없다(...)

옵셔널 체이닝 연산자

옵셔널 체이닝 연산자
연산자 ?.로 사용한다.

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

let elem = null;

let value = elem?.value;
console.log(value); //undefined

?.연산자가 null이니 undefined를 반환한다.
만약 null이 아니었다면? elem의 프로퍼티인 value가 찍혔을 것이다. 즉 elem.value.

이전에는 논리곱(&&)연산자를 활용해서 처리했다.
논리곱(&&)연산자는 좌항 피연산자가 false로 평가되는 Falsy값(false, undefined, null, 0, -0, NaN, '')이면
좌항 피연산자를 그대로 반환한다. 그럼에도 ?.가 추가 된 건 뭔가.. 석연찮은 구석이 있었기 때문에 나온거였겠지?
0이나 ''은 객체로 평가될 때도 있기 때문이다.

let elem = null;

let value = elem && elem.value;
console.log(value); // null

이건 좋다.

let str = '';

let length = str && str.length;
console.log(length); // ''

다음과 같은 경우에는 문자열의 길이(length)를 참조하지 못했다. 문자열을 길이 0을 얻고 싶은데, str = '';은 빈 문자여서 false가 나왔기 때문이다. 이를 옵셔널체이닝 연산자(?.)로 바꾸면?

let str = '';

let length = str?.length;
console.log(length); // 0

0을 얻게 된다. 옵셔널 체이닝 연산자 (?.)는 좌향 피연산자가 false로 평가되는 Falsy 값(false, undefined, null, 0, -0, NaN, '')이라도 null 또는 undefined가 아니면 우항의 프로퍼티를 참조한다.

null 병합 연산자

null 병합 연산자
??

(?? 어쩌라고 말하는 것 같다..) null 병합 연산자의 경우 좌항의 피연산자가 null 또는 undefined일 경우 우항의 피연산자를 반환하고 그렇지 않으면 좌항을 반환한다. null 병합 연산자는 변수에 기본값을 설정할때 유용하다.

// null 병합 연산자를 사용한 변수 기본값 설정
let foo = null ?? 'default string';
console.log(foo) // 'default string'

null이니 'default string'을 준다. default값 설정하기에 좋다. 이전에는 논리합 연산자를 사용해서 변수 기본값을 설정했다. 근데 ?. 연산자와 마찬가지로 0이나 ''도 기본값으로 유효하게 쓰고 싶은데! 유효하지 않아서 null 병합 연산자 ??가 나왔다.

// 논리합 연산자를 사용한 변수 기본값 설정
let foo = '' || 'default string';
console.log(foo) // 'default string'

나는 '' 빈 문자열을 할당하고 싶은데 false로 인식해서 우항의 default string이 들어간다 ㅠㅠ

// null 병합 연산자는 Falsy 값이라도 null, undefined가 아니면
// 좌항의 피연산자를 반환한다.
let foo = '' ?? 'default string';
console.log(foo) // ''

null 병합 연산자를 쓰면? 변수에 ''가 들어가있는 걸 볼 수 있다.

---