04. 여러 건을 묶고 반복 처리하기
행마다 같은 계산을 되풀이하는 일을 맡깁니다.
- 배열의 첫 위치가 0임을 설명한다
- for...of로 값을 하나씩 읽는다
- 누적 변수로 합계를 계산한다
01. 배열은 순서가 있는 목록입니다
월별 실적이나 부서명처럼 여러 값을 한 이름으로 묶는 자료를 배열이라고 합니다. 대괄호 [ ] 안에 쉼표로 구분해 씁니다. const costs = [20, 30, 50];은 세 지출을 가진 목록입니다. 위치 번호인 인덱스는 0부터 시작하므로 첫 값은 costs[0], 마지막 값은 costs[2]입니다. 값의 개수는 costs.length로 읽습니다.
목록에서 한 건 읽기
const teams = ["기획", "전략", "관리"];
console.log(teams[0]);
console.log(teams.length);
for (const team of teams) {
console.log(team);
}예상 출력 확인
기획 3 기획 전략 관리
배열을 const로 선언했다는 것은 costs라는 변수에 다른 배열을 다시 대입하지 않겠다는 뜻입니다. 배열 안의 값을 바꾸는 것은 별도 동작입니다. 예를 들어 costs[0] = 25;는 가능합니다. 지금은 자료를 바꾸기보다 하나씩 읽어 계산하는 데 집중합니다.
02. for...of는 목록에서 하나씩 꺼내는 반복입니다
for (const cost of costs) { ... }를 “costs 안의 각 값을 cost라고 부르면서, 중괄호 안을 한 번씩 실행한다”라고 읽습니다. 첫 반복에서 cost는 20, 다음에는 30, 마지막에는 50입니다. cost는 목록 전체가 아니라 그때 읽은 값 하나입니다. 각 반복마다 새로 묶이는 값이므로 const를 써도 됩니다.
여러 지출의 합계
const costs = [20, 30, 50];
let total = 0;
for (const cost of costs) {
total = total + cost;
console.log(total);
}
console.log("최종 합계:", total);예상 출력 확인
20 50 100 최종 합계: 100
| 단계 | 읽은 값 cost | 계산 전 total | 계산 후 total |
|---|---|---|---|
| 시작 | 아직 없음 | — | 0 |
| 첫 번째 | 20 | 0 | 20 |
| 두 번째 | 30 | 20 | 50 |
| 세 번째 | 50 | 50 | 100 |
03. 누적 변수는 반복 밖에서 시작합니다
합계 total은 읽을 때마다 바뀌므로 let을 사용합니다. 처음 값을 0으로 정하는 줄은 반복문 바깥에 둡니다. 안에 두면 이전 합계를 매번 잊게 됩니다. total = total + cost에서 오른쪽은 이전 합계와 이번 값을 더하고 왼쪽은 새 합계를 저장합니다. 이 한 줄이 스프레드시트의 여러 행을 합산하는 일을 맡습니다.
빈 배열 []이라면 반복은 한 번도 실행되지 않고 total은 0입니다. 합계에는 자연스럽지만 평균을 구한다면 개수가 0인지 먼저 확인해야 합니다. “자료 없음”과 “실적이 실제로 0”도 업무에서는 다를 수 있으므로 표시 규칙을 정합니다.
04. 합계와 개수는 서로 다른 질문입니다
“80 이상인 실적의 합계”는 해당 값을 더합니다. “80 이상인 달의 개수”는 해당할 때마다 1을 더합니다. 조건문을 반복 안에 넣으면 기준에 맞는 항목만 처리할 수 있습니다. 8시간 수업에서는 합계까지 필수이고, 조건을 결합해 개수를 세는 활동은 선택 문제입니다.
map, filter, reduce를 만나도 먼저 for...of로 같은 작업을 설명해 보세요. 이번 수업의 목표는 짧은 코드를 많이 아는 것보다, 매번 어떤 값이 바뀌는지 따라가는 것입니다.직접 해 보고 제출하기
A·B 필수 활동부터 수행하세요. 실습창에서 수정·실행·답안 제출을 모두 할 수 있습니다.
- W04-A · 목록의 위치와 개수 필수 · 예상 · 5분
- W04-B · 누적 합계 완성 필수 · 수정 · 10분
- W04-C · 기준을 넘은 달 세기 선택 · 적용 · 15분