증감 연산자

• 변수의 값을 1씩 증가시키거나 감소시킴
• 변수에만 적용할 수 있음
• ++(증가 연산자) --(감소 연산자)
• ++a 전위증가 연산자: 변수를 불러오기 전에 1 증가 후 출력
• a++ 후위증가 연산자: 변수를 먼저 출력 후 1 증가

1. 값을 증가시키고 난 후, 증가한 값을 바로 사용하려면 전위형 증가 연산자를 사용하면 됩니다. ++a
2. 값을 증가시키지만, 증가 전의 기존값을 사용하려면 후위형 증가 연산자를 사용하면 됩니다. a++

<script>
let a = 10, b = 20;
console.log(`a는 ${a} 이다`); //백틱 사용시 식 계산이나 변수 작성을 하려면 ${} 작성
console.log(`a는 ${a++} 이다`);//a는 10 이다. 
// 실제값은11. 변수 a를 반환 후 +1 반환 값은 10이지만 실제 가지고 있는 값은 10.
// 변수를 먼저 출력 한 후 1 증가. 한번 더 실행해야 실제 값이 뜸.
console.log(`a는 ${a} 이다`); //a는 11이다.

console.log(`b는 ${b}이다`);
console.log(`b는 ${++b}이다`);//b는 21이다. +1 연산 후 반환하기 때문에 21
console.log(b);//b는 21이다.

console.log(`a: ${--a}`);// 변수를 반환하기 전 -1감소 후 반환. 위에서 최종값이 11이었기 때문에 10 출력
console.log(`a: ${--a}`);// 한번 더 연산 했기 때문에 9
console.log(a);//9

console.log(`b: ${b--}`);//변수를 먼저 출력 후 감소시키기 때문에 b의 최종값 21 출력 (실제로 가진 값은 20)
console.log(`b: ${b--}`);//20(실제값 19)
console.log(b);//19(실제 값)
</script>

---

예시

<script>
let a = 40;
console.log(a++);//변수를 먼저 출력 후 1 증가 40(실제값 41)
console.log(a++);//변수를 먼저 출력 후 1 증가 41(실제값 42)
console.log(a++);//변수를 먼저 출력 후 1 증가 42(실제값 43)
console.log(a);//(실제값 43)

let b = 5;
console.log(b);//(실제값 5)
console.log(++b);//변수를 불러오기 전에 1 증가 후 출력(6)
console.log(++b);//변수를 불러오기 전에 1 증가 후 출력(7)
console.log(++b);//변수를 불러오기 전에 1 증가 후 출력(8)
console.log(b);//(실제값 8)

let c = 8;
console.log(++c);//변수를 불러오기 전에 1 증가 후 출력(9)
console.log(++c);//변수를 불러오기 전에 1 증가 후 출력(10)
console.log(c++);//변수를 먼저 출력 후 1 증가 == 10(실제값 11)
console.log(c);//실제값(11)
</script>

<script>
let a = 9;
console.log(`a: ${--a}`);//8
console.log(`a: ${--a}`);//7
console.log(`a: ${a--}`);//7(실제값6)

let b = 12;
console.log(`b: ${b--}`);//12 (실제값11)
console.log(`b: ${b--}`);//11 (실제값 10)
console.log(`b: ${--b}`);//9

let c = 3;
console.log(`c: ${++c}`);//4
console.log(`c: ${c++}`);//4(실제값5)
console.log(`c: ${--c}`);//4

let d = 12;
console.log(`d: ${d--}`);//12 (실제값 11)
console.log(`d: ${d}`);//실제값 11
console.log(`d: ${d--}`);// 11(실제값 10)
console.log(`d: ${--d}`);//9
console.log(`d: ${--d}`);//8
console.log(`d: ${d}`);//8

let e = 10;
console.log(`e: ${e++}`);//10 (실제값 11)
console.log(`e: ${e++}`);//11 (실제값 12)
console.log(`e: ${e}`);//실제값 12
console.log(`e: ${e--}`);//12 (실제값 11)
console.log(`e: ${e--}`);//11(실제값 10)
console.log(`e: ${e}`);//10

