JS/TS에서 부정확한 부울 평가의 함정 방지

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

문제의 맥락

초기 상황

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

초기 접근 방식과 한계

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

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

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

부울 평가 트랩

계시

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

기술적 설명

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

• 거짓
• 0
• ""(빈 문자열)
• 널
• 정의되지 않음
• NaN

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

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

수정된 접근 방식

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

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

이 접근 방식을 사용하면 비동기 변수가 단순히 '거짓' 값이 아닌 구체적으로 거짓이 되도록 보장합니다.

정밀도의 이점

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

1. 조건 평가의 모호성을 없애줍니다.
2. 이렇게 하면 코드의 가독성이 높아지고 의도가 더욱 명확해집니다.
3. '거짓' 값 평가와 관련된 예상치 못한 동작을 방지합니다.

결론

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

위 내용은 JS/TS에서 부정확한 부울 평가의 함정 방지의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!