[JS] 55. Number 타입의 부가적인 내용 (conversion, parsing, checking)

안녕하세요. 박기린 입니다.

이번에는 JS의 Number type의 부가적인 내용을 설명하겠습니다.

 

 

Number의 동등 연산자

console.log(23 === 23.0); // true

JS에서 Number은 부동 소수점 숫자로 이루어집니다. 그래서 정수와 소수 모두를 Number라는 하나의 type으로 관리합니다.

 

 

 

console.log(0.1 + 0.2); // 0.30000000000000004 <- 무한 소수
console.log(0.1 + 0.2 === 0.3) //false

JS는 컴퓨팅 언어답게 2진법을 사용합니다. 이는 분수 표현에 취약하다는 문제가 있습니다.

 

 

실행결과물

10진법에서 10을 3으로 나누면 '3.33333333...' 인 것처럼, 2진법에서도 특정 소수에 대해 무한 소수인 경우가 발생합니다.

그리고 그 무한소수인 상태로 덧셈이 진행되면, 위처럼 이상한 결과가 나옵니다.

 

 

 

 

실행결과물

해결방법으로는 toFixed(), Math.round(), 외부 라이브러리를 이용하는 것이 있습니다.

 

 

 

실행결과물

물론 0.1 + 0.3처럼 정확히 맞아 떨어지는 경우도 있습니다. 아무튼, 이러한 문제점 때문에 생각치도 못한 오류가 발생할 수 있으니 유의하도록 합시다.

 

 

---

Conversion

console.log(Number('23')); // 23
console.log(+'23'); // 23 <- Number

Number() 생성자함수, '+' 연산자를 이용해서 String type의 숫자를 Number type으로 변환할 수 있습니다.

 

+) 참고하면 좋은 자료 - type conversion과 coercion : https://arnopark.tistory.com/477

 

 

 

 

---

Parsing

console.log(Number.parseInt('30px')); // 30 <- 숫자로 시작하는 문자열에서 숫자를 추출해낸다. (Number로 반환)
console.log(Number.parseInt('e23')); // NaN <- 숫자로 시작하지 않아서 NaN이 return

console.log(Number.parseFloat('2.5rem')); // 2.5
console.log(Number.parseInt('2.5rem')); // 2

Nuber.parseInt(' 추출하고자 하는 정수가 있는 String ');
Nuber.parseFloat(' 추출하고자 하는 실수가 있는 String ');

*단, 추출하고자 하는 숫자가 String의 맨 처음에 등장해야 합니다.

String에서 불필요한 기호를 제거하고 쉽게 숫자만 추출하기에 유용한 함수입니다.

 

 

실행결과물

 

 

 

---

Checking - Number.isFinite()

console.log(Number.isFinite(20)); // true
console.log(Number.isFinite('20')); // false <- Stirng도 Number가 아니기 때문에 false를 반환
console.log(Number.isFinite(+'20X')); // false <- NaN은 당연히 false

Number.isFinite( Infinity인지 검사하고 싶은 Number );

Number.isFinite()는 해당 Number가 Infinity인지를 검사해주는 함수입니다.

Infinity일 경우 또는 Number 타입이 아닐 경우 false, 그 외에는 true를 반환합니다.

 

실행결과물

 

 

 

Infinity란?

console.log(23 / 0); // Infinity
console.log(Number.isFinite(23 / 0)); // false

'정수를 0으로 나눈 수'처럼, 값이 무한대로 수렴하는 값을 Infinity로 취급합니다.

 

 

실행결과물

 

 

 

---

Checking - Number.isNaN()

console.log(Number.isNaN(20)); // false
console.log(Numbmer.isNaN('20')); // false - 자동으로 type 변환을 해줍니다.

console.log(Number.isNaN(+'20px')); // true
console.log(Number.isNaN(23 / 0)); // false <- infinity도 NaN은 아니다.

Number.isNaN( NaN인지 검사하고 싶은 Number );

Number.isNaN()는 해당 Number가 NaN인지를 검사해주는 함수입니다.

Number type일 경우 또는 type 변환 후 정상적인 Number 값이 되는 경우 false, 그 외에는 true를 반환합니다.

 

 

실행결과물

 

 

NaN이란?

NaN은  Not a Number의 줄임말입니다.

위처럼 Number type이 될 수 없음에도 강제로 Number type 변환을 해버린 값은, Number 타입이긴 하지만 Number가 아닌 값이라는 의미로 NaN(Not a Number)라고 부릅니다.

 

 

 

실제로 type이 Number로 인식됩니다.