더하기 할당(+=) 연산자란?
자바스크립트에서 더하기 할당(+=) 연산자는 기존 변수의 값에 새로운 값을 더한 뒤, 그 결과를 다시 동일한 변수에 저장하는 복합 할당 연산자입니다. tot = tot + a[i]와 tot += a[i]는 완전히 동일하게 동작하지만, 후자가 코드를 훨씬 간결하게 만들어 줍니다.
짧은 코드에서는 그 차이가 크게 체감되지 않을 수 있지만, 반복문이나 긴 로직에서는 코드의 가독성과 유지보수성을 높이는 데 큰 도움이 되므로 그 활용도를 결코 무시할 수 없습니다.
기본 문법
변수 += 값;
// 아래 코드와 동일하게 동작합니다.
변수 = 변수 + 값;
예제: 배열 요소의 합 구하기
다음 예제는 배열에 담긴 숫자들을 += 연산자로 모두 더하는 코드입니다. 반복문 안에서 누적 합계를 계산할 때 이 연산자가 얼마나 유용한지 확인할 수 있습니다.
<html>
<body>
<script>
var tot = 0;
var a = [1, 45, 78, 9, 78, 40];
for (var i = 0; i < a.length; i++) {
tot += a[i];
}
document.write(tot);
</script>
</body>
</html>
실행 결과
251
동작 원리
반복문이 한 바퀴씩 진행되면서 tot 변수에 배열의 요소가 차례대로 누적됩니다.
- 1회전: tot = 0 + 1 → 1
- 2회전: tot = 1 + 45 → 46
- 3회전: tot = 46 + 78 → 124
- 4회전: tot = 124 + 9 → 133
- 5회전: tot = 133 + 78 → 211
- 6회전: tot = 211 + 40 → 251
최종적으로 251이 화면에 출력됩니다.
참고: 문자열 연결에도 활용 가능
+= 연산자는 숫자뿐만 아니라 문자열을 이어 붙일 때도 매우 자주 사용됩니다.
var msg = "안녕하세요, ";
msg += "자바스크립트!";
document.write(msg); // "안녕하세요, 자바스크립트!" 출력
함께 알아두면 좋은 복합 할당 연산자
| 연산자 | 의미 | 동등한 표현 |
|---|---|---|
| += | 더하기 후 할당 | x += 5 → x = x + 5 |
| -= | 빼기 후 할당 | x -= 5 → x = x - 5 |
| *= | 곱하기 후 할당 | x *= 5 → x = x * 5 |
| /= | 나누기 후 할당 | x /= 5 → x = x / 5 |
| %= | 나머지 후 할당 | x %= 5 → x = x % 5 |
정리
+= 연산자는 단순히 코드 길이를 줄여주는 것을 넘어, 누적 계산이나 문자열 조립처럼 반복적으로 값을 갱신해야 하는 상황에서 코드의 의도를 명확하게 드러내 주는 필수적인 연산자입니다. 실무에서도 가장 널리 쓰이는 패턴 중 하나이므로 반드시 익혀 두시기 바랍니다.