컴퓨터는 수학에 매우 뛰어납니다. 컴퓨터가 0과 1로 이루어진 바이너리(이진법)로 작동하기 때문인데요, 비유하자면 수학은 컴퓨터의 혈관 속에 흐르는 피와 같습니다. 코딩을 하다 보면 수학적 연산을 수행해야 할 순간이 반드시 찾아옵니다.
자바스크립트에서는 수학이 곳곳에서 활용됩니다. 창의 크기를 계산할 때도, 사용자가 웹사이트를 이용할 만한 나이인지 판단할 때도, 사용자가 입력한 두 숫자를 더할 때도 수학이 필요합니다.
이 가이드에서는 자바스크립트의 핵심 산술 연산자를 활용해 수학 연산을 수행하는 방법을 차근차근 알아보겠습니다.
산술 연산자: 기본 개념 복습
자바스크립트는 다양한 연산자로 구성되어 있습니다. 문자열을 다루는 연산자가 있는가 하면, JS 수학 함수를 수행하는 데 도움을 주는 연산자도 있습니다. 이번 가이드에서는 그중에서도 '산술 연산자(arithmetic operator)'라는 특별한 유형의 연산자에 집중해 보겠습니다.
산술 연산자는 수학적 작업을 수행하는 데 사용되는 기호입니다. 학교에서 배웠던 수학 기호와 상당히 유사합니다. 이 글에서는 여섯 가지 연산자를 살펴보겠습니다:
- 덧셈 (+)
- 뺄셈 (-)
- 나눗셈 (/)
- 곱셈 (*)
- 나머지 (%)
- 거듭제곱 (**)
그럼 하나씩 자세히 알아보겠습니다.
본격적으로 시작하기 전에 한 가지 짚고 넘어갈 점이 있습니다. 자바스크립트의 모든 숫자는 하나의 '숫자(number)' 타입으로 저장됩니다. 부동소수점(소수) 숫자와 정수를 위한 별도의 데이터 타입이 없으며, 모두 '숫자'로 통칭됩니다.
덧셈과 뺄셈
JS 숫자를 더하고 빼는 자바스크립트 기호는 일상생활에서 수학에 사용하는 기호와 동일합니다. 참 편리하죠! 두 숫자를 더하려면 플러스(+) 기호로 구분하여 숫자를 나열하면 됩니다:
console.log(5 + 9);
위 코드는 14를 반환합니다. 뺄셈을 하고 싶다면 플러스 대신 마이너스(-)를 넣으면 됩니다:
console.log(5 - 9);
위 코드는 -4를 반환합니다. 자바스크립트 수학 연산은 양수와 음수를 모두 처리할 수 있습니다.
실제 개발에서는 계산 결과를 단순히 콘솔에 출력만 하지 않는 경우가 많습니다. 이럴 때 변수가 유용합니다. 수식에 사용되는 숫자들을 변수에 할당하여 체계적으로 관리할 수 있습니다:
var a = 10;
var b = 20;
var c = a + b;
console.log(c);
위 코드는 30을 반환합니다. 변수 a에 10을, 변수 b에 20을 할당한 후, 변수 c를 사용해 두 숫자를 더했습니다. 정말 간단하죠!
곱셈과 나눗셈
이번에는 한 단계 올라가 곱셈과 나눗셈을 알아보겠습니다. 앞선 예제들과 달리, 새로운 연산자 두 개를 배워야 합니다:
- 별표(*)는 곱셈을 나타냅니다.
- 슬래시(/)는 나눗셈을 나타냅니다.
쿠키 가게를 운영한다고 가정해 봅시다. 쿠키를 만들기 위해 밀가루가 몇 킬로그램 필요한지 계산하고 싶습니다. 쿠키 한 배치에 밀가루 2kg이 필요하고, 다섯 배치를 굽고 싶다면 다음 코드로 필요한 밀가루 양을 계산할 수 있습니다:
var batches = 5;
var flourQuantity = 2;
var flourNeeded = batches * flourQuantity;
console.log("You need ", flourNeeded, "kgs of flour.");
위 코드는 You need 10kgs of flour(밀가루 10kg이 필요합니다)를 반환합니다.
슬래시(/)를 사용하면 나눗셈 연산을 수행할 수 있습니다.
쿠키 한 배치에 40개의 쿠키가 들어 있고, 이를 포장에 나누어 담는다고 해보겠습니다. 한 포장에 쿠키 5개씩 담는다면 몇 개의 포장을 만들 수 있을까요? 다음 코드로 확인할 수 있습니다:
var batchQuantity = 40;
var pack = 5;
var packsMade = batchQuantity / pack;
console.log("You can make ", packsMade, "packs of cookies.");
위 코드는 You can make 8 packs of cookies(쿠키 포장 8개를 만들 수 있습니다)를 반환합니다.
나머지(Modulo)
나머지 연산자는 다른 연산자만큼 자주 사용되지는 않지만, 여전히 자바스크립트에서 중요한 역할을 합니다. 나머지 연산자는 어떤 수를 나눈 후 남는 값을 계산합니다.
자바스크립트에서 나머지 연산은 퍼센트(%) 기호로 표현합니다. 앞선 예제에서는 숫자들이 딱 나누어떨어졌지만, 모든 수학 문제가 그렇지는 않죠. 나눗셈 결과에 나머지가 생기는 경우도 있습니다.
다시 쿠키 예제로 돌아가 보겠습니다. 배치당 구울 수 있는 쿠키 수를 과대평가했다고 가정해 봅시다. 실제로는 배치당 37개의 쿠키만 만들 수 있습니다. 이 배치로 몇 개의 포장을 만들 수 있는지 확인하려면 다음 코드를 사용할 수 있습니다:
var batchQuantity = 37;
var pack = 5;
var packsMade = batchQuantity / pack;
console.log("You can make ", packsMade, "packs of cookies.");
문제는 소수가 나온다는 점입니다! 바로 이럴 때 나머지 연산이 필요합니다. 코드를 수정하여 남은 쿠키 수까지 계산해 보겠습니다:
var batchQuantity = 37;
var pack = 5;
var packsMade = batchQuantity / pack;
console.log("You can make ", Math.floor(packsMade), "packs of cookies.");
var remainder = batchQuantity % pack;
console.log("You'll have ", remainder, " cookies left over.");
위 코드의 실행 결과는 다음과 같습니다:
You can make 7 packs of cookies.
You'll have 2 cookies left over.
코드에 몇 가지 수정을 가했습니다. 첫째, Math.floor()를 사용해 packsMade 값을 가장 가까운 정수로 내림했습니다. 이를 통해 완전한 쿠키 포장 7개를 만들 수 있다는 것을 알 수 있습니다.
그런 다음 나머지 연산자(%)를 사용해 남는 쿠키 수를 계산했습니다. 그 결과, 포장을 나눈 후 쿠키 2개가 남는다는 것을 확인할 수 있습니다.
거듭제곱(Power)
x의 y제곱. 거듭제곱(exponentiation) 같은 용어가 등장하면 꽤 복잡하게 들릴 수 있습니다. 하지만 걱정하지 않으셔도 됩니다.
자바스크립트에서 별표 두 개(**)는 거듭제곱을 나타냅니다:
console.log(7 ** 3);
이 코드는 343을 반환합니다.
이것은 7 * 7 * 7을 다르게 표현한 것으로, 더 짧고 읽기 쉽다는 장점이 있습니다.
연산 순서
수학에는 특정한 연산 순서가 있습니다. 이는 수학 문제를 마주했을 때 어떤 순서로 연산을 수행해야 하는지를 의미합니다.
이 순서를 기억하는 가장 일반적인 방법 중 하나가 BODMAS입니다:
- Brackets — 괄호 (())
- Order — 거듭제곱
- Division — 나눗셈
- Multiplication — 곱셈
- Addition — 덧셈
- Subtraction — 뺄셈
즉, 괄호 안의 연산을 가장 먼저 수행하고, 그다음 거듭제곱, 나눗셈 순으로 진행해야 합니다. 다음 문제를 살펴보겠습니다:
var problem = (5 * 3) + 2;
console.log(problem);
이 문제의 답은 17입니다. 자바스크립트는 먼저 괄호 안에 있는 5 * 3을 계산한 후, 그 결과에 2를 더합니다.
마무리
자바스크립트는 수학 연산을 수행할 수 있는 다양한 산술 연산자를 제공합니다. 덧셈처럼 우리가 수학 문제를 풀 때와 동일한 기호를 사용하는 연산자도 있고, 고유한 기호를 가진 연산자도 있습니다.
수학 문제를 계산할 때는 BODMAS, 즉 연산 순서를 반드시 고려해야 한다는 점을 기억하세요.
이제 여러분도 프로처럼 자바스크립트로 수학 연산을 수행할 준비가 되었습니다!