<자바스크립트> 숫자형 자료

 

 이번 장에서는 자바스크립트에서 다루는 일반적인 숫자형 자료에 대해서 공부해보자.

 

* toString

 - toString 메서드는 숫자를 원하는 진법으로 변환한다.

 

let num = 21;

console.log(num.toString(16)); // 15
console.log(num.toString(2)); // 10101

console.log(21..toString(36)); // 1

 

 - 위는 21이라는 숫자를 각 16진법과 2진법으로 나타낸 것이다. 

 

 - 숫자에 직접 toString을 사용하려면 소수부로 인식되지않도록 두 개의 점을 사용해야한다.

 

* 수학 함수

 - 자바스크립트 내장 객체인 Math에는 유용한 수학관련 함수들이 많다. 그 중 먼저 어림수를 구하는 함수들을 알아보자.

 

 - Math.floor : 소수점 첫째 자리에서 버린다. (ex. 3.7 => 3, -2.2 => -3)

 - Math.ceil : 소수점 첫째 자리에서 올린다. (ex.  1.1 => 2)

 - Math.round : 소수점 첫째 자리에서 반올림한다. (ex. 2.5 => 3)

 - Math.trunc : 소수점 이하를 무시한다. (ex. 3.7 => 3, -2.2 => -2)

 

 - 만약 소수점 n 번째까지의 어림수를 구하려면 어떻게 해야할까. 이 때는 어림수를 문자형으로 반환해주는 toFixed(n) 메서드를 사용한다.

 

let num = 2.345;
consol.log(num.toFixed(2));
// 2.35

 

 - toFixed는 문자형으로 반환하기 때문에 숫자형이 필요하다면 앞에 + 연산자를 붙이는 등의 작업으로 숫자형으로 변경해야한다.

 

 - toFixed는 정밀도손실을 해결할 때에도 사용할 수 있다. 

 

let sum = 0.1 + 0.2;
console.log(sum == 0.3) // false

console.log(+sum.toFixed(1) == 0.3) // true

 

 - 위와 같이 0.1 + 0.2 는 0.3과 다르다고 출력하는 문제를 toFixed로 해결할 수 있다. 정밀도 손실은 10진법을 2진법으로 나타내면서 생기는 문제이다. 10진법에서 10의 거듭제곱이 아닌 3과 같은 수로 나누면 무한소수가 생기듯이 2진법에서도 2의 거듭제곱이 아닌 수로 나누면 비슷한 문제가 발생한다.

 

 - 위에서 toFixed안에 3이나 5를 넣어도 숫자형으로 바꾸었으므로 0.3이되어 true를 동일하게 출력한다.

 

 - Math.random()은 0과 1사이의 난수를 반환한다. 참고로 1은 제외한다. 10을 곱함으로써 0과 10사이를 나타내는 등 다양하게 활용할 수 있다.

 

 - Math.max(a, b, c)는 여러 개의 인수 중 최대 값을 반환한다.

 

 - Math.min(a, b, c)는 여러 개의 인수 중 최소 값을 반환한다.

 

 - Math.pow(n, power) 은 n을 power번 제곱한 값을 반환한다.

 

* isNaN과 isFinite

 - Infinity와 -Infinity는 무한대를 나타내는 특수 숫자 값이고, NaN은 에러를 나타내는 값이다.

 

 - 위 특수 숫자를 일반적인 숫자들과 구분하기 위해 존재하는 함수가 있다.

 

 - isNaN(value) : 숫자형으로 바꾼 값이 NaN이면 true를 반환한다. 참고로 NaN과 단순히 비교하면 되지 않을까라고 생각할 수 있으나 NaN은 자기자신을 포함하여 어떤 값과 비교하여도 false를 보여준다.

 

 - isFinite(value) : 값을 숫자형으로 변환하고, NaN, Infinity, -Infinity 이면 true를 반환한다. 이 특징 때문에 isFinite는 문자열이 일반 숫자인지 검증할 때 흔히 사용한다.

 

* parseInt와 parseFloat

 - 실무에서는 숫자를 단순히 숫자만 쓰지 않는 경우가 많다. 예를 들어 100px, 20$ 등 숫자와 단위를 함께 쓰는 경우가 많다. 이럴 때 유용하게 쓸 수 있는 내장 함수가 parseInt와 parseFloat이다.

 

console.log(parseInt('1024px')); // 1024
console.log(parseFloat('10.5$')); // 10.5
console.log(parseInt('ff',16)); // 255

console.log(parseInt('12.5')); // 12
console.log(parseFloat('12.5.8')); // 12.5

console.log(parseInt('1,000원')); // 1

 

 - parseInt와 parseFloat는 각각 정수와 부동 소수점 숫자가 불가능해질 때 까지 숫자를 읽고 반환한다. 숫자를 읽는 도중 오류가 발생하면 그 앞까지만 반환한다.

 

 - parseInt의 두 번째 매개 변수로 원하는 진수를 지정할 수 있다.

 

 

---

 

 

참고

 

 

모던 자바스크립트 튜토리얼

모던 JavaScript 튜토리얼