[JS TIL] || 과 ?? 로 falsy 값 다루기
null 병합 연산자와 논리 OR 연산자로 falsy 들을 다루어보자
falsy 한 값들이란, 참거짓의 맥락에서 거짓값을 갖는 값들이다. 자바스크립트 문법은 특이하게도, 특정한 값이 본래의 타입과 꼭 들어맞지 않는 맥락에 들어가더라도 타입오류를 내지 않고 그 맥락에 맞추어 타입을 변환시킬 수 있도록 융통성있게 되어있다. (처음 자바스크립트를 배울 때는 이 특징이 편하고 좋았으나, 요즘 자동 타입 변환에 발목을 잡히는 경우가 종종 발생하고 있다 ... )
Boolean 타입에 해당하는 값도 본래는 true 와 false 두가지밖에 없지만, if 나 while 의 조건문 자리에 어떠한 값을 집어넣더라도 런타임에서 오류는 발생하지 않는다. 대신에 조건문 안의 값들이 true 혹은 false 로 타입 변환되어 동작한다. 이중 false 를 포함하여 Boolean 환경에서 false 타입으로 간주되는 8종류의 값들을 묶어서 falsy 한 값들이라고 칭하는데, 엄밀히 거짓은 아니지만 거짓같은 값, 거짓으로 치환되는 값이라고 볼 수 있다.
https://developer.mozilla.org/ko/docs/Glossary/Falsy논리 OR 연산자(||)로 falsy한 값 예외처리하기
a || b
자바스크립트를 처음 배운 이후부터 지금까지, 값이 없을 수도 있는 경우 삼항연산자나 논리연산자를 사용해왔었다.
사용자의 닉네임 = '사용자데이터에서 읽어온 닉네임' 또는 null
이렇게 핸들링하고 닉네임값을 들고 다니는 것이 자명해보였다. 하지만, 닉네임의 예외조건을 처리하기 위한 목적을 위해서는 이 방법은 빈틈이 있다. 사용자가 falsy 한 값을 닉네임으로 쓴다면 사용자는 분명 닉네임을 입력했음에도, 닉네임이 빈값(null)으로 변경되는 것이다. 물론 falsy한 8개의 값들 중 닉네임으로 쓸만한 값은 사실상 없다고 봐야 한다. 하지만 필드가 닉네임이 아니라 '지난주 월요일부터 일요일까지 운동을 한 횟수'라면 어떻게 될까? 그러면 값에 0이 들어갈 확률이 꽤 높아진다.
그렇기 때문에 논리 OR 연산자는, 왼쪽값과 오른값쪽 값중 선택이 되어야 하는 상황에서가 아니라 왼쪽값과 오른쪽값중 참이 있는지 판단하는 상황에서만 쓰여야 명확하다.
https://gist.github.com/yeonwooz/29ffffc0ccf17ffcd45a02bb3fab0a6d
null 병합 연산자(??)로 falsy한 값 예외처리하기
a ?? b
최근에 습득한 문법 중 null 병합 연산자는 null 이나 undefined 일 수도 있는 값에 선택적으로 대응해야 하는 위와 같은 상황에서 쓰기에 알맞은 연산자이다. null 과 undefined 를 제외한 나머지 falsy 한 값들에 대해서는 일관된 결과가 도출되고, 좌우에 상관없이 null과 undefined가 되는 값의 반대 항을 리턴해주어 유용하다.
https://gist.github.com/yeonwooz/e424c4790515480b529bc0bf332dbab2
Photo by Ben Hershey on Unsplash
참고링크
null 병합 연산자 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator
논리 OR 연산자 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_OR
Falsy 한 값들 : https://developer.mozilla.org/ko/docs/Glossary/Falsy
스택오버플로우 : https://stackoverflow.com/questions/61480993/when-should-i-use-nullish-coalescing-vs-logical-or