let f = 20;
console.log(`f: ${--f}`);//19
console.log(`f: ${f++}`);//19(20)
console.log(`f: ${++f}`);//21
console.log(`f: ${f--}`);//21(20)
console.log(`f: ${f}`);//20
</script>

---

전위형 증가 연산자

<script>
let i = 0;
while (++i < 5) alert( i ); // 1, 2, 3, 4 출력
</script>

• ++i는 i를 먼저 증가시키고 새로운 값을 반환하기 때문에 \첫 번째 while 반복문에선 1과 5를 비교(1 < 5)하고, 얼럿 창엔 1이 출력됩니다. (이미 증가를 시키고 비교)

• 1에 이어서 2, 3, 4…이 출력됩니다. i 앞에 ++가 붙어있기 때문에 5는 항상 증가 이후의 값과 비교됩니다.

• i = 4 이후에 i의 값이 5로 증가하면 while(5 < 5)안의 비교가 실패하기 때문에 반복문은 멈춥니다. 따라서 5는 출력되지 않습니다.

---

후위형 증가 연산자

<script>                                        
let i = 0;
while (i++ < 5) alert( i ); // 1, 2, 3, 4, 5 출력
</script>       

• 후위 증가 연산자를 적용하면 i++는 i를 증가시키긴 하지만 기존 값을 반환합니다. 따라서 \첫 번째 while 반복문에선 0과 5를 비교(0 < 5)합니다. 이 점이 전위 증가 연산자와의 차이입니다.
• 그런데 alert문은 조건문과 별개의 문이므로 얼럿창엔 1이 출력됩니다. i는 이미 증가한 이후이기 때문이죠.(0은 출력되지 않음. 어쨌거나 증가 연산자를 썼기 때문에 1이 됨)
• i = 4일 때, 후위 증가 연산자(i++)를 사용하면 i는 증가하지만 기존 값인 4가 비교에 사용됩니다. 따라서 while(4 < 5)가 되고, 해당 조건은 참이므로 하단 블록이 실행되어 alert 창이 뜨게 됩니다.

---

잠깐만요 이것좀

• 전위형 증가 연산자를 사용한 경우(++i): 1, 2, 3, 4

<script>
let i = 0;
while (++i < 5) alert( i );
</script>

• 후위형 증가 연산자를 사용한 경우(i++): 1, 2, 3, 4, 5

<script>
let i = 0;
while (i++ < 5) alert( i );
</script>

증감값을 직접적으로 사용해서 컨디션을 만들기 때문에 전위, 후위증감에 따른 값이 다르다.

• 그리고 가지고 있는 실제 값이 아닌, 출력 값으로 비교한다(?)
  후위형 i++에서는 실제 값이 1 이지만, 0을 출력하기 때문에 0<5를 비교하게 된다.

---

• 전위형 증가 연산자를 사용한 경우(++i): 0, 1, 2, 3, 4

<script>
for (let i = 0; i < 5; i++) alert( i );
</script>

• 후위형 증가 연산자를 사용한 경우(i++): 0, 1, 2, 3, 4

<script>
for (let i = 0; i < 5; i++) alert( i );
</script>

i++나 ++i는 위 알고리즘의 두 번째 단계(조건 확인)와 별개로 실행됩니다. 전혀 다른 구문이기 때문이죠. 증가 연산자가 반환하는 값은 쓰이지 않기 때문에 i++와 ++i에 차이가 없습니다.(정신 건강을 위해 그냥 전위 증가 연산자를 쓰는게 좋겠다)

for문의 실행 방식

begin(초기값)을 실행함
→ (condition(조건)이 truthy이면 → body(실행문)을 실행한 후, step(증감)을 실행함)
→ (condition이 truthy이면 → body를 실행한 후, step을 실행함)
→ (condition이 truthy이면 → body를 실행한 후, step을 실행함)
→ ...