[JavaScript] 증감 연산자(++, --), 전위 연산자, 후위 연산자

 

• 증감 연산자란?
• 증가 연산자 (Increment ++)
• 감소 연산자 (Decrement --)
• 전위 연산자 (prefix operator)
• 후위 연산자 (postfix operator)

---

 

이번에는 JavaScript의 증감 연산자(Increment, Decrement)와,

 

전위 연산자(prefix operator), 후위 연산자(postfix operator)에 대해 알아볼 것이다.

 

---

- 증감 연산자란?

 

증감 연산자는 증가 연산자(++)와 감소 연산자(--)로 나뉜다.

 

증가 연산자(Increment)는 어떠한 숫자형 변수의 값을 1을 증가시키는 것을 의미하고,

 

감소 연산자(Decrement)는 어떠한 숫자형 변수의 값을 1을 감소시키는 것을 의미한다.

 

---

- 증가 연산자 (Increment ++)

let number = 1;
number++;

console.log(number);    // 2

 

이 코드에서는 변수 number에 증가 연산자(Increment ++)가 사용되었다.

 

결과값으로는 number의 값이 1이 증가된, 2가 출력된다.

 

---

- 감소 연산자 (Decrement --)

let number = 1;
number--;

console.log(number);	// 0

 

이 코드에서는 변수 number에 감소 연산자(Decrement --)가 사용되었다.

 

결과값으로는 number의 값이 1이 감소된, 0이 출력된다.

 

---

 

이제 전위 연산자 (prefix operator)와 후위 연산자 (postfix operator)에 대해 알아보자.

 

증감 연산자는 연산자가 어느 곳에 위치했느냐에 따라 전위 연산자, 후위 연산자로 구분된다.

 

이 개념들은 처음 봤을 때 잘 이해가 되지 않았다. 예시 코드와 함께 자세히 알아보자.

 

 

---

 

 

- 전위 연산자 (prefix operator)

 

전위 연산자는 연산자가 변수의 앞에 위치한 것을 말한다.

 

아래는 전위 연산자를 사용한 예시 코드이다.

let x = 5;
let y = ++x;	// 전위 연산자(prefix operator)

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

 

전위 연산자는 어떻게 계산되는 것일까?

전위 연산자(prefix operator)

 

(클릭 시 그림 출처로 이동합니다.)

 

 

전위 연산자는 연산을 먼저 수행한 후에 변수를 할당하게 된다.

 

계산 방법은 아래의 코드와 같다.

let x = 5;
let y;

x = x + 1;	// 1번, 현재 x=6, y=5
y = x;		// 2번, 이 시점에서 x=6, y=6

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

 

---

- 후위 연산자 (postfix operator)

 

후위 연산자는 연산자가 변수의 뒤에 위치한 것을 말한다.

 

아래는 후위 연산자를 사용한 예시 코드이다.

let x = 5;
let y = x++;

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

 

후위 연산자는 어떻게 계산되는 것일까?

후위 연산자(postfix operator)

 

(클릭 시 그림 출처로 이동합니다.)

 

 

후위 연산자는 변수를 먼저 할당한 후 연산을 수행한다.

 

계산 방법은 아래의 코드와 같다.

let x = 5;
let y;

y = x;		// 1번, 현재는 x=5, y=5
x = x + 1;	// 2번, 이 시점에서 x=6, y=5
console.log(`x:${x}, y:${y}`);	// x:6, y:5

 

---

이미지 출처: https://qiita.com/seicode/items/67a81a95f50eb9c77634#%E5%A4%89%E6%95%B0%E3%81%AE%E3%81%82%E3%81%A8%E3%81%AB%E3%81%97%E3%81%A6%E4%BB%A3%E5%85%A5