숫자와 수학

장바구니는 가격을 더하고, 게임은 점수를 추적하고, 양식은 부과할 세금을 계산합니다. 결국 이 모든 것은 숫자와 그 숫자로 하는 산술 연산으로 귀결됩니다. 자바스크립트는 숫자를 핵심 구성 요소 중 하나로 다루며, 이 장에서는 숫자로 할 수 있는 것들을 다룹니다. 일상적인 계산, 반올림과 무작위성을 위한 내장 도우미, 그리고 거의 모든 사람이 걸려 넘어지는 부분인 페이지에 입력된 텍스트를 계산 가능한 숫자로 되돌리는 방법까지 살펴봅니다.

숫자와 산술 연산

자바스크립트에는 숫자 타입이 딱 하나뿐이고, 이것이 모든 것을 다룹니다. 42 같은 정수와 9.99 같은 소수는 똑같은 종류의 값이라서, 둘 중 하나를 골라야 할 일이 없습니다:

const price = 9.99;
const quantity = 3;
const total = price * quantity;
console.log(total); // 29.97

계산은 이미 알고 있는 기호로 합니다. +는 더하고, -는 빼고, *는 곱하고, /는 나눕니다. 하나 덜 익숙한 것이 있는데, %, 나머지 연산자입니다. 이것은 나누고 남은 값을 알려줍니다:

const remainder = 7 % 2;
console.log(remainder); // 1

7을 2로 나누면 3이 되고 1이 남으므로, 7 % 2는 1입니다. 이 방법으로 숫자가 짝수인지 확인할 수 있습니다. 짝수를 2로 나누면 남는 것이 없으므로, 짝수는 number % 2가 0, 홀수는 1이 됩니다.

Juno숫자와 산술 연산 자바스크립트에는 숫자 타입이 하나뿐이라서 정수와 소수가 같은 것으로 취급되고, 둘 중 하나를 고를 필요가 없습니다. 연산자는 + - * /와 나눈 나머지를 구하는 %가 있습니다. 유용한 방법은 % 2인데, 짝수면 0, 홀수면 1이 됩니다.

Math 객체

기본 연산자로는 부족할 때, 자바스크립트는 **Math**라는 내장 수학 도우미 모음을 제공합니다. 점(dot)을 붙여 이름으로 호출합니다:

console.log(Math.round(4.6)); // 5
console.log(Math.floor(4.6)); // 4
console.log(Math.ceil(4.1)); // 5

Math.round는 가장 가까운 정수로 반올림하고, Math.floor는 항상 내림하고, Math.ceil은 항상 올림합니다. 또 Math.max와 Math.min도 있는데, 전달한 숫자들 중 가장 큰 값과 가장 작은 값을 골라줍니다:

console.log(Math.max(3, 8, 5)); // 8
console.log(Math.min(3, 8, 5)); // 3

그리고 Math.random은 0 이상 1 미만(1은 포함하지 않음)의 무작위 소수를 줍니다. 이것만으로는 원하는 결과를 얻기 어려운 경우가 많아서, 흔히 여기에 곱하고 내림을 해서 무작위 정수를 만듭니다:

const roll = Math.floor(Math.random() * 6) + 1;
console.log(roll); // 4 (매번 다른 숫자)

Math.random() * 6은 0 이상 6 미만의 값이 되고, Math.floor로 0부터 5까지의 정수로 만들고, + 1로 1부터 6까지의 주사위 값으로 바꿔줍니다.

JunoMath 객체Math는 점을 붙여 호출하는 미리 만들어진 수학 도구 상자입니다. Math.round, Math.floor(내림), Math.ceil(올림), 그리고 가장 큰 값과 작은 값을 구하는 Math.max / Math.min이 있습니다. Math.random은 0부터 1 사이의 소수를 주는데, 외워둘 만한 방법은 무작위 정수를 만드는 Math.floor(Math.random() * n)입니다. 저도 이 패턴을 믿기까지 몇 번 시도해봤으니, 그대로 따라 적어보고 천천히 읽어보세요.

문자열을 숫자로 바꾸기

