2023년 12월 1일

숫자형

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

  1. 일반적인 숫자는 '배정밀도 부동소수점 숫자(double precision floating point number)'로 알려진 64비트 형식의 IEEE-754에 저장됩니다. 튜토리얼 전체에서 이 형식을 사용하여 숫자를 표현할 예정입니다.

  2. 임의의 길이를 가진 정수는 BigInt 숫자로 나타낼 수 있습니다. 일반적인 숫자는 253이상이거나 -253이하일 수 없다는 제약 때문에 BigInt라는 새로운 자료형이 만들어졌습니다. BigInt는 아주 특별한 경우에만 사용되므로, 별도의 챕터 BigInt에서 자세한 내용을 다루겠습니다.

자, 그럼 일반적인 숫자에 대해서 자세히 알아봅시다.

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

10억을 입력해야 한다고 상상해 봅니다. 가장 분명한 방법은 아래와 같이 직접 10억(one billion)을 써주는 것입니다.

let billion = 1000000000;

그런데 이렇게 0을 많이 사용해 숫자를 표현하다 보면 잘못 입력하기 쉽기 때문에, 실제로는 이런 방법을 잘 사용하지 않습니다. 0을 많이 입력하는 게 귀찮기도 하지요. 그래서 대개는 10억(billion)을 나타낼 땐 '1bn'을 사용하고, 73억을 나타낼 땐 '7.3bn'을 사용합니다. 큰 숫자를 나타낼 땐 이런 방법이 주로 사용되죠.

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

let billion = 1e9;  // 10억, 1과 9개의 0

alert( 7.3e9 );  // 73억 (7,300,000,000)

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

1e3 === 1 * 1000
1.23e6 === 1.23 * 1000000

이제 아주 작은 숫자인 1마이크로초(백만 분의 1초)를 표현해보겠습니다.

let ms = 0.000001;

작은 숫자를 표현할 때도 큰 숫자를 표현할 때처럼 'e'를 사용할 수 있습니다. 0을 명시적으로 쓰고 싶지 않다면 다음과 같이 숫자를 표현할 수 있죠.

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

0.000001에서 0의 개수를 세면 6이므로 0.000001은 당연히 1e-6이 되죠.

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

// 10을 세 번 거듭제곱한 수로 나눔
1e-3 === 1 / 1000 // 0.001

// 10을 여섯 번 거듭제곱한 수로 나눔
1.23e-6 === 1.23 / 1000000 // 0.00000123

16진수, 2진수, 8진수

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

예시:

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

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

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

base2에서 36까지 쓸 수 있는데, 기본값은 10입니다.

base별 유스 케이스는 다음과 같습니다.

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

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

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

    alert( 123456..toString(36) ); // 2n9c
점 두 개와 메서드 호출

123456..toString(36)에 있는 점 두 개는 오타가 아닙니다. 위 예시처럼 숫자를 대상으로 메서드 toString을 직접 호출하고 싶다면 숫자 다음에 점 두 개 ..를 붙여야 합니다.

123456.toString(36)처럼 점을 한 개만 사용하면, 첫 번째 점 이후는 소수부로 인식되어 에러가 발생할 수 있습니다. 점을 하나 더 추가하면 자바스크립트는 소수부가 없다고 판단하고 함수를 호출합니다.

(123456).toString(36)도 가능합니다.

어림수 구하기

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

어림수 관련 내장 함수 몇 가지를 살펴봅시다.

Math.floor
소수점 첫째 자리에서 내림(버림). 3.13, -1.1-2가 됩니다.
Math.ceil
소수점 첫째 자리에서 올림. 3.14, -1.1-1이 됩니다.
Math.round
소수점 첫째 자리에서 반올림. 3.13, 3.64, -1.1-1이 됩니다.
Math.trunc (Internet Explorer에서는 지원하지 않음)
소수부를 무시. 3.13이 되고 -1.1-1이 됩니다.

각 내장 함수의 차이를 표로 나타내면 다음과 같습니다.

