[JS] 전위 연산자, 후위 연산자

증감 연산자는 연산자가 어디 위치했는가에 따라 전위 연산자(prefix operator) 와 후위 연산자(postfix operator)로 구분됨

 

1. 후위 연산자

//postfix increment
num++;

- 연산자가 변수 뒤에 위치

 

[예시 코드]

let x = 3;
let y = x++;

console.log(`x: ${x}, y: ${y}`);   // x: 4, y: 3

나도 x: 3, y: 4가 출력 될 거라 생각함 (결과는 x: 4, y: 3)

→ 후위 연산자는 변수를 먼저 할당(대입) 후 연산을 수행하기 때문!!

따라서,

1. 먼저 x 를 y 에 대입 (x=3, y=3)

2. x 에 +1 증가 (x=4, y=3) 

let x = 3;
let y;     //이 때 y는 undefined

y = x;     //1. 변수를 먼저 대입 (x=3, y=3)
x + 1;     //2. 연산 수행 (x=4, y=3)
console.log(`x:${x}, y:${y}`) // x: 4, y: 3

 

2. 전위 연산자

// Prefix increment
++num;

- 연산자가 변수의 앞에 위치

 

[예시 코드]

let x = 3;
let y = ++x;

console.log(`x:${x}, y:${y}`); // x:4, y:4

- 후위 연산자와 반대로 연산 먼저 수행하고 뒤에 변수를 할당(대입)

따라서, 

1. 먼저 x 를 +1 증가 (x= 4)

2. 증가된 x 를 y 에 대입 (x=4, y=4)

let x = 3;
let y;       //y는 undefined

x = x + 1;   //연산 수행 (x=4)
y = x;       //대입(x=4, y=4)

 

하지만 증감연산자는 ESLint에서 썩 반기지 않음

이 때, ESLint 는 코딩 컨벤션에 위배되는 코드, 안티 패턴을 자동 검출하는 도구 (올바른 코딩습관 갖도록 도움)

++ and -- operators are subject to automatic semicolon insertion, differences in whitespace can change semantics of source code.
출처: no-plusplus | eslint

증감 연산자는 자동으로 세미콜론(;) 이 추가되는 대상이 되어

1. 예상치 못하게 코드 흐름 변경

2. 의도하지 않은 값의 증가, 감소 일으킴

3. 애플리케이션 내 예상치 못한 에러 발생 가능성 존재

 

따라서, 증감 연산자 대안책으로 복합 대입 연산자 제안

복합 대입 연산자
1. += : Addition assignment
2. -= : Subtraction assignment

+=, -= 사용시 예상치 못한 값 증가, 감소 현상을 막을 수 있다고 함

 

다음 정리는 복합대입연산자!