빈 배열은 Truthy일까 Falsy일까

바보 이슈를 통한 TIL

프로젝트를 하다가 배열이 비어 있을 때 삼항연산자를 쓰고 싶었던 적이 있다

투두리스트로 예를 들면

todos 배열에 입력한 todo가 없어

<div>투두가 아직 없습니다</div>

라는 메시지를 사용자에게 보여주고 싶을 때

<div>
  {todos ? (
    todos.map((todo) => {
      return (
        <div key={todo.id}>
          <div>{todo.title}</div>
          <div>{todo.content}</div>
        </div>
      );
    })
  ) : (
    <div>투두가 아직 없습니다</div>
  )}
</div>

이렇게 코드를 작성했더니 빈 화면만 보인다....

빈 화면만 보이게 된 이유는 빈 배열이 truthy한 값이기 때문이다!

console.log([] ? "true" : "false"); // true

"" (빈 문자열), 0, -0 이 falsy여서 당연히 빈 배열도 falsy라고 착각했던 바보 이슈였다...

truthy와 falsy

truthy	falsy
true	false
{}, []	null, undefined, NaN
42	0
-42	-0
12n	0n
"0"	""
new Date()
Infinity
-Infinity