-
ES11 에서 도입된 재미있는 두 연산자 (옵셔널 체이닝, null 병합 연산자)JavaScript 2023. 3. 15. 00:36
약간 쉬어가는 느낌으로 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 가 되버림.
위의 옵셔널 체이닝 연산자의 쓸모와 마찬가지로 널 병합 연산자도 유용하게 쓰일 수 있을 것 같다.
'JavaScript' 카테고리의 다른 글
당신이 async await 을 사용할 때 자바스크립트는.. (1) 2023.10.14 그래서 Babel, Webpack 이 뭔데 ?? (0) 2023.03.13 JavaScript 의 Closure (클로저) 리뷰하기 (0) 2023.03.05 JavaScript 의 execution context (실행 컨텍스트) 리뷰하기 (0) 2023.03.04