자바스크립트 isNaN 함수 기능 정리

 

 

 

안녕하세요.

오늘은 자바스크립트의 기본 기능 중 isNaN() 함수에 대해서 특징과 사용 방법을 포스팅하려고 합니다. 자바스크립트로 개발을 하다 보면 데이터 타입을 분류하여 필터링 처리하는 경우가 종종 있습니다. 숫자인지, 문자인지, 아니면 다른 타입의 데이터인지... 그중에서 오늘은 숫자를 판별하는 isNaN()을 정리해 보려고 합니다!

 

그럼 어떤 차이가 있는지 하나씩 보도록 하겠습니다.

---

isNaN()

- 입력한 값이 숫자인지 아닌지 판별하는 함수
- NaN은 Not a Number 약어
- 함수 앞에 is가 붙으면 반환값은 true 또는 false
- 반환값이 true인 경우는 입력한 값이 숫자가 아닐때
- 반환값이 false인 경우는 입력한 값이 숫자일 때

---

1. 숫자로 판별하는 경우

isNaN('');
isNaN(true);
isNaN(false);
isNaN(null);
isNaN(Infinity);
isNaN([]);
isNaN(0);
isNaN('0');
isNaN(1 + 2);
isNaN(-12);
isNaN('1' + '2');
isNaN(new Date());

 

위의 예시를 보게 되면 생각보다 많은 요소가 숫자로 판별되고 있습니다. 그런데 생각보다 숫자가 아닌 값들도 많이 보이는 것 같습니다!

숫자인 값 : 0, '0', 1 + 2, -12, '1' + '2'
숫자가 아닌 값 : '', true, false, null, Infinity, [], new Date()

위의 분류된 내용처럼 숫자가 아닌 값들도 숫자로 인식을 하는 경우가 있습니다. 혹시나 판별해야 하는 값이 어떤 값들이 들어올 수 있는지도 알아두몬 좋을 것 같네요!

 

그럼 다음은 그 반대인 경우를 보도록 하겠습니다~

 

 

반응형

---

2. 문자로 판별하는 경우

isNaN();
isNaN(undefined);
isNaN({});
isNaN('abc');
isNaN('1 + 2');
isNaN(new Date().toString());

문자로 판별하는 경우는 상대적으로 많지 않습니다. 하지만 숫자로 판별하는 경우와 유사한 케이스가 몇 개 있습니다.

제일 먼저 아무것도 없는 공백 ('' 아님) 값은 문자로 인식을 합니다. 그리고 문자열로 된 연산도 문자로 판별이 되고, new Date() 또한 toString()을 붙여주면 문자열로 인식이 됩니다.

문자 판별 또한 일반 문자열이 아닌 케이스를 같이 알고 있다면 실제 로직에 isNaN() 함수를 써야 하는 경우에 유용할 것 같습니다.

 

---

마무리

오늘은 이렇게 자바스크립트의 isNaN() 함수에 대해 알아봤습니다. 기존에 잘 모르고 그냥 숫자를 판별하는 함수구나... 하면서 썼지만 이번 글을 정리하면서 어떤 값이 숫자로 인식되고 문자로 인식되는지 알게 되면서 판별 조건문을 쓸 때 조심해야 되겠다는 생각을 했습니다.

간단한 함수였지만 활용도가 많은 기능이었으며, 다음에도 유사하면서 실제 업무에 도움이 될만한 기능들로 포스팅하도록 하겠습니다. :)

 

 

그럼 오늘도 저의 작고 소중한 글을 읽어주셔서 감사합니다.

 

 

---