`for` 반복문의 기초: `i` 변수와 배열 반복 이해하기

`var i = 0`은 무엇인가요?

var i = 0에서 i는 여러분이 만든 변수입니다. 특별한 의미는 없고, 단지 "index(인덱스)"의 약자로 관습적으로 많이 사용할 뿐입니다. 실제로는 어떤 이름이든 사용 가능합니다:

// 모두 동일한 역할을 합니다
for (var i = 0; i < 5; i++) { }
for (var count = 0; count < 5; count++) { }
for (var banana = 0; banana < 5; banana++) { }

왜 `for` 반복문을 쓰나요?

반복문은 같은 작업을 여러 번 반복할 때 사용합니다. 배열의 각 항목마다 같은 작업을 할 때 특히 유용합니다.

반복문 없이 배열 처리하기

var days = [30, 20, 50, 10, 30]; // 5일간의 운동 시간
var totalTime = 0;

// 반복문 없이는 이렇게 해야 함
totalTime = totalTime + days[0]; // 첫째 날
totalTime = totalTime + days[1]; // 둘째 날
totalTime = totalTime + days[2]; // 셋째 날 
totalTime = totalTime + days[3]; // 넷째 날
totalTime = totalTime + days[4]; // 다섯째 날

반복문으로 같은 작업 하기

var days = [30, 20, 50, 10, 30]; // 5일간의 운동 시간
var totalTime = 0;

// 위와 동일한 작업을 반복문으로 처리
for (var i = 0; i < 5; i++) {
  totalTime = totalTime + days[i];
}

`for` 반복문 작동 방식 단계별 설명

for (var i = 0; i < days.length; i++) {
  totalTime += days[i];
}

이 코드가 어떻게 작동하는지 단계별로 설명해드리겠습니다:

1. 반복문 시작 전:

var i = 0: 변수 i를 0으로 초기화합니다
totalTime = 0: 합계를 저장할 변수도 0으로 초기화되어 있습니다

2. 첫 번째 반복:

i는 0입니다
i < days.length를 검사합니다 (0 < 5? 네, 참입니다)
totalTime += days[i]를 실행합니다:
- days[0]은 30이므로, totalTime = 0 + 30 = 30이 됩니다
i++를 실행하여 i를 1로 증가시킵니다

3. 두 번째 반복:

i는 1입니다
i < days.length를 검사합니다 (1 < 5? 네, 참입니다)
totalTime += days[i]를 실행합니다:
- days[1]은 20이므로, totalTime = 30 + 20 = 50이 됩니다
i++를 실행하여 i를 2로 증가시킵니다

4. 세 번째 반복:

i는 2입니다
i < days.length를 검사합니다 (2 < 5? 네, 참입니다)
totalTime += days[i]를 실행합니다:
- days[2]는 50이므로, totalTime = 50 + 50 = 100이 됩니다
i++를 실행하여 i를 3으로 증가시킵니다

5. 네 번째 반복:

i는 3입니다
i < days.length를 검사합니다 (3 < 5? 네, 참입니다)
totalTime += days[i]를 실행합니다:
- days[3]은 10이므로, totalTime = 100 + 10 = 110이 됩니다
i++를 실행하여 i를 4로 증가시킵니다

6. 다섯 번째 반복:

i는 4입니다
i < days.length를 검사합니다 (4 < 5? 네, 참입니다)
totalTime += days[i]를 실행합니다:
- days[4]는 30이므로, totalTime = 110 + 30 = 140이 됩니다
i++를 실행하여 i를 5로 증가시킵니다

7. 여섯 번째 시도:

i는 5입니다
i < days.length를 검사합니다 (5 < 5? 아니요, 거짓입니다)
반복문이 종료됩니다
totalTime의 최종 값은 140입니다

이해를 위한 시각화

이 과정을 테이블로 시각화하면:

반복	i 값	days[i]	totalTime에 더해지는 값	계산	totalTime 결과
시작 전	0	-	-	-	0
1번째	0	days[0] = 30	30	0 + 30	30
2번째	1	days[1] = 20	20	30 + 20	50
3번째	2	days[2] = 50	50	50 + 50	100
4번째	3	days[3] = 10	10	100 + 10	110
5번째	4	days[4] = 30	30	110 + 30	140
종료	5	-	-	-	140 (최종값)

요약: 반복문을 생각하는 방법

i는 그냥 위치를 가리키는 임의의 변수이름입니다
i = 0은 첫 번째 위치부터 시작한다는 의미입니다 (배열은 0부터 시작)
i < days.length는 배열 길이(요소 개수)보다 작은 동안 계속한다는 의미입니다
i++는 각 반복 후 다음 위치(+1)로 이동한다는 의미입니다
days[i]는 현재 위치의 값을 가져온다는 의미입니다

[JS] for 반복문의 기초: `i` 변수와 배열 반복 이해하기