[JavaScript] i++ 와 ++i 의 차이

Javascript에서 i라는 index 값을 증가시키는 operator로 종종 i++가 사용되곤 한다. i += 1 라는 동일한 표현식보다 간결해서 주로 반복문 등의 제어문에서 많이 사용한다. 이번에는 이 ++ 연산자의 정체가 무엇인지, 그리고 비슷하거나 헷갈릴 만한 증가/감소 연산자들을 반복문 예시를 통해 비교해보고자 한다. 

for (let i = 0; i < 5; i++) { 
  console.log( i );
} // 0, 1, 2, 3, 4

Javascript의 반복문은 일반적으로 이렇게 생겼다. i는 초기값인 0부터 시작해서, 본문을 실행하고 나자마자 ++ 연산자에 의해 값이 1씩 증가하게 된다. alert 출력값은 0, 1, 2, 3, 4가 된다. 

 

이번엔 좀더 간결한 while문을 살펴보자.

let i = 0;
while (++i < 5) console.log( i );
// 1, 2, 3, 4

while문의 조건절에 ++i < 5 라는 표현식이 들어왔다. ++i 가 값을 증가시키는 역할을 한다는 건 알겠는데, 실행하면 어떤 값이 리턴되는지는 조금 헷갈린다. MDN에 따르면, 변수 앞에 ++가 붙는 것을 Prefix increment라고 한다. (한국어로는 전위형 증가 연산자...그냥 영어로 쓰자). Prefix increment를 사용하면, 1. 인덱스 값을 증가시키고, 2. 증가된 뒤 새로운 값 을 리턴한다고 한다. 따라서 첫 번째 condition으로 1과 5를 비교(1 < 5)하고, 얼럿 창엔 1이 출력된다. 이어서 2, 3, 4…이 출력된다. i = 5 가 될 경우 while(5 < 5) 안의 비교가 false가 되기 때문에 반복문은 멈추고, 5는 출력되지 않는다.

 

++ 연산자가 뒤에 붙은 형태의 while문도 다음과 같이 만들어볼 수 있다. 

let i = 0;
while (i++ < 5) console.log( i );
// 1, 2, 3, 4, 5

이러한 형태의 increment방식은 Postfix increment라고 불린다. 이 Postfix increment를 사용하면, 1. 인덱스 값을 증가시키고, 2. 증가되기 전의 기존 값 을 리턴하게 된다. 따라서 해당 while문 안의 condition은 (0 < 5) 부터 실행되게 된다. 이 점이 ++i와 i++가 다른 점이다. 본문의 console.log가 실행되는 시점에서는 i 가 이미 증가한 이후이기 때문에, 콘솔에는 1부터 출력되게 된다. 이후 2, 3, 4…가 이어서 출력된다. i = 4가 되는 시점에서는 i++가 실행되더라도 조건식에서는 기존 값인 4가 비교에 사용된다. 따라서 while(4 < 5)가 되고, 해당 조건은 참이므로 while 본문의 console.log 함수가 실행되게 된다. 따라서 마지막으로 출력되는 값은 5가 된다. 

 

증가/감소 연산자 정리

증가 연산자에는 크게 Postfix increment와 Prefix increment 두 종류가 있다.

• Postfix Increment (i++): 값을 증가시키고, 증가되기 전의 기존 값을 return 한다.
• Prefix Increment (++i): 값을 증가시키고, 증가된 후의 새로운 값을 return 한다.

마찬가지로 감소 연산자도 있다. 증가 연산자와 동일한 원리로, Postfix decrement와 Prefix decrement 두 종류가 있다.

• Postfix decrement (i--): 값을 감소시키고, 감소되기 전의 기존 값을 return한다.
• Prefix decrement (—-i): 값을 감소시키고, 감소된 후의 새로운 값을 return 한다.

단순히 값을 증가/감소시키는 연산만을 사용한다면 신경쓸 게 많지 않지만, 값을 리턴해서 새로운 표현식에 사용해야 한다면 어떤 시점에 어떤 값을 리턴하는지에 유의할 필요가 있다. 사소한 개념이지만 짚고 넘어가서 앞으로는 헷갈리지 말자! 

 

Reference

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators

https://javascript.info/while-for