Math.floor Math.ceil Math.round Math.trunc
3.1 3 4 3 3
3.6 3 4 4 3
-1.1 -2 -1 -1 -1
-1.6 -2 -1 -2 -1

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

예를 들어 1.2345가 있는데 소수점 두 번째 자릿수까지만 남겨 1.23을 만들고 싶은 경우처럼 말이죠.

두 가지 방법이 있습니다.

  1. 곱하기와 나누기

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

    let num = 1.23456;
    
    alert( Math.floor(num * 100) / 100 ); // 1.23456 -> 123.456 -> 123 -> 1.23
  2. 소수점 n 번째 수까지의 어림수를 구한 후 이를 문자형으로 반환해주는 메서드인 toFixed(n)를 사용합니다.

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

    toFixedMath.round와 유사하게 가장 가까운 값으로 올림 혹은 버림해줍니다.

    let num = 12.36;
    alert( num.toFixed(1) ); // "12.4"

    toFixed를 사용할 때 주의할 점은 이 메서드의 반환 값이 문자열이라는 것입니다. 소수부의 길이가 인수보다 작으면 끝에 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( 1e500 ); // Infinity

원인을 이해하려면 집중이 필요하긴 하지만, 꽤 자주 발생하는 현상인 정밀도 손실(loss of precision)도 있습니다.

예시를 살펴봅시다.

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

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

이상하네요! 합의 결과가 0.3이 아니라면 대체 무엇일까요?

alert( 0.1 + 0.2 ); // 0.30000000000000004

부정확한 비교 연산이 만들어내는 결과는 여기서 그치지 않습니다. 인터넷 쇼핑몰 사이트를 운영하고 있다고 가정해 봅시다. 사용자가 $0.10$0.20 짜리 물품을 장바구니에 넣었다고 상상해 보죠. 주문 총액이 $0.30000000000000004인 것을 보고 놀라지 않을 사용자는 없을 겁니다.

왜 이런 일이 발생하는 걸까요?

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

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

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

10진법에서 1/3을 정확히 나타낼 수 없듯이, 2진법을 사용해 0.1 또는 0.2정확하게 저장하는 방법은 없습니다.

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

아래와 같이 코드를 작성하면 정밀도 손실을 눈으로 확인할 수 있죠.

alert( 0.1.toFixed(20) ); // 0.10000000000000000555

그리고 두 숫자를 합하면 '정밀도 손실’도 더해집니다.

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

자바스크립트뿐만이 아닙니다.

다른 언어에서도 같은 이슈가 있습니다.

자바스크립트와 동일한 숫자 형식을 사용하기 때문에 PHP, Java, C, Perl, Ruby에서도 똑같은 결과를 얻습니다.

문제를 해결하는 방법은 없을까요? 물론 있습니다. 가장 신뢰할만한 방법은 toFixed(n)메서드를 사용해 어림수를 만드는 것입니다.

let sum = 0.1 + 0.2;
alert( sum.toFixed(2) ); // 0.30

이때 toFixed는 항상 문자열을 반환한다는 점에 유의해야 합니다. 문자열을 반환하기 때문에 소수점 다음에 오는 숫자가 항상 2개가 될 수 있습니다. 인터넷 쇼핑몰을 구축 중이고 $0.30를 보여줘야 할 때 유용하죠. 문자형으로 바뀐 숫자를 다시 숫자형으로 강제 변환하려면 단항 덧셈 연산자를 사용하면 됩니다.

let sum = 0.1 + 0.2;
alert( +sum.toFixed(2) ); // 0.3

숫자에 임시로 100(또는 더 큰 숫자)을 곱하여 정수로 바꾸고, 원하는 연산을 한 후 다시 100으로 나누는 것도 하나의 방법이 될 수 있습니다. 정수를 대상으로 하는 수학 연산은 소수를 대상으로 하는 연산보다 에러가 적기 때문입니다. 그런데 어쨌든 마지막에 나눗셈이 들어가기 때문에 소수가 다시 등장할 수 있다는 단점이 있습니다.

