JavaScript에서 false를 반환하는 값

JavaScript에서 false를 반환하는 value

이제 기록을 해놓지 않으면 자꾸 잊어먹네요. 오늘은 제가 인터페이스 구현할때 자주 헷갈리는 null string("") 처리에 대해서 기록을 남겨 정리를 하려고 합니다. 왜 매번 쓸때마다 다시 찾아보는지 큰일이네요…

false 로 변환되는 값은 다음과 같습니다.

  • null;
  • NaN;
  • 0;
  • empty string("");
  • undefined;

empty string을 어떻게 체크할 것인가?

그럼 이 중에서 empty string("", 또는 ‘’)을 어떻게 체크를 하면 될까요? 정답은 없지만, if 문에서 empty string은 false 처리가 된다는 것을 꼭 기억해 두고 개발을 해야 하겠습니다. (제게 하는 말입니다 -_-)

여러분이 구현하는 인터페이스(함수)에서 파라미터를 받아 내부 변수에 설정하고 싶은데, 이 파라미터는 외부에서 불리는 값이므로 예외처리를 꼭 해야한다고 가정합시다.

첫번째 방법 !

  const myValue = !myProp ? 'default string' : myProp; 

두번째 방법 == null

 const myValue = myProp == null ? 'default string' : myProp;

둘 사이의 차이점은?

넘어오는 myProp 값이 empty string(param='';) 이라면, 첫번째 방법은 ‘default string’ 이 myValue에 어사인 될것이고, 두번째 방법은 '' 이 어사인 될것입니다.

사용자가 의도적으로 empty string을 넣고 싶다면

만약 사용자가 어떤 경우에 의도적으로 empty string을 넣고 그 값을 사용하고 싶다면 반드시 == null 체크를 해야 합니다.
그러면, 제가 자주 접하는 react 컴포넌트를 예로 들어 보겠습니다. 그 컴포넌트의 prop에 빈 스트링을 넘겨 리셋하고 싶은 케이스가 있습니다.

<MyComponent myProp=""/>

이럴경우 제가 !로 구현을 하게 되면 myValue에 원하는 빈 스트링으로 리셋을 하는것이 아니라 'default string’이 들어가게 됩니다. == null 체크를 하게되면 제가 원하는 대로 동작할 것입니다. 만약 myProp을 넘기지 않는다면 undefiend 이므로 기본값을 설정할 것이고, empty string을 넘긴다면 그 값을 변수에 잘 설정할 것입니다.

물론 React에는 defaultProps 가 있는데 왜 저렇게 컴포넌트 내부에서 null 체크를 해서 default 값을 어사인 하냐고 질문할 수 있습니다. 그 부분까지 들어가게 되면 본 내용과 상관없는 너무 소소한 이야기로 빠지게 될 터이니, 그냥 어떠한 이유로 인하여 defaultProps를 사용하지 못하고 저렇게 밖에 구현할 수 없는 상황이었다 라고 가정해 봅시다. ^^;

결론

오늘은 짧게 false로 변환되는 JavaScript value에 대해서 알아보았습니다. 정답은 없습니다만, 동작을 잘 이해하고 원하는대로 구현하시기 바랍니다.
본 포스팅에서는 null string을 어떻게 처리할지에 대해 초점을 맞추고 이야기를 한 것입니다. 실제 인터페이스를 구현하면서 파라미터가 비어 있는지 체크할 때에는 데이터 타입, null, undefined, space 처리 등 필요에 따라 훨씬 촘촘하게 체크를 해야할 수도 있습니다.

참고 링크

이 블로그의 인기 게시물

Enact 프레임워크를 오픈합니다.

Hello Enact #2 - CSS 추가하기

Hello Enact #1 - 기본