웹 개발의 세계에서 우리는 언뜻 보기에는 단순해 보이지만 빠르게 복잡한 퍼즐로 변할 수 있는 문제에 자주 직면합니다. 최근에 저는 Angular 프로젝트에서 TypeScript에서 부울 조건을 평가할 때 정밀도의 중요성을 상기시키는 흥미로운 경험을 했습니다. 저는 이 교훈을 여러분과 공유하고 싶습니다. 이 교훈이 여러분도 같은 함정을 피하는 데 도움이 되기를 바랍니다.

문제의 맥락

초기 상황

내 Angular 프로젝트에서 네 개의 부울 변수와 관련된 조건에 직면했습니다. 이 4개 중 2개는 Observable을 통해 백엔드에서 들어오는 비동기 데이터에 의존했습니다. 목표는 간단했습니다. 이 두 특정 변수가 거짓인 경우에만 조건이 참이어야 합니다.

초기 접근 방식과 한계

처음에는 논리적이고 간결해 보이는 접근 방식을 선택했습니다.

if (terrainPret && arbitreArrive && 
    !equipeLocaleAbsente && !equipeVisiteuseAbsente) {
  // Commencer le match
}

이 접근 방식은 우아해 보였습니다. 느낌표(!)를 사용하는 것은 비동기 변수가 false임을 확인하는 것이었습니다. 하지만 이 방법에는 미묘한 함정이 숨어 있다는 것을 금방 알아차렸습니다.

부울 평가 트랩

계시

내 코드가 예상대로 작동하지 않는다는 것을 깨달았을 때 문제가 나타났습니다. 추가 조사 끝에 TypeScript에서 부울 평가의 중요한 측면을 간과했다는 사실을 깨달았습니다.

기술적 설명

TypeScript에서는 여러 값이 "falsy"로 간주됩니다. 즉, 부울 컨텍스트에서 false로 평가됩니다. 이러한 값에는 다음이 포함됩니다.

• 거짓
• 0
• ""(빈 문자열)
• 없는
• 한정되지 않은
• 아니요

제 경우에는 백엔드에서 값을 받기 전에 비동기 변수가 정의되지 않았을 수 있습니다. 결과적으로, 예를 들어 !equipeLocaleAbsente 조건은 변수가 false인 경우뿐만 아니라 정의되지 않은 경우에도 true였습니다.

해결책: 명시적이어야 합니다.

수정된 접근 방식

이 문제를 해결하려면 내 상태를 좀 더 명확하게 설명해야 했습니다.

if (terrainPret && arbitreArrive && 
    equipeLocaleAbsente === false && equipeVisiteuseAbsente === false) {
  // Commencer le match
}

이 접근 방식은 비동기 변수가 단순히 '거짓' 값이 아니라 구체적으로 거짓임을 보장합니다.

정밀도의 이점

이 솔루션에는 여러 가지 장점이 있습니다.

1. 조건 평가의 모호성을 제거합니다.
2. 코드의 의도를 더 읽기 쉽고 명확하게 만듭니다.
3. "거짓" 값 평가와 관련된 예기치 않은 동작을 방지합니다.

결론

이 경험을 통해 특히 비동기 작업 및 부울 평가 작업을 할 때 코드의 정확성과 명확성이 얼마나 중요한지 상기하게 되었습니다. 또한 우리가 사용하는 언어의 뉘앙스를 이해해야 한다는 점을 강조합니다.