++i 와 i++의 차이

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

let i = 0;
console.log(i++);
console.log(++i);
console.log(i++);
console.log(++i);

위의 출력 결과를 알 수 있겠는가? 불과 3개월 전의 나라면 단순하게 1, 2, 3, 4라고 답했을 지도 모르겠다. 하지만, 지금의 나는 둘의 차이를 분명하게 알고 있다.

위와 같이 ++ 혹은, --와 같이 더하기나 빼기 기호가 이어져 있는 연산자를 증감 연산자라고 하는데, 변수의 앞에 있을 경우 전위 증감 연산자, 뒤에 있을 경우 후위 증감 연산자라고 부른다.

이 증감 연산자는 말 그대로 숫자형의 변수를 1씩 증가 시키거나 1씩 감소 시킨다. 여기까지만 알고 있다면, 자연스럽게 위의 답을 1, 2, 3, 4라고 할 수 있을 것이다.

위의 답을 먼저 밝히자면 0, 2, 2, 4다. 1씩 증가하는 증감 연산자인데 어째서 1과 3이 빠지고 2씩 증가했는지 의아하게 생각할 누군가를 위해 개인적인 복습 겸 설명을 해볼까 한다.

여기서 우리는 위의 증감 연산자가 전위인가 후위인가를 주의 깊게 봐야 한다. 굳이 이름까지 다르게 붙였다는 것은 각각의 작동 방식이다 다르다는 것을 의미한다.

전위 증감 연산자(++i)

전위 증감 연산자는 변수의 값을 증가 먼저 시킨 뒤에 할당한다. 따라서 아래와 같은 경우가 있다면,

let i = 0;
console.log(++i);

출력 값은 1이 나올 것이다.

후위 증감 연산자(i++)

반면에 후위 증감 연산자는 변수의 값을 할당 먼저 한 뒤에 증가 시킨다. 따라서 아래와 같은 경우가 있다면,

let i = 0;
console.log(i++);

증가 시키기 전의 값인 0이 나올 것이다.

증감 연산자의 반복

전위 증감 연산자를 쓰던 후위 증감 연산자를 쓰던 정해진 범위 내에서 증감이 이루어지기 때문에 최초의 값이 필요하다면 후위를, 최초의 값이 필요 없다면 전위를 쓰면 된다고 생각한다. 둘의 미묘한 속도 차이가 있다고는 하는데, 몇 차례 출력을 해본 결과로는 후위 증감 연산자가 약간 빠른 것 같기도 한다. 0.01초 정도.

어쨌든 중요한 것은, 전위와 후위를 섞어 쓰지 않는 것이다. 하나를 정했다면 그 프로젝트에서는 끝까지 그걸로 가야만 한다. 그래야 평화로울 것이다.