사람이 페이지에 입력하는 것은 숫자처럼 보여도 항상 **텍스트**로 들어옵니다. 입력창에 5를 입력하면 숫자 5가 아니라 문자열 "5"를 얻습니다. 이것이 중요한 이유는, +가 문자열 두 개에 적용되면 더하는 게 아니라 이어 붙이기 때문입니다:

const a = "5";
const b = "3";
console.log(a + b); // "53", 8이 아님

계산을 하려면 먼저 텍스트를 숫자로 변환해야 합니다. 가장 명확한 방법은 Number()입니다:

const count = Number("5");
console.log(count + 3); // 8

그 외에도 두 가지가 있습니다. parseInt는 정수를 읽고 소수 부분을 버리고, parseFloat는 소수 부분을 유지합니다:

console.log(parseInt("42px")); // 42
console.log(parseFloat("9.99")); // 9.99

이 둘은 "42px"처럼 어떤 텍스트의 앞쪽에 놓인 숫자를 읽을 수 있는데, Number는 이를 하지 못합니다. 문자열 앞에 +를 붙이는 지름길도 있는데, Number와 같은 방식으로 변환합니다:

console.log(+"7"); // 7

Juno문자열을 숫자로 바꾸기 페이지에 입력하는 것은 무엇이든 텍스트라서, "5"는 숫자 5가 아니고, "5" + "3"은 8이 아니라 "53"이 됩니다. 먼저 변환하세요. Number("5")가 가장 명확하고, parseInt는 정수를 읽고, parseFloat는 소수를 유지하며, 문자열 앞에 붙이는 +는 빠른 지름길입니다. 더하는 대신 이어 붙는 함정을 조심하세요. 누구나 한 번은 걸립니다.

숫자의 날카로운 함정들

자바스크립트의 숫자에는 한 번쯄 미리 봐두면 좋은 놀라운 점이 있습니다. 단순한 소수 두 개를 더하면 이상한 답이 나올 수 있습니다:

console.log(0.1 + 0.2); // 0.30000000000000004

이건 코드의 버그가 아닙니다. 컴퓨터는 모든 소수를 정확히 표현할 수 없는 방식으로 저장하기 때문에, 아주 작은 오차가 스며듭니다. 대부분의 경우 문제가 되지 않고, 문제가 될 때는 표시하기 전에 결과를 반올림합니다:

const sum = 0.1 + 0.2;
console.log(Math.round(sum * 100) / 100); // 0.3

NaN이라는 값도 만나게 될 텐데, "숫자가 아님(not a number)"이라는 뜻입니다. 말이 안 되는 텍스트를 숫자로 바꾸려는 것처럼, 계산에 합리적인 답이 없을 때 이 값이 나옵니다:

console.log(Number("hello")); // NaN

출력에 NaN이 보인다면 대개 어딘가에서 변환이 잘못됐다는 뜻이니, 두려워할 것이 아니라 유용한 힌트로 여기세요.

Juno숫자의 날카로운 함정들 소수는 조금 느슨하게 저장되기 때문에, 0.1 + 0.2는 0.30000000000000004로 나오는데, 이는 정상이고 코드의 버그가 아닙니다. 문제가 될 때는 보여주기 전에 결과를 반올림하세요. 그리고 NaN은 "숫자가 아님"을 뜻하는, 변환이 실패했을 때 나오는 답이니, 어떤 텍스트가 예상대로 숫자로 바뀌지 않았다는 힌트로 받아들이세요.

숫자 다음으로 알아볼 것

숫자는 자바스크립트의 핵심 데이터 타입 몇 가지 중 하나로, 텍스트나 참/거짓 값과 나란히 자리합니다. 실제 프로그램은 대부분 이들을 섞어 쓰는데, 문자열에서 숫자를 뽑아내고, 그것을 비교하고, 결과를 변수에 저장하는 식입니다. 이런 비교와 결합을 담당하는 연산자에 대해서는 다음 글인 연산자에서 다룹니다.

숫자와 수학 ​

숫자와 산술 연산 ​

Math 객체 ​

문자열을 숫자로 바꾸기 ​

숫자의 날카로운 함정들 ​