숫자형

김하은·2023년 5월 12일

모던 자바스크립트는 숫자를 나타내는 두가지 자료형을 지원한다.

일반적인 숫자는 '배정밀도 부동소수점 숫자'로 알려진 64비트형식의 IEEE-754에 저장된다.
(IEEE-754 는 부동소수산술의 정의를 해놓은... 그런것이라한다.)
임의의 길이를 가진 정수는 BigInt숫자로 나타낼 수 있다. 일반적인 숫자는 2의 53제곱 이상이거나 -2의 53제곱 이하일 수 없다는 제약때문에 BigInt라는 새로운 자료형이 만들어졌다.
이것은 아주 특별한 경우에만 사용된다.

숫자를 입력하는 다양한 방법

0을 많이 사용해 숫자를 표현하다보면 잘못입력하기 쉽다. 실제로는 0을 직접입력하는 방법을 잘 사용하지 않는다. 귀찮은 일이기도 하기 때문이다. 그래서 보통 10억을 나타낼때는 1billion이라는 의미로1bn을 사용하고, 73억을 나타낼때는 7.3bn 을 사용한다.

자바스크립트에서도 숫자옆에 e를 붙이고 0 의 개수를 그 옆에 붙여주면 숫자를 줄일 수 있다.

let billon - 1e9 // 1과 9개의 0. 10억
alert( 7.3e9 );  // 73억 (7,300,000,000)

즉 e는 왼쪽의 수에 오른쪽에있는 수만큼 10의 거듭제곱을 곱하는 효과가 있다.

1e3 = 1 * 1000

이번에는 아주 작은 숫자 1 마이크로초를 표현해보자.(백만분의 1초)

let ms = 0.000001;

작은 숫자를 표현할때도 e를 사용할 수 있다.
0을 명시적으로 사용하고 싶지 않다면 말이다.

let ms = 1e-6; // 1에서 왼쪽으로(앞쪽으로)소수점 6번 이동

이렇게 'e' 우측에 음수가 있으면, 이 음수의 절댓값 만큼 10을 거듭제곱한 수로 나누는 것을 의미한다.

16진수, 2진수, 8진수

16진수는 색을 나타내거나 문자를 인코딩할 때 등 다양한 곳에서 두루 쓰인다.
다양한곳에서 쓰이는 만큼 당연히 16진수를 짧게 표현하는 방법도 있다.
16진수는 0x를 사용해 표현이 가능하다.

alert( 0xff ); // 255
alert( 0xFF ); // 255 (대·소문자를 가리지 않으므로 둘 다 같은 값을 나타냅니다.)

2진수와 8진수는 아주 드물게 쓰이긴 하지만, 접두사 0b와 0o를 사용해 간단히 나타낼 수 있다

let a = 0b11111111; // 255의 2진수
let b = 0o377; // 255의 8진수

alert( a == b ); // true, 진법은 다르지만, a와 b는 같은 수임

자바스크립트에서 지원하는 진법은 이렇게 3개이다. 이 외의 진법을 사용하기 위해서는 함수 parseInt를 사용한다. 이것은 이후에 알아보자.

toString(base)

num.toString(base) 메서드는 base진법으로 num을 표현한 후, 이를 문자형으로 변환해 반환한다.

let num = 255;

alert( num.toString(16) );  // ff
alert( num.toString(2) );   // 11111111

base는 2에서 36까지 쓸 수 있는데, 기본값은 10이다.
즉, 2 진수부터 36진수까지 변환이 가능하다.

base=16 – 16진수 색, 문자 인코딩 등을 표현할 때 사용합니다. 숫자는 0부터 9, 10 이상의 수는 A부터 F를 사용하여 나타냅니다.

base=2 – 비트 연산 디버깅에 주로 쓰입니다. 숫자는 0 또는 1이 될 수 있습니다.

base=36 – 사용할 수 있는 base 중 최댓값으로, 0..9와 A..Z를 사용해 숫자를 표현합니다. 알파벳 전체가 숫자를 나타내는 데 사용되죠. 36 베이스는 url을 줄이는 것과 같이 숫자로 된 긴 식별자를 짧게 줄일 때 유용합니다. 예시를 살펴봅시다.
alert( 123456..toString(36) ); // 2n9c

위에 123456하고 점 두개가 있는데 이는 숫자를 대상으로 메서드 toString을 직접호출할때 숫자 뒤에 반드시 붙여주어야 하는 것이다.
점을 하나만 붙인다면 첫번째 점 이후부터는 소수점으로 인식하여 에러가 발생할 수 있다.
점을 하나 더 추가하게되면 자바스크립트는 소수가 없다고 판단하게되며 함수를 호출하게된다.
(123456).toString(36)도 가능하다고 한다.