alert( (0.1 * 10 + 0.2 * 10) / 10 ); // 0.3
alert( (0.28 * 100 + 0.14 * 100) / 100); // 0.4200000000000001

이렇게 10의 거듭제곱을 곱하고 다시 동일한 숫자로 나누는 전략은 오류를 줄여주긴 하지만 완전히 없애지는 못합니다.

구현을 하다 보면 무한 소수가 나오는 경우를 완전히 차단해야 하는 경우가 생기곤 합니다. 달러가 아닌 센트 단위로 물품 가격을 저장하는 쇼핑몰을 담당하고 있는데, 행사 때문에 가격을 30% 할인해야 하는 경우가 그렇죠. 무한소수를 방지하는 완벽한 방법은 사실 없습니다. 필요할 때마다 '꼬리’를 잘라 어림수를 만드는 방법뿐이죠.

흥미로운 발견

아래 예시를 실행해보세요.

// 숫자가 스스로 증가하네요!
alert( 9999999999999999 ); // 10000000000000000이 출력됩니다.

문제의 원인은 역시나 정밀도 손실 때문입니다. 숫자를 저장할 땐 64비트가 사용되는데, 이 중 실제 숫자를 저장하는 데 사용되는 52비트에 위 숫자를 저장하기엔 공간이 모자랍니다. 따라서 최소 유효 숫자(the least significant digit)가 손실되어 버렸습니다.

자바스크립트는 숫자 손실이 일어나도 오류를 발생시키지 않습니다. 적절한 포맷으로 숫자를 맞추는 데 최선을 다하긴 하지만 유감스럽게도 위 예시의 숫자를 담기엔 포맷이 충분하지 않네요.

두 종류의 0

자바스크립트 내부에서 숫자를 표현하는 방식 때문에 발생하는 또 다른 흥미로운 현상은 0-0이라는 두 종류의 0이 존재한다는 사실입니다.

자바스크립트에선 숫자의 부호가 단일 비트에 저장되는데 0을 포함한 모든 숫자에 부호를 설정할 수도, 설정하지 않을 수도 있기 때문입니다.

대부분의 연산은 0-0을 동일하게 취급하기 때문에 두 0의 차이는 두드러지지 않는 편입니다.

isNaN과 isFinite

아래 두 특수 숫자 값이 기억나시나요?

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

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

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

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

    그런데 굳이 이 함수가 필요할까요? "=== NaN 비교를 하면 되지 않을까?"라는 생각이 들 수 있습니다. 안타깝게도 대답은 '필요하다’입니다. NaNNaN 자기 자신을 포함하여 그 어떤 값과도 같지 않다는 점에서 독특합니다.

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

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

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

let num = +prompt("숫자를 입력하세요.", '');

// 숫자가 아닌 값을 입력하거나 Infinity, -Infinity를 입력하면 false가 출력됩니다.
alert( isFinite(num) );

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

Object.is와 비교하기

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

  1. NaN을 대상으로 비교할 때: Object.is(NaN, NaN) === true임.
  2. 0-0이 다르게 취급되어야 할 때: Object.is(0, -0) === false임. 숫자를 나타내는 비트가 모두 0이더라도 부호를 나타내는 비트는 다르므로 0-0은 사실 다른 값이긴 합니다.

이 두 에지 케이스를 제외하곤, Object.is(a, b)a === b의 결과는 같습니다.

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

parseInt와 parseFloat

단항 덧셈 연산자 + 또는 Number()를 사용하여 숫자형으로 변형할 때 적용되는 규칙은 꽤 엄격합니다. 피연산자가 숫자가 아니면 형 변환이 실패합니다.

alert( +"100px" ); // NaN

엄격한 규칙이 적용되지 않는 유일한 예외는 문자열의 처음 또는 끝에 공백이 있어서 공백을 무시할 때입니다.

