The Double-Bang (!!) Operator And A Misunderstanding Of How JavaScript Handles Truthy / Falsy Values

대부분의 컴퓨터 언어와 프레임워크들은 이렇게 일주일 단위로 나오는 뉴스들을 무료로 구독할 수 있다. 그 중 흥미있는 글이 있어 간편하게 번역해보려고 한다.

!!operator과 JS에서 참과 거짓 값을 다루는 법에 대한 잘못된 이해에 대해

!!

!! => double-bang / double-not operator라고 한다.

JS에서의 !!는 참과 거짓값을 돌려줄 수도 있다. 이 글을 작성하게 된 계기는 많은 개발자들이 목적없이 !!를 사용하는 것을 보았고 이것은 JS의 참/거짓값을 다루는 법에 대한 잘못된 이해에서 비롯된 것이라 생각해서 이다.

가장 자주 오용되는 곳은 if/ else if/ while구문이다.

잘못 사용된 예제 : 
if(!! this.props.onKeypress){
  this.props.onKeypress(this.getElementContents(target));
}
=> 이미 참과 거짓값을 확인하는 구문 안에 있는 if문이므로 !!사용할 필요가 
없다.

-------------- 또 다른 예제

if(!!color && (color.length>0)){
  //...
}
=> empty string 자체가 거짓값이기도 하고 if구문 자체가 참과 거짓의 상황을 
내제하고 있는 것이므로 아래와 같이 간편하게 표현하면 된다.
if(color){//...} 

if구문 자체가 참과 거짓값을 다루고 있으므로 이중으로 줄 필요는 없다.

삼항연산자 (Ternary Expressions)

삼항연산자는 if/else구문을 쉽게 표현한 것이므로 if구문과 같이 이중사용을 지양하도록 한다.

잘못 사용된 예제 :
var label = ( !! attributes.buttonLabel ? attributes.buttonLabel : $button.text() );

첫 번째 부분이 이미 if구문이며 그 자체로 참의 의미를 가지고 있고 이것이 
empty일 경우 그 자체로 거짓의 값을 가지고 있다. 그러므로 아래와 같이 
간편하게 표현할 수 있다.
var label = ( attributes.buttonLabel || $button.text() );

---------------- 또 다른 예제

var imageUrl = ( !! user.avatarUrl )
	? user.avatarUrl
	: ( "/avatars/" + user.avatarID )
;

.avataUrl 자체가 null 또는 empty string이므로 이미 거짓값이다. 
var imageUrl = ( user.avatarUrl || ( "/avatars/" + user.avatarID ) );

React에서 값이 있을 때만 render되게 하기위해 많이 볼 수 있는 예제

{ !! this.props.isShareable ? <ShareButton /> : null }

이렇게 간편하게 표현하기!
=> { this.props.isShareable && <ShareButton /> }

배열을 필터링할 때

filter() 자체가 참과 거짓값을 기대하는 함수이므로 (항상 그렇지만은 않지만) 참의 값을 따로 돌려줄 필요가 없다.

Numbers, Strings와 같은 것은 JS에서 이미 참과 거짓의 값을 내제하고 있기에 반복할 필요가 없다.

이와 같이 잘못 사용되기 쉬운 함수는 find(), every(), some()이 있다.

그럼 언제 사용해야 할까?

엄격하게 Boolean값이 필요로 할 때 또는 어떤 값을 scope 밖으로 꺼내는데 해당 값이 엄격한 Boolean 값을 가지는지 잘 모르겠을 때 (이 모르겠다는 부분이 중요하다. 만약에 context와 calling context를 알 경우 역시 사용을 지양한다.)

변수의 이름을 isXYZ, hasXYZ, canXYZ와 같이 썼다면 이름 자체가 표현하고 있듯 이는 당연히 Boolean값을 가지는 것으로 봐야 한다. 이와 같은 변수명을 사용하고 참의 값을 배정한다면 예상치 못한 runtime 활동을 발생시킬 수도 있다.

이 글은 !!의 사용을 하지 말라는 것이 아니라 불필요한 곳에서의 사용을 줄여 좀 더 알기 쉬운 코드를 작성하자는 것에 있다.

이후 검색해볼 것들

safe navigation : undefined상황을 없애는 처리하는거인듯