Frontend

Number.isFinite vs isFinite 차이점과 올바른 사용법 가이드

# JavaScript # TypeScript # NumberMethods # FrontendDevelopment # WebDev
Comparison between Number.isFinite and Global isFinite in JavaScript

자바스크립트에서 숫자를 다룰 때 가장 당혹스러운 순간은 언제일까요? 아마도 NaN, Infinity, 그리고 예상치 못한 **암묵적 형변환(Implicit Coercion)**이 발생하는 시점일 것입니다. 특히 숫자가 유효한 범위 내에 있는지 확인하는 isFinite 계열의 메서드들은 비슷해 보이지만, 동작 방식은 완전히 다릅니다.

오늘은 현대적인 자바스크립트(ES6+) 개발에서 필수적으로 이해해야 할 Number.isFinite와 전역 isFinite의 차이점, 그리고 짝꿍인 isNaN에 대해 깊게 파헤쳐 보겠습니다.

목차

  1. 전역 isFinite와 Number.isFinite의 핵심 차이
  2. 왜 Number.isFinite를 사용해야 할까?
  3. 번외: isNaN vs Number.isNaN의 평행이론
  4. 실무 트러블슈팅: 데이터 검증 시 주의사항
  5. 자주 묻는 질문(FAQ)

전역 isFinite와 Number.isFinite의 핵심 차이

가장 큰 차이점은 **‘인자를 숫자로 변환하느냐 아니냐’**에 있습니다.

1. 전역 isFinite() (window.isFinite)

전역 함수인 isFinite()는 전달받은 값이 숫자가 아니라면 우선 숫자로 강제 형변환을 시도합니다. 이 과정에서 예상치 못한 결과가 발생하곤 하죠.

// 전역 isFinite 예시
console.log(isFinite("25"));    // true (문자열 "25"를 숫자 25로 변환)
console.log(isFinite(""));      // true (빈 문자열은 0으로 변환됨!)
console.log(isFinite(null));    // true (null은 0으로 변환됨!)
console.log(isFinite(undefined)); // false (NaN으로 변환됨)

2. Number.isFinite()

ES6에서 도입된 Number.isFinite()는 훨씬 엄격합니다. 전달된 인자의 타입이 Number가 아니면 무조건 false를 반환합니다. 즉, 형변환을 수행하지 않습니다.

// Number.isFinite 예시
console.log(Number.isFinite("25"));    // false (타입이 String이므로 즉시 탈락)
console.log(Number.isFinite(null));    // false
console.log(Number.isFinite(25));      // true

왜 Number.isFinite를 사용해야 할까?

프론트엔드 개발자로서 우리는 서버로부터 받은 JSON 데이터나 사용자의 입력값을 검증해야 합니다. 이때 전역 isFinite를 사용하면 데이터 타입 오염을 잡아내기 어렵습니다.

예를 들어, 수량(Quantity)을 체크하는 로직에서 null 값이 들어왔을 때 전역 함수는 이를 유효한 숫자(0)로 판단하여 버그를 유발할 수 있습니다. 반면 Number.isFinite는 타입이 Number인지까지 함께 체크하므로 방어적 프로그래밍에 훨씬 유리합니다.

번외: isNaN vs Number.isNaN의 평행이론

이 관계는 isNaN에도 똑같이 적용됩니다. 자바스크립트의 고전적인 숙제 같은 부분이죠.

  • 전역 isNaN(): 인자를 숫자로 변환했을 때 NaN이면 true를 반환합니다. 따라서 isNaN("Hello")는 true가 됩니다. (“Hello”는 숫자가 아니니까요.)
  • Number.isNaN(): 인자의 타입이 Number이면서 동시에 값이 NaN일 때만 true를 반환합니다.
// 엄격한 비교의 중요성
const myValue: any = "Not a Number";

if (isNaN(myValue)) {
  console.log("전역 isNaN은 참입니다."); // 출력됨
}

if (Number.isNaN(myValue)) {
  console.log("Number.isNaN은 참입니다."); // 출력되지 않음 (타입이 String이므로)
}

실무 트러블슈팅: 데이터 검증 시 주의사항

⚠️ 개발자의 팁: 입력값 검증 패턴

사용자가 입력한 input 값은 기본적으로 string 타입입니다. Number.isFinite를 사용하기 전에 Number()나 parseFloat()로 명시적 변환을 거친 후 검증하는 것이 가장 안전합니다.

const userInput = "123.45";
const parsed = Number(userInput);

if (Number.isFinite(parsed)) {
  // 비로소 안전하게 숫자로 사용 가능
}

현대적인 프레임워크(React, Vue 등)와 TypeScript 환경에서는 타입 가드(Type Guard)의 역할이 중요합니다. Number.isFinite는 그 자체로 훌륭한 타입 가드 역할을 수행하므로, 가급적 전역 함수 대신 Number 객체의 정적 메서드를 사용하시길 강력히 권장합니다.

자주 묻는 질문(FAQ)

Q. 왜 구형 브라우저 호환성을 고려해야 하나요? Number.isFinite는 ES6 사양이므로 IE11 같은 구형 브라우저에서는 지원되지 않습니다. 하지만 현재 대부분의 프로젝트는 Babel이나 SWC 같은 트랜스파일러를 사용하므로 안심하고 사용하셔도 됩니다.

Q. Infinity 값은 어떻게 처리되나요? 두 메서드 모두 Infinity와 -Infinity에 대해서는 false를 반환합니다. ‘유한한’ 수인지만 체크하기 때문입니다.

Q. 성능 차이가 있나요? 실무적인 수준에서 성능 차이는 미미합니다. 성능보다는 코드의 의도를 명확히 하고 버그를 방지하는 ‘가독성’과 ‘안정성’ 관점에서 선택해야 합니다.

더 자세한 사양은 MDN Web Docs: Number.isFinite()에서 확인하실 수 있습니다.

이 글이 마음에 드셨나요?

로딩 중...

관련 글

댓글

댓글을 불러오는 중...