그런데 실무에선 CSS 등에서 '100px', '12pt'와 같이 숫자와 단위를 함께 쓰는 경우가 흔합니다. 대다수 국가에서 '19€'처럼 금액 뒤에 통화 기호를 붙여 표시하기도 하죠. 숫자만 추출하는 방법이 필요해 보이네요.

내장 함수 parseIntparseFloat는 이런 경우를 위해 만들어졌습니다.

두 함수는 불가능할 때까지 문자열에서 숫자를 ‘읽습니다’. 숫자를 읽는 도중 오류가 발생하면 이미 수집된 숫자를 반환하죠. parseInt는 정수, parseFloat는 부동 소수점 숫자를 반환합니다.

alert( parseInt('100px') ); // 100
alert( parseFloat('12.5em') ); // 12.5

alert( parseInt('12.3') ); // 12, 정수 부분만 반환됩니다.
alert( parseFloat('12.3.4') ); // 12.3, 두 번째 점에서 숫자 읽기를 멈춥니다.

parseIntparseFloatNaN을 반환할 때도 있습니다. 읽을 수 있는 숫자가 없을 때 그렇죠.

alert( parseInt('a123') ); // NaN, a는 숫자가 아니므로 숫자를 읽는 게 중지됩니다.
parseInt(str, radix)의 두 번째 인수

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

alert( parseInt('0xff', 16) ); // 255
alert( parseInt('ff', 16) ); // 255, 0x가 없어도 동작합니다.

alert( parseInt('2n9c', 36) ); // 123456

기타 수학 함수

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

몇 가지 예시를 살펴봅시다.

Math.random()

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

alert( Math.random() ); // 0.1234567894322
alert( Math.random() ); // 0.5435252343232
alert( Math.random() ); // ... (무작위 수)
Math.max(a, b, c...) / Math.min(a, b, c...)

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

alert( Math.max(3, 5, -10, 0, 1) ); // 5
alert( Math.min(1, 2) ); // 1
Math.pow(n, power)

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

alert( Math.pow(2, 10) ); // 2의 10제곱 = 1024

이 외에도 삼각법을 포함한 다양한 함수와 상수가 Math에 있습니다. 자세한 내용은 MDN 문서에서 읽어보시기 바랍니다.

요약

0이 많이 붙은 큰 숫자는 다음과 같은 방법을 사용해 씁니다.

  • 0의 개수를 'e' 뒤에 추가합니다. 123e6은 0이 6개인 숫자, 123000000을 나타냅니다.
  • 'e' 다음에 음수가 오면, 음수의 절댓값 만큼 10을 거듭제곱한 숫자로 주어진 숫자를 나눕니다. 123e-60.000123을 나타냅니다.

다양한 진법을 사용할 수도 있습니다.

  • 자바스크립트는 특별한 변환 없이 16진수(0x), 8진수(0o), 2진수(0b)를 바로 사용할 수 있게 지원합니다.
  • parseInt(str, base)를 사용하면 strbase진수로 바꿔줍니다(단, 2 ≤ base ≤ 36).
  • num.toString(base)는 숫자를 base진수로 바꾸고, 이를 문자열 형태로 반환합니다.

12pt100px과 같은 값을 숫자로 변환하는 것도 가능합니다.

  • parseInt/parseFloat를 사용하면 문자열에서 숫자만 읽고, 읽은 숫자를 에러가 발생하기 전에 반환해주는 ‘약한’ 형 변환을 사용할 수 있습니다.

소수를 처리하는 데 쓰이는 메서드는 다음과 같습니다.

  • Math.floor, Math.ceil, Math.trunc, Math.round, num.toFixed(precision)를 사용하면 어림수를 구할 수 있습니다.
  • 소수를 다룰 땐 정밀도 손실에 주의하세요.

이 외에도 다양한 수학 함수가 있습니다.

  • 수학 연산이 필요할 때 Math 객체를 찾아보세요. 작은 객체이지만 기본적인 연산은 대부분 다룰 수 있습니다.

과제

중요도: 5