어림수

어림수를 구하는것(rounding)은 숫자를 다룰 때 가장 많이 사용되는 연산 중 하나이다.

어림수 관련 내장함수:
Math.floor

소수점 첫째자리에서 내림(버림)
3.1은 3이 되고 -1.1은 -2가 됨.

Math.ceil

소수점 첫째자리에서 올림
3.1은 4, -1.1 은 -1이됨

Math.round

소수점 첫째자리에서 반올림.
3.1은 3, 3.6은 4, -1.1은 -1이됨. => 우리가 알고있는 소수계산이랑 유사

Math.trunc
=> Internet Explorer에서는 지원하지 않음

소수부를 무시함.
3.1은 3, -1.1은 -1이 된다.

위의 내장함수들만으로 소수부에 관련된 연산 대부분을 처리할 수 있다.
그런데, 소수점 n-th번째 수를 기준으로 어림수를 구해야하는 상황이라면??

곱하기와 나누기

소수점 두 번째 자리 숫자까지만 남기고 싶은 경우, 숫자에 100 또는 100보다 큰 10의 거듭제곱 수를 곱한 후, 원하는 어림수 내장 함수를 호출하고 처음 곱한 수를 다시 나누면 된다.

let num = 1.23456;
>
alert( Math.floor(num * 100) / 100 ); // 1.23456 -> 123.456 -> 123 -> 1.23

소수점 n번째 수까지의 어림수를 구한뒤, 이를 문자형으로 반환해주는 메서드 toFixed(n)을 사용한다.

let num = 12.34;
alert( num.toFixed(1) ); // "12.3"

toFixed는 Math.round와 유사하게 가장 가까운 값으로 올림 혹은 버림해준다.

다만 주의할 점은 이 메서드의 반환값은 문자열이라는 것이다. 소수부의 길이가 인수(n)보다 작으면 끝에 0이 추가된다.

let num = 12.34;
alert( num.toFixed(5) ); // "12.34000", 소수부의 길이를 5로 만들기 위해 0이 추가되었습니다.

+num.toFixed(5)처럼 단항 덧셈 연산자를 앞에 붙이거나 Number()를 호출하면 문자형의 숫자를 숫자형으로 변환할 수 있다.

부정확한 계산.

숫자는 내부적으로 64비트 형식 IEEE-754으로 표현되기 때문에 숫자를 저장하려면 정확히 64비트가 필요하다. . 64비트 중 52비트는 숫자를 저장하는 데 사용되고, 11비트는 소수점 위치를(정수는 0), 1비트는 부호를 저장하는 데 사용된다.

그런데 숫자가 너무 커지면 64비트 공간이 넘쳐서 Infinity로 처리됩니다.

alert( 0.1 + 0.2 == 0.3 ); // false

0.1과 0.2의 합이 0.3과 일치하는지 확인 했는데 false가 출력되었다.

부정확한 비교 연산이 만들어내는 결과는 여기서 그치지 않는다.왜 이런 일이 발생하는 걸까?

숫자는 0과 1로 이루어진 이진수로 변환되어 연속된 메모리 공간에 저장됩니다. 그런데 10진법을 사용하면 쉽게 표현할 수 있는 0.1, 0.2 같은 분수는 이진법으로 표현하면 무한 소수가된다.

0.1은 1을 10으로 나눈 수인 1/10입니다. 10진법을 사용하면 이러한 숫자를 쉽게 표현할 수 있죠. 1/10과 1/3을 비교해봅시다. 1/3은 무한 소수 0.33333(3)이 된다.

이렇게 10의 거듭제곱으로 나눈 값은 10진법에서 잘 동작하지만 3으로 나누게 되면 10진법에서 제대로 동작하지 않는다. 같은 이유로 2진법 체계에서 2의 거듭제곱으로 나눈 값은 잘 동작하지만 1/10같이 2의 거듭제곱이 아닌 값으로 나누게 되면 무한 소수가 되어버린다.

IEEE-754에선 가능한 가장 가까운 숫자로 반올림하는 방법을 사용해 이런 문제를 해결합니다. 그런데 반올림 규칙을 적용하면 발생하는 '작은 정밀도 손실’을 우리가 볼 수는 없지만 실제로 손실은 발생한다.

0.1 + 0.2가 정확히 0.3이 아닌 이유가 여기에 있다.

물론.. 이러한 이슈는 다른 언어에서도 존재한다.

