[JavaScript] 0/0, NaN 처리하기

자바스크립트에서 숫자를 다루거나 연산을 하다보면 NaN 값을 가끔 마주할 때가 있습니다.

 

NaN은 not-a-number의 약자로 자바스크립트에서 '산술 연산 불가'의 값임을 표현할 때 사용됩니다.

우리가 자바스크립트를 사용하면서 NaN을 접하게 되는 상황들을 몇 가지 알아보면 다음과 같습니다.

// 문자열을 숫자로 변환할 수 없으므로 NaN을 반환한다
let x = 'Jiwon';
console.log(+x); // NaN

// undefined는 숫자로 타입 변환되지 않는다
+undefined; // NaN
1 + undefined; // NaN

0 / 0; // NaN

 

 

이렇게 NaN 값이 반환되었을 때 isNaN 함수를 사용하여 해결할 수 있으며 isNaN은 매개변수가 숫자인지 검사하는 함수입니다.

isNaN(value) // true or false

 

value가 number 타입으로 평가가 가능한 경우는 false, 그렇지 않은 경우에는 true를 반환하게 됩니다.

몇 가지 적용 예시를 살펴보면 아래와 같습니다.

let a = 10.0;
let b = '11.2';
let c = 'word';
let d = 2 * 3;
let e = '2 * 3';

isNaN(a); // false
isNaN(b); // false
isNaN(c); // true
isNaN(d); // false
isNaN(e); // true

 

 위에서 주의할 사항은 '11.2'처럼 number로 형변환이 가능한 경우에는 isNaN에 대하여 false를 반환한다는 것입니다. 이처럼 isNaN을 이용하여 조건을 분기하여 NaN에 대한 처리를 진행할 수 있습니다.

 

let num = 10;

return isNaN(10) ? 10 : num;

 

 포스팅의 제목에 0 / 0을 포함한 이유를 짧게 이야기하자면 1 / 0, 2 / 0 등은 Infinity를 return하게 됩니다. 오직 0을 0으로 나누는 경우에만 NaN을 반환하게 되는 것이지요.

 

 만일, Infinity를 반환하도록 의도하고 코드를 작성하고 싶다면 피연산자 둘이 0인지를 판단하여 처리하거나 최종 결과값으로 나온 NaN을 isNaN을 이용하여 처리할 수 있을 것입니다.

 

 이번 캡스톤 디자인에서 진행하는 DRM 서비스 구현 도중에 '관심 인구수' / '전체인구수' 를 광고 관심도로 제공하려고 할때 둘다 인구수가 0인 경우에 대해서 처리해두지 않아 NaN을 마주치게 되었습니다.

 

 

 추후, NaN에 대한 처리로 0.0%을 대신 제공하는 것으로 코드를 수정하였습니다.