사용자에게 두 수를 입력받고, 두 수의 합을 출력해주는 스크립트를 작성해보세요.

데모 실행하기

P.S. 자료형에 주의하여 함정에 빠지지 않도록 하세요.

let a = +prompt("The first number?", "");
let b = +prompt("The second number?", "");

alert( a + b );

prompt 앞에 단항 연산자 +가 붙어 있습니다. 단항 연산자 +는 입력받은 값을 숫자형으로 바꾸어 줍니다.

단항 연산자 +를 사용하지 않는 경우, ab 는 문자열이기 때문에 ab의 합은 문자열의 연결이 됩니다. "1" + "2" = "12" 이런 식으로 말이죠.

중요도: 4

이 문서에 따르면 Math.roundtoFixed는 둘 다 가장 가까운 어림수를 구해줍니다. 0..4는 버림하고, 5..9는 올림합니다.

예시:

alert( 1.35.toFixed(1) ); // 1.4

위 예시와 유사한 아래의 경우, 6.356.4가 아닌 6.3으로 반올림되는 이유는 무엇일까요?

alert( 6.35.toFixed(1) ); // 6.3

어떻게 하면 6.35를 제대로 반올림할 수 있을까요?

10진법으로 나타낸 소수 6.35는 내부적으로는 2진법 무한소수입니다. 따라서 이 경우에도 어김없이 정밀도 손실이 발생합니다.

아래 코드를 살펴봅시다.

alert( 6.35.toFixed(20) ); // 6.34999999999999964473

정밀도 손실은 수를 증가시킬 수도, 감소시킬 수도 있습니다. 위 예시에서는 수가 아주 약간 작아졌습니다. 따라서 반올림하면 버림이 일어납니다.

1.35의 경우에는 어떨까요?

alert( 1.35.toFixed(20) ); // 1.35000000000000008882

이번에는 정밀도 손실로 수가 약간 증가했습니다. 따라서 반올림하면 올림이 일어납니다.

6.35를 제대로 반올림하려면 어떻게 해야 할까요?

반올림하기 전에 이 수를 정수에 가깝게 만들어야 합니다.

alert( (6.35 * 10).toFixed(20) ); // 63.50000000000000000000

63.5 에서는 정밀도 손실이 전혀 발생하지 않습니다. 소수 부분인 0.5가 정확히 1/2이기 때문입니다. 2진법 체계에서 2의 거듭제곱으로 나눈 값은 정확하게 저장되기 때문에 제대로 반올림할 수 있습니다.

alert( Math.round(6.35 * 10) / 10); // 6.35 -> 63.5 -> 64(반올림됨) -> 6.4
중요도: 5

사용자가 유효한 숫자형 값을 입력할 때까지 계속 입력받는 함수 readNumber 를 만들어보세요.

반환되는 값은 꼭 숫자형 값이어야 합니다.

사용자가 아무 입력도 하지 않거나 '취소’를 누르면 입력받기를 멈추고 null을 반환하세요.

데모 실행하기

테스트 코드가 담긴 샌드박스를 열어 정답을 작성해보세요.

function readNumber() {
  let num;

  do {
    num = prompt("Enter a number please?", 0);
  } while ( !isFinite(num) );

  if (num === null || num === '') return null;

  return +num;
}

alert(`Read: ${readNumber()}`);

사용자가 아무것도 입력하지 않는 경우와 입력값이 null인 경우를 처리해야 해서 해답이 생각보다 복잡합니다.

이 함수는 일반적인 숫자가 입력될 때까지 입력을 받습니다. 사용자가 아무것도 입력하지 않는 경우와 입력을 취소하여 입력값이 null이 되는 경우를 살펴봅시다. 빈 문자열과 null은 숫자 형식으로는 0이기 때문에 일반적인 숫자에 해당합니다.

따라서 사용자가 아무것도 입력하지 않거나 취소하여 null이 된 경우에 그대로 숫자로 변환하게 되면 함수가 0을 반환하기 때문에, 이 두 가지의 특별한 경우에는 함수가 입력받기를 멈추고 null을 반환하도록 처리해야 합니다.