문제를 해결하는법??
가장 신뢰할만한 방법은 toFixed(n)메서드를 사용해 어림수를 만드는 것이다.
이때 toFixed는 항상 문자열을 반환한다는 점에 유의하자. 문자열을 반환하기 때문에 소수점 다음에 오는 숫자가 항상 2개가 될 수 있다.

isNaN과 isFinite

Infinity와 -Infinity – 그 어떤 숫자보다 큰 혹은 작은 특수 숫자 값
NaN – 에러를 나타내는 값

두 특수 숫자는 숫자형에 속하지만, 정상적인 숫자는 아니기에 정상적인 숫자와 구분하기위해 특별한 함수가 존재한다.

isNaN(value) – 인수를 숫자로 변환한 다음 NaN인지 테스트

alert( isNaN(NaN) ); // true
alert( isNaN("str") ); // true

===NaN과 비교를 하면 되지 않나 라고 생각이들지만 NaN은 자기 자신을 포함하여 그 어떤값과도 같지 않기때문에 비교가 불가능하다.

isFinite(value) – 인수를 숫자로 변환하고 변환한 숫자가 NaN/Infinity/-Infinity가 아닌 일반 숫자인 경우 true를 반환함

alert( isFinite("15") ); // true
alert( isFinite("str") ); // false, NaN이기 때문입니다.
alert( isFinite(Infinity) ); // false, Infinity이기 때문입니다.

isFinite는 문자열이 일반 숫자인지 검증하는 데 사용되곤한다.

** 빈 문자열이나 공백만 있는 문자열은 isFinite를 포함한 모든 숫자 관련 내장 함수에서 0으로 취급된다는 점에 유의!!

Object.is와 비교하기
Object.is는 ===처럼 값을 비교할 때 사용되는 특별한 내장 메서드인데, 아래와 같은 두 가지 에지 케이스에선 ===보다 좀 더 신뢰할만한 결과를 보여줍니다.

NaN을 대상으로 비교할 때: Object.is(NaN, NaN) === true임.
0과 -0이 다르게 취급되어야 할 때: Object.is(0, -0) === false임. 숫자를 나타내는 비트가 모두 0이더라도 부호를 나타내는 비트는 다르므로 0과 -0은 사실 다른 값이긴 합니다.
이 두 에지 케이스를 제외하곤, Object.is(a, b)와 a === b의 결과는 같습니다.

이런 식의 비교는 자바스크립트 명세서에서 종종 찾아볼 수 있습니다. 내부 알고리즘에서 두 값을 비교해야 하는데, 비교 결과가 정확해야 하는 경우 Object.is를 사용하죠. Object.is에서 사용되는 비교방식은 명세서에서 SameValue라고 불립니다.

parseInt와 parseFloat

단항 덧셈 연산자 + 또는 Number()를 사용하여 숫자형으로 변형할 때 적용되는 규칙은 꽤 엄격하다. 피연산자가 숫자가 아니면 실패하고 NaN을 반환하기 때문이다.
엄격한 규칙이 적용되지 않는 유일한 예외는 문자열의 처음 또는 끝에 공백이 있어서 공백을 무시할 때이다.

그런데 실무에선 CSS 등에서 '100px', '12pt'와 같이 숫자와 단위를 함께 쓰는 경우가 흔하다.
여기서 숫자만 추출하는 방법은 바로 내장함수 parseInt와 parseFloat를 사용하는것이다.

두 함수는 불가능할때까지 문자열에서 숫자를 읽는다.
숫자를 읽는 도중 오류가 발생하게되면 이미 수집된 숫자를 반환한다.

(parseInt는 정수, parseFloat는 부동 소수점 숫자를 반환)

parseInt와 parseFloat가 NaN을 반환할 때도 있습니다. 읽을 수 있는 숫자가 없을 때이다.

parseInt(str, radix)의 두 번째 인수
parseInt()의 두 번째 매개 변수는 선택적으로 사용할 수 있다.
radix는 원하는 진수를 지정해 줄 때 사용합니다. 따라서 parseInt를 사용하면 16진수 문자열, 2진수 문자열 등을 파싱할 수 있다.

기타 수학 함수

자바스크립트에서 제공하는 내장 객체 Math엔 다양한 수학 관련 함수와 상수들이 들어있다.

Math.random()

0과 1 사이의 난수를 반환한다(1은 제외).

Math.max(a, b, c...) / Math.min(a, b, c...)

인수 중 최대/최솟값을 반환한다.

Math.pow(n, power)

n을 power번 거듭제곱한 값을 반환합니다.

이 외에도 삼각법을 포함한 다양한 함수와 상수가 Math에 있다..

김하은

이전 포스트

배열

다음 포스트

숫자형