[JavaScript] num++와 ++num의 차이점 (전위연산자, 후위연산자)

let num = 1;
const x = num++ + 1;
console.log(x, num)

num = 1;
const y = ++num + 1;
console.log(y, num)

num = 1;
const z = num-- + 1;
console.log(z, num)

num = 1;
const w = --num + 1;
console.log(w, num)

퀴즈! 위의 코드를 실행했을때 x, y의 값과 z, w의 값은 같을까? 또한, 콘솔창에는 어떤 값이 출력될까?

이 글을 다 읽으면 정답을 알 수 있다!

 

먼저, 증감 연산자란 무엇일까?

증감 연산자는 전위 연산자 와 후위 연산자 로 나눌 수 있다. ++num 또는 --num 와 같이 증감 연산자가 앞에 붙으면 앞 전(前)을 사용해 전위 연산자라고 하고 num++ 또는 num-- 와 같이 증감 연산자가 뒤에 붙으면 뒤 후(後)를 사용해 후위 연산자라고 한다.

++num 과 num++ 는 num의 값을 1씩 증가시키고 --num 과 num-- 는 num의 값을 1씩 감소시킨다.

 

이런 증감연산자는 연산자가 피연산자의 어디에 위치하냐에 따라 연산의 순서 및 결과가 달라진다.

증감 연산자	설명
++num	num 값 1 증가 > 연산 진행
—num	num 값 1 감소 > 연산 진행
num++	연산 진행 > num 값 1 증가
num—	연산 진행 > num 값 1 감소

그래서 let x = 3 일 때, ++x + 4 의 값은 7이 되고 x++ + 4 의 값은 8이 되는 것이다.

 

근데 여기서 하나 의문이 생겼다. 연산자 우선순위에 의하면 후위 연산자 > 전위 연산자 > 더하기 순인데 대체 왜! 후위 연산자는 더하기보다 뒷순서로 진행될까?

답은 MDN에 정의 되어 있는 증가, 감소 연산자의 정의를 확인하면 나온다.

	설명	예제
증가 (++)	단항 연산자입니다. 피연산자에 1을 더합니다. 전위 연산자(++x)로 사용하면 피연산자에 1을 더한 값을 반환합니다. 후위 연산자(x++)로 사용한 경우 피연산자에 1을 더하기 전의 값을 반환합니다.	x가 3일 때, ++x는 x에 4를 할당한 후 4를 반환합니다. 반면 x++는 3을 먼저 반환한 후 x에 4를 할당합니다.
감소 (--)	단항 연산자입니다. 피연산자에서 1을 뺍니다. 반환 값은 증가 연산자처럼 동작합니다.	x가 3일 때, --x는 x에 2를 할당한 후 2를 반환합니다. 반면 x--는 3을 먼저 반환한 후 x에 2를 할당합니다.

전위 연산자의 경우 [할당 > 반환] 의 순으로 작동하고 후위 연산자의 경우 [반환 > 할당] 순으로 작동한다. 그래서 x++ + 4 의 경우에는 x++ 에 4를 할당한 뒤 4를 반환하기 때문에 결과값이 8이 나오고 ++x + 4 의 경우 3을 반환한 다음에 4를 할당하기 때문에 결과값이 7이 된다. (3을 이미 반환했기 때문에 ++x + 4는 3+4가 됨)

 

사실 현업에서는 증감연산자와 산술연산을 섞어서 하지도 않고 주로 후위 연산자만 단독으로 사용해서 로직을 꼭 알 필요는 없지만 그래도 알아두면 언젠가 한 번은 쓰이겠지 🤔

 

마지막으로 위의 퀴즈의 답은 아래와 같다.

let num = 1;
const x = num++ + 1;
console.log(x, num) // 2, 2

num = 1;
const y = ++num + 1;
console.log(y, num) // 3, 2

num = 1;
const z = num-- + 1;
console.log(z, num) // 2, 0

num = 1;
const w = --num + 1;
console.log(w, num) // 1, 0

 

참고 자료

http://www.tcpschool.com/javascript/js_operator_incAndDec

코딩교육 티씨피스쿨

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Expressions_and_Operators

표현식과 연산자 - JavaScript | MDN