JavaScript에서 값이 숫자인지 확인하는 방법 (typeof 연산자 완벽 정리)

JavaScript로 개발하다 보면 어떤 값이 숫자인지, 아니면 다른 자료형인지 확인해야 하는 상황이 자주 발생합니다. 이를 확인하는 방법은 여러 가지가 있지만, 가장 일반적이고 널리 사용되는 방법은 typeof 연산자를 활용하는 것입니다.

typeof 연산자 기본 사용법

typeof는 피연산자의 자료형(data type)을 문자열 형태로 반환하는 연산자입니다. 숫자 값에 사용하면 "number"라는 결과를 얻을 수 있습니다.

const value = 5

console.log(typeof value)
// "number"

실전 활용: 폼 입력값 검증하기

실무에서는 typeof를 조건문(if 문)과 함께 사용하여 사용자가 폼(form)에 올바른 값을 입력했는지 검증할 수 있습니다. 예를 들어, 입력값의 자료형이 숫자(number)가 아닌 경우 콘솔에 경고 메시지를 출력하는 코드는 다음과 같습니다.

const inputFieldAge = "10"
if (typeof inputFieldAge !== 'number') {
  console.log('This field has to be a number')
}

코드 동작 원리

위 예제에서 inputFieldAge 변수에는 값 10이 아닌, 큰따옴표로 감싸인 문자열(string) "10"이 할당되어 있습니다. 따라서 typeof inputFieldAge는 "string"을 반환하고, !== 'number' 조건이 참(true)이 되어 콘솔에 메시지가 출력됩니다.

반대로 const inputFieldAge = 10처럼 따옴표 없이 숫자 값을 할당했다면 조건식은 거짓(false)이 되어 메시지가 출력되지 않습니다. 이처럼 따옴표 하나의 차이가 자료형을 완전히 바꿀 수 있으므로 주의해야 합니다.

추가 팁: NaN 처리에 유의하기

typeof만으로는 모든 경우를 완벽하게 판별할 수 없다는 점도 알아두면 좋습니다. 대표적인 예외가 NaN(Not a Number)인데, 의미상 숫자가 아니지만 JavaScript에서는 typeof NaN의 결과가 "number"로 반환됩니다. 따라서 더 엄격한 숫자 검증이 필요하다면 Number.isNaN()이나 Number.isFinite() 같은 메서드를 함께 활용하는 것이 좋습니다.