JavaScript에서 변수 값을 1씩 늘릴 때 사용하는 증가 연산자(++)는 작성 위치에 따라 두 가지 방식으로 나뉩니다. 겉보기에는 같아 보이지만, 값을 반환하는 시점이 다르기 때문에 실무에서 결과가 크게 달라질 수 있습니다.
전위 증가 연산자(++a)
++a는 증가가 먼저 일어난 후 그 값을 반환합니다. ++가 피연산자 앞에 위치하기 때문에 '전위 증가 연산자(pre-increment operator)'라고 부릅니다.
예를 들어 a = 10;일 때 ++a를 실행하면 a가 먼저 11로 증가한 뒤, 표현식 전체의 값도 11이 됩니다.
후위 증가 연산자(a++)
a++는 현재 값을 먼저 반환한 후 증가합니다. ++가 피연산자 뒤에 위치하기 때문에 '후위 증가 연산자(post-increment operator)'라고 부릅니다.
예를 들어 b = 20;일 때 b++를 실행하면 표현식의 값은 일단 20으로 평가되고, 그 이후에 b가 21로 증가합니다.
예제 코드
다음 코드를 실행하면 i++와 ++i의 동작 차이를 직접 확인할 수 있습니다.
<html>
<body>
<script>
var a = 10;
var b = 20;
// 전위 증가 연산자: 증가 후 값 반환
a = ++a;
document.write("++a = " + a);
// 후위 증가 연산자: 기존 값 반환 후 증가
b = b++;
document.write("<br>b++ = " + b);
</script>
</body>
</html>
실행 결과
++a = 11 b++ = 20
++a는 증가된 값인 11이 그대로 대입되지만, b = b++는 증가 전 값인 20이 반환된 후 다시 b에 대입되므로 b는 결국 20으로 유지됩니다. 이처럼 단독으로 사용할 때는 차이가 없어 보이지만, 대입문이나 반복문 안에서 사용할 때는 결과가 달라지므로 주의해야 합니다.