계산하고 이어 붙이는 기본 연산자

01. 사칙연산과 나머지 · 거듭제곱

+ - * /는 익숙한 그대로예요. 여기에 두 가지가 더 있어요. %는 나눈 나머지, **는 거듭제곱이에요. 나머지 연산자는 생각보다 자주 써요. 초를 "몇 분 몇 초"로 바꾸거나, 짝수 · 홀수를 가리거나, 목록을 한 바퀴 돌아 처음으로 돌아갈 때예요.

const seconds = 135;
console.log(Math.floor(seconds / 60) + '분 ' + (seconds % 60) + '초'); // 2분 15초

console.log(7 % 2);   // 1 — 1이면 홀수, 0이면 짝수

const slides = 4;
let slide = 3;
slide = (slide + 1) % slides; // 마지막 다음은 처음으로
console.log(slide);   // 0

console.log(2 ** 10); // 1024

곱하기 · 나누기가 더하기 · 빼기보다 먼저 계산되는 순서도 수학과 같아요. 순서가 헷갈리는 식은 괄호로 감싸서 읽는 사람이 바로 알게 쓰는 게 좋아요.

02. +는 문자열을 만나면 이어 붙여요

+는 두 가지 일을 해요. 양쪽이 숫자면 더하고, 한쪽이라도 문자열이면 둘을 이어 붙여요. 반면 - * /는 이어 붙이는 기능이 없어서 문자열을 숫자로 바꿔 계산해요. 그래서 같은 값에 + 1과 - 1을 하면 전혀 다른 일이 일어나요.

const qty = '2';                // 입력 칸에서 받은 값은 문자열이에요
console.log(qty + 1);            // 21
console.log(qty - 1);            // 1
console.log(Number(qty) + 1);    // 3

console.log(1 + 2 + '3');        // 33 — 왼쪽부터: 1 + 2 = 3, 3 + '3' = '33'
console.log('1' + 2 + 3);        // 123

웹 페이지의 입력 칸, 주소창의 값, 서버에서 받은 데이터처럼 밖에서 들어온 값은 문자열인 경우가 많아요. 계산하기 전에 Number()로 바꿔 두는 습관이 이 버그를 막아요. 바꾸는 규칙은 형 변환과 비교에서 자세히 다뤄요.

03. 대입과 줄임 표기

변수에 담긴 값을 바꿔 다시 넣는 일이 많아서 줄임 표기가 있어요. stock -= 3은 stock = stock - 3과 같아요. += *= /= %= **=도 같은 방식이에요. 1을 더하고 빼는 건 ++ --로 더 줄일 수 있어요.

let stock = 10;
stock -= 3;
stock++;
console.log(stock);  // 8

let n = 5;
console.log(n++, n); // 5 6 — 뒤에 붙이면 지금 값을 먼저 쓰고 1을 더해요
console.log(++n, n); // 7 7 — 앞에 붙이면 1을 먼저 더하고 그 값을 써요

++를 앞에 붙이느냐 뒤에 붙이느냐에 따라 그 자리에서 쓰이는 값이 달라요. 이 차이 때문에 헷갈리기 쉬워서, 실무에서는 ++를 다른 식 안에 섞지 않고 count++;처럼 한 줄에 따로 써요.

const price = '12000';  // 서버에서 받은 값
const shipping = 3000;
console.log(price + shipping);

console.log(Number(price) + shipping); // 15000

04. 실전 포인트

• 언제 쓰나요? %는 시간 · 페이지 번호 · 순환 목록 계산에, 줄임 대입(+=)은 합계 · 카운터에 늘 써요.
• 대신 쓰는 것: 문자열 조립은 '안녕, ' + name + '님'보다 템플릿 리터럴 `안녕, ${name}님`을 써요. 의도가 "이어 붙이기"라는 게 분명해서 +의 두 얼굴에 덜 걸려요. 돈 계산은 소수 오차가 생길 수 있어서 5장 숫자 글의 방법을 써요.
• 흔한 실수: 입력값을 바꾸지 않고 +로 더하는 것, 그리고 arr[i++] = x처럼 ++를 식 안에 숨겨서 읽는 사람을 헷갈리게 하는 것이에요.