자바스크립트의 증가(++) 연산자와 감소(--) 연산자는 반복문이나 카운터를 간결하게 표현할 수 있어 널리 사용되어 왔습니다. 하지만 이 두 연산자는 전위(prefix)와 후위(postfix)의 동작 차이, 그리고 세미콜론 자동 삽입(ASI) 규칙과의 상호작용 때문에 예상치 못한 결과를 초래할 수 있습니다. 그래서 많은 코딩 컨벤션에서는 증감 연산자 대신 더 명확한 표현식을 사용하도록 권장합니다.
1. 대입문에서 생기는 혼란
증감 연산자를 다른 변수에 대입하는 문장에서 사용하면 값이 언제 증가하는지에 따라 결과가 완전히 달라집니다.
b = ++a: a를 먼저 1 증가시킨 뒤, 그 값을 b에 대입합니다.c = a++: a의 현재 값을 c에 먼저 대입한 뒤, a를 1 증가시킵니다.
예제 코드
<html>
<body>
<script>
var a = 5;
var b = ++a; // a = 6, b = 6
var c = a++; // c = 6, a = 7
var d = ++c; // c = 7, d = 7
document.write(a);
document.write("\r" + b);
document.write("\r" + c);
document.write("\r" + d);
</script>
</body>
</html>
실행 결과
7 6 7 7
같은 ++ 연산자라도 변수 앞에 있느냐 뒤에 있느냐에 따라 대입되는 값이 달라집니다. 코드를 읽는 사람은 매번 전위·후위 여부를 신경 써야 하고, 실수로 인한 버그 가능성도 그만큼 커집니다.
2. 공백과 줄바꿈으로 인한 예상치 못한 동작
연산자와 변수 사이의 공백, 특히 줄바꿈은 자바스크립트의 세미콜론 자동 삽입(Automatic Semicolon Insertion, ASI) 규칙과 얽혀 심각한 오류를 만들 수 있습니다.
a = b = c = 1; ++a; b--; c;
예를 들어 다음과 같이 작성했다고 가정해 보겠습니다.
a ++ b
개발자의 의도는 "a 한 줄, 그다음 줄에 ++b"였겠지만, 자바스크립트 엔진은 이 코드를 a++; b;로 해석합니다. 줄 끝에 세미콜론이 없으면 다음 줄의 ++가 앞 표현식에 그대로 붙어 버리기 때문입니다. 이러한 모호함이 바로 증감 연산자를 지양해야 하는 대표적인 이유입니다.
더 안전한 대안
Airbnb 자바스크립트 스타일 가이드나 ESLint의 no-plusplus 규칙처럼, 많은 개발 팀에서는 증감 연산자 대신 다음과 같은 복합 대입 연산자를 사용할 것을 권장합니다.
a += 1; // 증가 a -= 1; // 감소
이렇게 작성하면 값이 변경되는 시점이 명확해지고, 전위·후위 문제나 ASI로 인한 잘못된 해석을 원천적으로 피할 수 있습니다. 결국 증감 연산자를 피하는 것은 단순한 취향의 문제가 아니라, 코드의 명확성과 예측 가능성을 높이기 위한 실질적인 선택입니다.