JavaScript Truthy와 Falsy: 심층 탐구

실용적인 예제로 JavaScript의 타입 강제를 이해하고 일반적인 함정을 피하세요

JavaScript에서 truthy와 falsy 값을 다루는 것은 종종 혼란을 주곤 했습니다. 물론 기본적인 것은 알고 있었죠 - false는 falsy이고, true는 truthy입니다. 하지만 엣지 케이스들? 그건 까다로웠습니다. 이제 이 기본적이지만 자주 오해받는 개념에 대해 배운 내용을 살펴봅시다.

여덟 가지 falsy 값

JavaScript에서는 정확히 여덟 가지의 falsy 값이 존재합니다. 이 외의 모든 값은 truthy로 간주됩니다. 아래는 그 목록입니다:

false       // 불리언 false
0           // 숫자 0
-0          // 음수 0
0n          // BigInt 0
""          // 빈 문자열
null        // 아무 값도 없음
undefined   // 초기화되지 않은 값
NaN         // 숫자가 아님

document.all은 독특한 사례입니다. JavaScript에서 역사적인 이유로 falsy로 간주되는 객체입니다. 이 레거시 DOM API는 오래된 Internet Explorer 버전에서 모든 요소에 접근하기 위해 사용되었습니다.

JavaScript의 Truthy와 Falsy 값 다루기가 처음에는 참 헷갈렸습니다. 기본적인 것은 알고 있었죠 - false는 falsy, true는 truthy라는 것 말이에요. 하지만 엣지 케이스? 정말 까다로웠습니다. 이 기본적이지만 종종 오해되는 개념에 대해 제가 배운 것을 함께 살펴봅시다.

### 8개의 Falsy 값
JavaScript에서 정확히 8개의 falsy 값이 있습니다. 그 외의 모든 값은 truthy입니다. 아래는 그 목록입니다:

```javascript
false       // boolean false
0           // 숫자 0
-0          // 음수 0
0n          // BigInt 0
""          // 빈 문자열
null        // 값의 부재
undefined   // 초기화되지 않은 값
NaN         // 숫자가 아님

이 글에서 JavaScript의 truthy와 falsy 값에 대해 다루고 있지만, 개발 워크플로우를 향상시킬 수 있는 도구를 고려하는 것도 중요합니다.

Apidog는 API 설계, 디버깅, 테스트 및 문서화를 간소화하기 위해 설계된 통합 플랫폼입니다.
Apidog를 도구 세트에 통합하면 API 개발 프로세스의 효율성과 신뢰성을 향상시킬 수 있습니다.

Apidog는 이러한 모범 사례와 일치하는 다양한 기능을 제공하여 테스트 프로세스를 향상시킵니다:

설계: Apidog의 강력한 비주얼 편집기를 사용하여 JSON Schema를 지원하며 정확한 API 설명을 설계할 수 있습니다.

디버그: API 설계 중 다양한 HTTP 요청을 전송하여 기능을 확인하고 실시간 응답 검증을 수행합니다.
테스트: API 사양에서 생성된 테스트, 비주얼 어설션, CI/CD 파이프라인 통합을 통해 API 테스트를 자동화합니다.

문서화: 맞춤 도메인에 게시하거나 팀과 안전하게 공유할 수 있는 종합적인 API 문서를 손쉽게 생성하고 유지 관리합니다.
모킹(Mock): 백엔드 개발 이전에도 테스트를 원활하게 진행할 수 있도록 API 응답을 시뮬레이션하는 모킹 서버를 만듭니다.
Apidog를 워크플로우에 통합하면 협업을 강화하고 테스트 프로세스를 간소화하며 소프트웨어 제품의 전반적인 품질을 향상시킬 수 있습니다.

이제 Apidog가 API 개발 워크플로우를 향상시키는 역할에 대해 논의했으니, JavaScript의 truthy와 falsy 값에 대해 더 깊이 탐구하여 효과적인 코딩 실습에 대한 이해를 강화해 봅시다.

### document.all의 독특한 경우
`document.all`은 JavaScript에서 falsy로 취급되는 객체입니다. 이는 역사적 이유로 JavaScript에서 여전히 지원되며, 과거 Internet Explorer에서 모든 요소에 접근하는 데 사용되었습니다.

---

### 정신을 혼란스럽게 만드는 엣지 케이스들
JavaScript의 타입 강제 변환은 정말 머리를 아프게 만드는 시나리오를 만들어냅니다.

```javascript
// 배열
[] == false     // true - 빈 배열은 truthy이지만 0으로 변환됨
[1,2] == true   // false - 비어있지 않은 배열은 truthy이지만 true와 같지 않음

빈 배열의 비교 [] == false는 true로 평가되지만, 실제로 빈 배열은 truthy입니다. 이는 JavaScript가 배열을 먼저 원시 값으로 변환하기 때문입니다. 빈 배열이 원시 값으로 변환되면 빈 문자열이 되고, 그 빈 문자열은 0으로 변환됩니다. 그래서 0 == false는 true가 됩니다.

비어있지 않은 배열 [1,2] == true도 비슷한 변환 과정을 거쳐 false로 평가됩니다. 배열 [1,2]는 원시 값으로 변환될 때 문자열 "1,2"가 되며, 이 문자열은 숫자로 변환되지 않아 NaN이 됩니다. 따라서 NaN == true는 false가 됩니다. 조건문에서 [1,2]는 truthy이지만, true와 같지는 않습니다.

---

실용적인 예제와 타입 강제 변환 피하기

타입 강제 변환은 코드에서 예기치 못한 버그를 유발할 수 있습니다. 아래는 제가 버그를 방지하기 위해 사용하는 패턴입니다:

// 명시적 불리언 변환 사용
function isUserLoggedIn(user) {
  if (!user) return false;
  return Boolean(user.loggedIn); // 명시적 변환
}

// nullish 병합 연산자를 활용한 안전한 구성
function getConfig(settings) {
  const config = {
    theme: settings?.theme ?? 'default',
    timeout: settings?.timeout ?? 5000,
    retries: settings?.retries ?? 3
  };
  return config;
}

이렇게 명시적으로 의도를 표현하면 타입 강제 변환으로 인한 혼란을 방지하고, 코드의 명확성과 안정성을 높일 수 있습니다.