JavaScript 입문 : i++, i+=, i=i+1 (1)

 

지난 시간 while 문에 대한 내용을 공부해 봤습니다. 아주 오래전 코딩이라는 개념이 궁금해서 조금 공부해 볼 때 반복문을 대충 눈으로 때우고 뭘 할려고 하니 전혀 진도도 안나가고 그대로 흥미를 잃은 기억이 있네요. 그래서 이번 만큼은 제대로 이해하지 못하면 1년이 걸리더라도 해보자하는 마음으로 가보고자 합니다. 

 

많은 고수분들이 반복문이 프로그래밍의 중요한 부분이라고 하면서 노트에 필기를 하면서 하던지 처음에 원리를 이해하라고 조언을 많이 해주네요...

 

▒ ++, +=, i+1 의 차이점

 

사실 이 개념을 이해하지 않으면 나중에 엄청 헤멜것 같아 한번 정리 시도롤 해봅니다. 

 

지난시간 사실 1씩 중가할 때 다음 내용이 같다고 이야기 하였습니다. 

 

i ++과 i +=과 i = i + 1

 

그런데 이것 저것 해보다 내용이 조금 다른 결과가 나와서 한참 고민하고 원리를 분석할 필요성을 느꼈습니다. 이 글이 얼마나 오래 걸릴지는 모르지만 이 차이점을 모르고 넘어간다면 역시 헤멜것 같습니다. 여기저기 문한들을 참고해 나만의 방식으로 정리핧 필요성을 느끼네요.

 

일단 여러 사이트를 참고해 봤는데 이해가 안가는 것도 있고 대충 느낌이 오는 것도 있었습니다. 다음과 같이 잠정 결론을 내리고 향후 진행하면서 계속 증명해 나갈까 합니다. 

 

▶ 의미

 

 i++의 i는 i의 값이 오른쪽으로 1씩 증가하는 값이고 등호(=)가 들어가는 경우는 오른쪽부타 계산이 되어 왼쪽으로 결과값이 계산되는 형태입니다. 즉, i = i + 1은 오른쪽에서 계산되어 왼쪽 i에 결과값을 반영한다는 이야기입니다.  

 

말로 설명할려니 더 헷갈릴수 있습니다. 

 

직접 1 ~ 5까지 while문을 이용히여 확인해 보겠습니다. 다음 while 문의 출력은 어떻게 나올까요?

 

상기 ①번과 ②번이 계산되어 ③번으로 넘어갑니다. ①번의 i는 처음 시작 0의 값이 내려오고 그 값이  ②번의 1과 더해지면서 첫번째 console.log(i)의 값인 ③번의 츨력은 1이 됩니다. 이런식으로 계산을 하면 i < 5보다 작은 4까지 오면 최종 값은 5가 표현이 됩니다. 

 

결과값을 보겠습니다. 

 

 

이는 다음 그림과 같은 원리입니다. 하늘색 i는 0에서 5보다 작은 i값이 대입이되고 노란색 i는 출력되는 결과값을 말합니다. 

 

그럼 i++도 같이 보겠습니다. 

 

 

그렇다면 i+=의 사용법은 어떨까요? 자체로는 에러가 나고 다음과 같이 사용해야 합니다. 

 

자 결과값은 어떤 경우라도 1, 2, 3, 4, 5가 나왔습니다. 그렇다면 모두 똑같은 의미가 아닐까 생각이 들 수도 있습니다. 같은 원리라면 굳이 저렇게 기호를 다르게 만들 필요가 없었을 겁니다. 

 

---

▒ i++과 i = i +1의 흐름

 

글로 설명하기 참 어렵네요. 우선 다음과 같은 흐름을 가지고 있다고 보면 되겠습니다. 

 

① 프로그램은 위에서 아래로 내려가면서 각 줄을 인식한다.
② 등호(=)가 있는 줄은 오른쪽부터 계산이 되어 왼쪽으로 결과값을 나타낸다. (i = i +1의 경우 오른쪽 계산이 먼저된다.)

③ i++ 같은 경우 등호(=)가 없기에 i부터 변수값이 적용되고 1씩 증가하는 명령어이다 .

 

다음 그림을 보고 이해하길 바랍니다. 

 

파란색 화살표의 방향은 기본적 프로그래밍을 인식하는 순서이며, 빨간색 화살표의 방향은 계산이 되는 순서입니다. 

 

 

이 그림을 기준으로 다음 시간에 하나씩 숫자가 반영이 되는 원리를 보면서 이해하도록 하겠습니다.