[JavaScript] Number 메서드

Lily·2022년 3월 6일

JavaScript preWecode

preWecode

목록 보기

5/9

Number 메서드

Number.toString()

Number.parseInt()

Number.isNaN()

Number.toString(radix)

수(number)를 문자열(string)로 반환한다
전달받은 인자에 해당하는 진법으로 값을 변환 ▶️ 그 값을 문자열로 반환

let num = 10;
num.toString(); // string, '10'
num.toString(2); // string, '1010', 2진수
num.toString(8); // string, '12', , 8진수
num.toString(16); // string, 'a', ' 16진수

Number.parseInt(string)

문자열을 파싱하여, 문자열에 포함된 숫자 부분을 정수 형태로 반환한다.

//12
Number.parseInt("12"); 
Number.parseInt(" 12"); //첫 문자에 있는 공백은 무시한다.
Number.parseInt("12.34"); //string의 진수를 나타내는 2부터 36까지의 정수입니다.
Number.parseInt("12문자열");
Number.parseInt("12 34"); // 문자열에 숫자가 여러 개 존재하면 첫 번째 숫자만 반환


// NaN
Number.parseInt("문자열 56")); // 첫 문자를 숫자로 변환할 수 없는 경우

참고

이 메서드는 전역 함수인 parseInt() 함수와 완전히 같은 동작을 수행한다.

Number.parseInt === parseInt; // true

Number.isNaN(value)

전달된 값(value)이 NaN(Not a Number)인지 아닌지를 검사하는 메서드
오직 숫자인 값에서만 동작한다
전달된 값이 NaN이면 true, 아니면 false.
즉, 숫자가 아니면 true, 숫자이면 false.

필요성

NaN이 NaN인지 계산할 때, 두 동일 연산자 ==과 === 모두 false로 평가되므로 값의 NaN 여부를 알아내려면 Number.isNaN()이 필요하다.

//true
Number.isNaN(NaN);        
Number.isNaN(Number.NaN); 
Number.isNaN(0 / 0)       

//false
Number.isNaN("NaN");     
Number.isNaN(undefined); 
Number.isNaN(true);
Number.isNaN(null);
Number.isNaN(37);
Number.isNaN("37");
Number.isNaN("37.37");
Number.isNaN("");
Number.isNaN(" ");

✨ isNaN()과 Number.isNaN()의 차이점

둘은 비슷해 보이지만 isNaN()은 전역함수, Number.isNaN()은 데이터타입 Number의 메서드이다. 공통점은 주어진 값이 숫자인지 아닌지를 검사한다는 것이다.

isNaN() 함수

가장 큰 문제점은 string을 자기 멋대로 number로 변환하여 검사를 실시한다는 것이다. 따라서 number를 검사하는 함수이지만 strign에 검사를 했을 때 숫자가 아니기 때문에 true가 나와야 하는데 이미 숫자로 변환되어서 string에도 사용가능하다는 차이점이 있다. 따라서 예상치못한 문제점을 야기할 수 있다.

//ture
isNaN(NaN);       
isNaN(undefined); 
isNaN({});
isNaN("123ABC");

//false
isNaN(true);      // true는 숫자 1로 변환된다.     
isNaN(null);      // null은 숫자 0으로 변환된다.
isNaN(37);
isNaN("37");      // "37"은 NaN이 아닌 숫자 37로 변환된다.
isNaN("");        // 빈 문자열은 NaN이 아닌 0으로 변환된다
isNaN(" ");       // 공백이 있는 문자열은 NaN이 아닌 0으로 변환된다.

Number.isNaN() 메서드

isNaN() 함수의 의 더 엄격한 버전으로 ECMAScript 2015에서 추가되었다.
isNaN() 함수의 문제점인 문자열을 강제로 숫자로 변환하는 문제를 겪지 않는다.
데이터타입이 number형이면서 그 값이 NaN인 value만 true를 반환한다.
👉 즉, 두 조건이 모두 만족해야한다. (데이터타입이 number && 값이 NaN)

아래 예를 보면,

// true : string 또한 검사가 가능하기 때문에 NaN이므로 true이다.
isNaN("Hello")); 

//false : string은 검사 대상이 아니기 때문에 NaN임에도 불구하고 false이다. 
Number.isNaN("Hello"));

"Hello"라는 값은 숫자가 아니기 때문에 true 아닌가?라고 생각할 수 있다.(사실 내가 그렇게 생각했다) 그러나 앞서 말했듯이 함수가 문자열도 숫자로 변환하여 검사한다는 문제점을 보완하기 위해 더 엄격한 버전으로 나온 것이기 때문에 오직 '숫자형(Number)'에서만 검사를 실행한다. "Hello"는 데이터타입이 string이기 때문에 애초에 검사 대상에서 제외돼서 false가 나오는 것이다.

결론: isNaN() 함수는 강제로 숫자로 변환하여 혼란을 야기할 위험이 있다. 따라서 요즘은 정확성 면에서 Number.isNaN()을 선호하는 것 같다.

출처: https://opentutorials.org/course/50/135
http://www.tcpschool.com/javascript/js_standard_numberMethod
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Number/isNaN
https://velog.io/@jykim/%EC%9B%90%EC%8B%9C%EA%B0%92%EC%9D%98-%EB%A9%94%EC%84%9C%EB%93%9C