테스트 코드가 담긴 샌드박스를 열어 정답을 확인해보세요.

중요도: 4

아래 반복문은 무한대로 작동합니다. 왜 그럴까요?

let i = 0;
while (i != 10) {
  i += 0.2;
}

i는 절대 10이 될 수 없어서 무한 루프가 발생합니다.

코드를 실행해 실제 i 값을 확인해 봅시다.

let i = 0;
while (i < 11) {
  i += 0.2;
  if (i > 9.8 && i < 10.2) alert( i );
}

어떤 경우에도 i10이 될 수 없습니다.

이런 일이 발생하는 이유는 0.2와 같은 분수를 더할 때 정밀도 손실이 발생하기 때문입니다.

그러므로 소수나 분수를 대상으로 작업 할 땐 등호 비교를 피하세요.

중요도: 2

내장 함수 Math.random()0부터 1까지의(1은 포함되지 않음) 랜덤한 값을 생성합니다.

random(min, max)함수를 작성하여 min부터 max까지 임의의 부동 소수점 숫자를 생성합니다(max는 포함되지 않음).

예시를 살펴봅시다.

alert( random(1, 5) ); // 1.2345623452
alert( random(1, 5) ); // 3.7894332423
alert( random(1, 5) ); // 4.3435234525

We need to “map” all values from the interval 0…1 into values from min to max.

이 작업은 두 단계로 이루어집니다.

  1. 0과 1 사이의 임의의 숫자에 max-min를 곱하면 가능한 값의 간격이 0..1에서 0..max-min으로 증가합니다.
  2. Now if we add min, the possible interval becomes from min to max.

The function:

function random(min, max) {
  return min + Math.random() * (max - min);
}

alert( random(1, 5) );
alert( random(1, 5) );
alert( random(1, 5) );
중요도: 2

Create a function randomInteger(min, max) that generates a random integer number from min to max including both min and max as possible values.

Any number from the interval min..max must appear with the same probability.

Examples of its work:

alert( randomInteger(1, 5) ); // 1
alert( randomInteger(1, 5) ); // 3
alert( randomInteger(1, 5) ); // 5

You can use the solution of the previous task as the base.

The simple but wrong solution

The simplest, but wrong solution would be to generate a value from min to max and round it:

function randomInteger(min, max) {
  let rand = min + Math.random() * (max - min);
  return Math.round(rand);
}

alert( randomInteger(1, 3) );

The function works, but it is incorrect. The probability to get edge values min and max is two times less than any other.

If you run the example above many times, you would easily see that 2 appears the most often.

That happens because Math.round() gets random numbers from the interval 1..3 and rounds them as follows:

values from 1    ... to 1.4999999999  become 1
values from 1.5  ... to 2.4999999999  become 2
values from 2.5  ... to 2.9999999999  become 3

Now we can clearly see that 1 gets twice less values than 2. And the same with 3.

The correct solution

There are many correct solutions to the task. One of them is to adjust interval borders. To ensure the same intervals, we can generate values from 0.5 to 3.5, thus adding the required probabilities to the edges:

function randomInteger(min, max) {
  // now rand is from  (min-0.5) to (max+0.5)
  let rand = min - 0.5 + Math.random() * (max - min + 1);
  return Math.round(rand);
}

alert( randomInteger(1, 3) );

An alternative way could be to use Math.floor for a random number from min to max+1:

function randomInteger(min, max) {
  // here rand is from min to (max+1)
  let rand = min + Math.random() * (max + 1 - min);
  return Math.floor(rand);
}

alert( randomInteger(1, 3) );

Now all intervals are mapped this way:

values from 1  ... to 1.9999999999  become 1
values from 2  ... to 2.9999999999  become 2
values from 3  ... to 3.9999999999  become 3

All intervals have the same length, making the final distribution uniform.

튜토리얼 지도