JavaScript에서 증감 연산자(++, --)를 피해야 하는 이유
JavaScript의 증가(++) 및 감소(--) 연산자는 코드를 짧게 작성할 수 있다는 장점이 있지만, 예상치 못한 결과를 초래할 수 있어 사용을 피하는 것이 좋습니다. 주요 이유를 살펴보겠습니다.
1. 대입문에서 혼동을 일으킬 수 있음
전위 연산자(++a)와 후위 연산자(a++)는 값이 대입되는 시점이 다르기 때문에, 대입문에서 사용하면 의도하지 않은 결과가 발생할 수 있습니다.
예제
<html>
<body>
<script>
var a = 5;
var b = ++a; // a를 먼저 1 증가시킨 후 b에 대입 → a = 6, b = 6
var c = a++; // 현재 a 값을 c에 대입한 후 a를 1 증가 → c = 6, a = 7
var d = ++c; // c를 먼저 1 증가시킨 후 d에 대입 → c = 7, d = 7
document.write(a); // 7
document.write("\r" + b); // 6
document.write("\r" + c); // 7
document.write("\r" + d); // 7
</script>
</body>
</html>출력 결과
7 6 7 7
위 예제에서 볼 수 있듯이, 전위 연산자(++a)는 값을 먼저 증가시킨 후 대입하고, 후위 연산자(a++)는 먼저 대입한 후 값을 증가시킵니다. 이러한 미묘한 차이는 코드를 읽는 사람에게 혼란을 주고, 잠재적인 버그의 원인이 됩니다.
2. 연산자와 변수 사이의 공백 문제
연산자와 변수 사이의 공백이나 줄바꿈 역시 예상치 못한 결과를 초래할 수 있습니다. 특히 JavaScript의 자동 세미콜론 삽입(ASI) 규칙과 결합되면 문제가 더욱 심각해집니다.
a = b = c = 1;
++a;
b--;
c;예를 들어 다음과 같이 줄을 바꿔 작성하면:
a
++
bJavaScript 엔진은 이를 a; ++b;로 해석합니다. 개발자가 의도한 a++; b;와 전혀 다른 동작이기 때문에, 찾기 어려운 심각한 버그로 이어질 수 있습니다.
대안: += 및 -= 연산자 사용
이러한 이유로 Airbnb, Google 등 주요 JavaScript 스타일 가이드에서는 증감 연산자 대신 다음과 같이 작성할 것을 권장합니다.
a += 1; // ++a 또는 a++ 대신
a -= 1; // --a 또는 a-- 대신이 방식은 연산 순서가 명확하고 코드의 의도를 쉽게 파악할 수 있어, 가독성과 유지보수성을 크게 향상시킵니다.