연산과 템플릿 문자열

숫자를 계산하는 기호

JavaScript에서 +, -, *, /는 각각 더하기, 빼기, 곱하기, 나누기입니다. %는 나눗셈의 나머지를 구합니다. 예를 들어 14를 3으로 나누면 몫이 4이고 나머지는 2이므로 14 % 3은 2입니다. 숫자 계산의 결과는 변수에 저장하거나 바로 출력할 수 있습니다.

한 식에 여러 연산자가 있으면 정해진 순서대로 계산합니다. 곱하기와 나누기는 더하기와 빼기보다 먼저 계산합니다. 괄호를 사용하면 괄호 안을 먼저 계산하므로 의도한 순서를 분명히 나타낼 수 있습니다. 연산 순서를 외우더라도 읽기 쉬운 괄호를 적절히 사용하는 편이 좋습니다.

실행 예제와 결과

const apples = 14;
const friends = 3;

console.log("더하기", apples + friends);
console.log("빼기", apples - friends);
console.log("곱하기", apples * friends);
console.log("나누기", apples / 2);
console.log("나머지", apples % friends);

const first = 2 + 3 * 4;
const second = (2 + 3) * 4;
console.log("괄호 없음", first);
console.log("괄호 있음", second);

const name = "하늘";
const count = 5;
console.log(`${name}의 사과는 ${count}개입니다.`);
console.log(`두 개를 더하면 ${count + 2}개입니다.`);

const half = count / 2;
console.log(`절반은 ${half}개입니다.`);

2 + 3 * 4는 곱하기부터 계산해 14이고, (2 + 3) * 4는 괄호부터 계산해 20입니다. 백틱 기호로 감싼 문장은 템플릿 문자열입니다. 그 안의 ${name}은 변수 값으로, ${count + 2}는 계산 결과로 바뀝니다. 마지막 나눗셈은 정수만 남기지 않으므로 2.5가 출력됩니다.

연산에서 주의할 점

템플릿 문자열의 양쪽에는 작은따옴표가 아니라 백틱을 사용합니다. ${...} 안에는 계산식이나 변수 이름을 쓸 수 있지만, 중괄호 밖에 적은 글자는 그대로 문장에 남습니다. 템플릿 문자열 안에서 계산해도 count에 다시 할당하지 않는 한 원래 값은 바뀌지 않습니다.

나누는 수가 0인 경우 일반적인 유한한 결과를 기대하면 안 됩니다. JavaScript에서 양수를 0으로 나누면 Infinity가 나옵니다. 나눗셈에 사용할 값이 달라질 수 있다면 계산 전에 0인지 확인하는 조건이 필요합니다. 조건문은 다음 편에서 배웁니다.

계산 순서를 작은 단계로 나눠 보기

긴 식을 읽기 어렵다면 실제 계산 순서를 옆에 적어보세요. 2 + 3 * 4에서는 3 * 4가 먼저 12가 되고, 그 다음 2 + 12가 14가 됩니다. (2 + 3) * 4에서는 괄호 안이 먼저 5가 되어 5 * 4, 즉 20이 됩니다. 같은 숫자를 사용해도 묶는 위치가 결과를 바꿉니다.

식	먼저 계산하는 부분	최종 결과
2 + 3 * 4	3 * 4	14
(2 + 3) * 4	2 + 3	20
14 / 2	전체 나눗셈	7
14 % 3	3으로 나눈 나머지	2

템플릿 문자열은 숫자 계산과 안내 문장을 조합할 때 편리합니다. 백틱으로 감싼 문자열에서 ${count + 2} 부분은 식을 계산한 값으로 바뀝니다. 반면 보통 따옴표 안에 같은 글자를 적으면 ${count + 2}가 그대로 남습니다. 숫자가 왜 바뀌지 않는지 살펴볼 때는 문자열을 감싼 기호부터 확인하세요.

나누기 결과가 항상 정수인 것은 아닙니다. 다섯 개를 둘로 나누면 2.5가 됩니다. 사람 수처럼 정수여야 하는 문제와 길이처럼 소수를 허용하는 문제는 서로 다른 처리 기준이 필요합니다. 또한 JavaScript의 숫자 계산은 일부 소수를 정확히 표현하지 못하므로 금액이나 오차가 중요한 계산에는 별도의 규칙이 필요합니다. 이 강의에서는 작은 정수와 간단한 소수로 연산의 의미를 비교합니다. 계산이 맞아 보여도 결과를 어떤 단위로 사용할지까지 생각해보세요.

연습문제와 해설

가로가 6이고 세로가 4인 직사각형의 넓이와 둘레를 계산해 보세요. 넓이는 6 * 4로 24이고 둘레는 (6 + 4) * 2로 20입니다. 둘레 식의 괄호가 없으면 6 + 4 * 2가 되어 14가 나오므로 의도와 달라집니다.

두 값을 각각 변수에 담은 다음 템플릿 문자열로 넓이는 24, 둘레는 20입니다.를 출력해 보세요. ${...} 안에 변수 이름을 넣거나 계산식을 직접 넣을 수 있습니다. 두 방법 모두 결과를 문장 속에 넣지만, 계산값을 여러 번 사용한다면 변수에 저장하면 읽기 편합니다.