ES11 에서 도입된 재미있는 두 연산자 (옵셔널 체이닝, null 병합 연산자)

약간 쉬어가는 느낌으로 ES11 에서 도입된 재미있고 때로는 유용하게 사용할 수 있는 두 연산자에 대해 알아보려고 한다.

사실 지금 소개할 두 연산자들은 필수적인 것은 아니고, if ... else 조건문으로 대체할 수 있다.

하지만 자바스크립트에서는 if ... else 같은 절차적 문장을 극도로 꺼려하는 느낌이 있다. (물론 상대적인 느낌이다)

(for 문을 사용하는 대신 method 를 사용한다든가, 삼항 연산자나 논리 연산자를 이용한 단축 평가를 적극적으로 쓴다든가 하는)

물론 이해가 안 가는 건 아니다 !

if ... else 의 숲은 프로그램의 규모가 커질 때 코드의 가독성을 망가뜨리고, 유지보수를 힘들게 하는 스파게티 코드를 만든다.

이를 해결하기 위해 객체지향 개념이 등장하고, 프로그램 규모가 더 커지자 객체의 상속 계층이 너무 많아져서 비슷한 문제가 생기는 라자냐 코드를 해결하기 위해 또 함수형 프로그래밍을 도입하기도 하고 .. 지금 이 순간에도 개발자들은 여러가지 해결책을 찾고 있다.

 

 

각설하고, 어쨌든 잘 사용하면 훨씬 가독성 좋고 유지보수 하기 쉬운 코드를 작성할 수 있다는 말 !

이제 하나씩 알아보자.

 

---

출처 : 모던 자바스크립트 Deep Dive: 자바스크립트의 기본 개념과 동작 원리 / 이웅모 지음

 

옵셔널 체이닝 연산자

 

옵셔널 체이닝 연산자란 좌항의 피연산자가 null | undefined 일 경우 undefined 를 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이어가는 연산자이다.

예시를 보면 이해하기 쉽다.

// useGetData() 는 REST API 의 GET 요청을 이용한 함수를 감싼 리액트 커스텀 훅이라고 하자.
// 대충 데이터를 전송받는 데 성공하면 data 에 값이 들어오고, re-render 되는 상황.
const data = useGetData();

// data 는 네트워크 상황에 따라 현재 undefined 일 수도 있는 상황
const id = data?.id;

console.log(id); // data가 있으면 id, 없으면 undefined

위의 문장은 옵셔널 체이닝이 없을 때는 아래와 같이 썼다.

const data = useGetData();

const id = ((data === null) || (data === undefined)) ? undefined : data.id;

 

벌써 가독성이 떨어지고, if ... else 문을 쓰면 더욱 심하다.

 

이보다 좋은 방법으로는 논리 연산자 && 를 사용한 단축 평가를 썼는데, 이러면 좌항이 null | undefined 뿐만이 아닌 모든 Falsy 값 (false, 0, -0, NaN, '') 에 대해서도 좌항 피연산자를 그대로 반환하는 문제가 있었다.

var str = '';

var length = str && str.length;
console.log(length); // '' (문자열 길이를 참조하지 못함 !)

var length2 = str?.length;
console.log(length) // 0 (문자열 길이를 참조함 !)

 

 

내가 받아온 객체가 값이 있는지 없는지에 따라 처리를 다르게 해야 할 때가 굉장히 많이 있는데, 옵셔널 체이닝 연산자는 이럴 때 if ... else 조건문을 쓰지 않고 간편하게 처리를 할 수 있다 ! 자주 유용하게 쓰일 기능인 듯 하다.

 

 

---

null 병합 연산자

 

널 병합 연산자는 좌항의 피연산자가 null | undefined 일 경우 우항의 피연산자를 반환하고, 그렇지 않으면 좌항의 피연산자를 반환한다.

이 말을 딱 봤을 때, 어 ? 그럼 변수에 기본값을 설정할 때 좋겠네 라는 생각이 바로 든다.

const data = useGetData(); // 위의 예시와 같은 리액트 커스텀 훅

const text = data?.text ?? "loading..."; // 옵셔널 체이닝을 활용함
                                           // (data를 전송받기 전엔 좌항이 undefined 인 상황)

console.log(text); // 데이터를 전송받기 전엔 loading..., 받은 이후에는 data의 text가 출력됨.

그리고 옵셔널 체이닝과 비슷하게, 아래와 같은 예시가 있다.

 

const foo = bar ?? default;

const foo = (bar === undefined) || (bar === null) ? default : bar;

// 완전히 동일한 기능을 하는 두 문장

const foo = bar || default;

// 똑같아 보이지만, bar 에 null | undefined 가 아닌 Falsy 값일 경우에도 default 가 되버림.

 

 

위의 옵셔널 체이닝 연산자의 쓸모와 마찬가지로 널 병합 연산자도 유용하게 쓰일 수 있을 것 같다.