4.1.1 `for`문 - 정해진 횟수만큼 반복하기

📘 4.1.1 for문 - 정해진 횟수만큼 반복하기

여러분, 안녕하세요.

제가 어릴 때 할머니는 매일 아침 마당에 곡식을 말리셨습니다. 쌀 한 톨 한 톨을 정성스럽게 골라내시는 모습을 보면서, 같은 동작을 수백 번 반복하시는 할머니의 인내와 정확성에 감탄했던 기억이 납니다.

프로그래밍에서도 때로는 같은 작업을 여러 번 반복해야 할 때가 있습니다. 하지만 우리에게는 할머니처럼 그런 인내심을 컴퓨터에게 맡길 수 있는 도구가 있어요. 바로 for문입니다.

for문은 마치 성실한 조수처럼, 우리가 지시한 일을 정확한 횟수만큼 묵묵히 수행해줍니다. 실수하지 않고, 지치지 않고, 정해진 만큼만 정확히 반복해주죠.

🧠 새로운 단어들과 친해지기

오늘 만날 개념들을 차근차근 살펴보겠습니다.

단어	설명
for문	정해진 횟수만큼 같은 작업을 자동으로 반복해주는 명령문이에요.
반복문	같은 코드를 여러 번 실행하는 프로그래밍 문법을 말해요.
카운터 변수	현재 몇 번째 반복인지를 세어주는 특별한 변수예요.
시작값	반복을 시작할 때 카운터 변수가 가지는 첫 번째 값이에요.
조건식	반복을 계속 할지 멈출지를 결정하는 조건이에요.
증감식	각 반복이 끝날 때마다 카운터 변수를 어떻게 변화시킬지 정하는 규칙이에요.

✨ for문이 뭔지 알아보기

생각해보세요. 우리가 계단을 오를 때는 어떻게 하나요? 첫 번째 계단, 두 번째 계단, 세 번째 계단... 이렇게 하나씩 차근차근 올라가죠. 목적지에 도착할 때까지 같은 동작을 반복합니다.

for문도 이와 똑같습니다. 정해진 시작점에서 출발해서, 정해진 목적지까지, 정해진 방식으로 한 걸음씩 나아가는 것이죠.

마치 도서관 사서 같은 존재

제가 다니던 동네 도서관에는 정말 꼼꼼한 사서 아주머니가 계셨어요. 새로운 책들이 들어오면, 한 권씩 차례대로 등록하시는 모습이 인상깊었습니다.

사서 아주머니의 체계적인 일처리:

• "오늘 새 책이 50권 들어왔네요"
• "1번부터 시작해서 50번까지 등록하겠습니다"
• 책 한 권을 집어 들고: "1번 책 등록 완료"
• 다음 책으로: "2번 책 등록 완료"
• 이렇게 계속해서: "50번 책 등록 완료!"
• 마지막에: "모든 책 등록이 끝났습니다"

절대 빠뜨리는 일이 없으시고, 정확히 50권을 모두 등록하셨어요. for문도 바로 이런 사서 아주머니 같은 역할을 합니다.

🎯 왜 for문을 사용해야 할까요?

생각해보세요. 만약 "안녕하세요"를 100번 출력하고 싶다면,

console.log("안녕하세요");
console.log("안녕하세요");
console.log("안녕하세요");
// ... 97번 더 써야 해요!

이런 식으로 100줄을 다 써야 할까요? 너무 비효율적이고, 실수하기도 쉽겠죠.

for문을 사용하는 이유:

첫째, 효율성 때문입니다. 한 번의 설정으로 수백 번, 수천 번의 반복 작업을 처리할 수 있어요.

둘째, 정확성 때문입니다. 사람은 실수할 수 있지만, for문은 정확히 지정된 횟수만큼만 반복합니다.

셋째, 유지보수의 편리함 때문입니다. 반복 횟수를 바꾸고 싶다면 한 곳만 수정하면 돼요.

⚙️ for문 기본 사용법

for문의 구조는 마치 요리 레시피처럼 정해진 순서가 있습니다.

for (시작설정; 조건확인; 변화규칙) {
    // 반복할 내용
}

구체적인 예시:

for (let i = 1; i <= 5; i++) {
    console.log("현재 숫자: " + i);
}

이것을 자연어로 번역하면:

• "i라는 변수를 1로 시작해서"
• "i가 5 이하인 동안"
• "매번 i를 1씩 증가시키면서"
• "현재 숫자를 출력해줘"

🧪 직접 해보면서 배우기

실제 예시를 통해 for문이 어떻게 동작하는지 살펴보겠습니다.

🔹 Ex1) 1부터 5까지 숫자 세기

가장 간단한 예시부터 시작해보겠습니다.

// 1부터 5까지 숫자를 출력하는 for문
console.log("🔢 숫자 세기를 시작합니다!");

for (let i = 1; i <= 5; i++) {                     // i를 1부터 시작해서 5까지
    console.log("현재 숫자: " + i);                  // 현재 숫자를 출력합니다
}

console.log("🎉 숫자 세기 완료!");

🔹 Ex2) 1부터 10까지 모든 숫자 더하기

조금 더 실용적인 예시를 해보겠습니다.

// 1부터 10까지의 숫자를 모두 더하는 계산기
console.log("🧮 1부터 10까지 더하기 계산!");

let sum = 0;  // 합계를 저장할 변수를 준비합니다

for (let i = 1; i <= 10; i++) {                    // i를 1부터 시작해서 10까지
    sum = sum + i;                                  // 현재 숫자를 합계에 더합니다
    console.log(i + "을(를) 더했어요. 현재 합계: " + sum);
}

console.log("🎯 최종 결과: " + sum);
console.log("✨ 1부터 10까지의 합은 " + sum + "입니다!");

🔹 Ex3) 간단한 구구단 만들기

구구단 3단을 만들어보겠습니다.

// 구구단 3단을 만드는 for문
console.log("📚 구구단 3단을 공부해보아요!");
console.log("==================");

for (let i = 1; i <= 9; i++) {                     // i를 1부터 시작해서 9까지
    let result = 3 * i;                             // 3 곱하기 i의 결과를 계산합니다
    console.log("3 × " + i + " = " + result);
}

console.log("==================");
console.log("🎉 구구단 3단 완성!");

🔄 for문의 동작 과정

for문이 실제로 어떻게 동작하는지 단계별로 살펴보겠습니다.

for (let i = 1; i <= 3; i++) {
    console.log("안녕하세요!");
}

1단계: let i = 1 - 카운터 변수 i를 1로 초기화
2단계: i <= 3 - 조건 확인 (1 <= 3? 참!)
3단계: console.log("안녕하세요!") - 실행
4단계: i++ - i를 1 증가시킴 (i는 이제 2)
5단계: i <= 3 - 조건 확인 (2 <= 3? 참!)
6단계: console.log("안녕하세요!") - 실행
7단계: i++ - i를 1 증가시킴 (i는 이제 3)
8단계: i <= 3 - 조건 확인 (3 <= 3? 참!)
9단계: console.log("안녕하세요!") - 실행
10단계: i++ - i를 1 증가시킴 (i는 이제 4)
11단계: i <= 3 - 조건 확인 (4 <= 3? 거짓!) - 반복 종료

🧠 자주 하는 실수와 주의할 점

for문을 사용할 때 주의해야 할 몇 가지 사항들을 알아보겠습니다.

❌ 실수 1: 반복 횟수 계산 착각

// 5번 반복하고 싶다면...

// ❌ 실제로는 4번만 반복됩니다
for (let i = 1; i < 5; i++) {
    console.log(i); // 1, 2, 3, 4 (4번)
}

// ✅ 정확히 5번 반복됩니다
for (let i = 1; i <= 5; i++) {
    console.log(i); // 1, 2, 3, 4, 5 (5번)
}

❌ 실수 2: 무한 반복의 위험

// ❌ 위험한 코드 - 영원히 반복됩니다!
for (let i = 0; i < 5;) {  // i++가 없어요!
    console.log("안녕"); // 계속 "안녕"만 출력됩니다
}

// ✅ 안전한 코드
for (let i = 0; i < 5; i++) {  // i++가 있어요!
    console.log("안녕"); // 5번만 출력됩니다
}

✏️ 연습문제로 개념 다지기

for문을 사용해서 연습해보겠습니다. 마치 피아노를 배울 때 기본 스케일을 연습하는 것처럼, 반복 연습이 실력 향상의 지름길이에요.

Ex1) 1부터 3까지 출력하는 간단한 반복을 만들어보자

// 1부터 3까지 숫자를 출력하는 for문을 만들어보세요
for (let i = 1; i <= 3; i++) {                     // 1부터 3까지 반복합니다
    console.log(i);                                 // 현재 숫자를 출력합니다
}
// 결과: 1, 2, 3이 출력됩니다

Ex2) "안녕하세요!"를 5번 반복해서 인사해보자

// "안녕하세요!"를 5번 출력하는 for문을 만들어보세요
for (let i = 1; i <= 5; i++) {                     // 1부터 5까지 반복합니다
    console.log("안녕하세요!");                      // 인사말을 출력합니다
}
// 결과: "안녕하세요!"가 5번 출력됩니다

Ex3) 1부터 5까지 더한 결과를 계산해보자

// 1부터 5까지의 숫자를 모두 더하는 for문을 만들어보세요
let sum = 0;  // 합계를 저장할 변수를 준비합니다

for (let i = 1; i <= 5; i++) {                     // 1부터 5까지 반복합니다
    sum = sum + i;                                  // 현재 숫자를 합계에 더합니다
    console.log(i + "을 더했어요. 현재 합계: " + sum);
}

console.log("최종 합계: " + sum);  // 1+2+3+4+5 = 15

📚 복습하기 - 지난 시간에 배운 내용도 기억해요!

새로운 것을 배우면서도 이전에 배운 것들을 잊지 않는 것이 중요해요. 1-3단원에서 배운 내용을 복습해보겠습니다.

🔄 1단원 복습: let과 const의 차이

문제: 다음 코드에서 문제가 있는 부분을 찾아보세요!

const myName = "지수";        // 바뀌지 않는 변수
let myAge = 9;               // 바뀔 수 있는 변수

myAge = 10;                  // 나이가 바뀌었어요!
myName = "민수";             // 이 부분이 문제예요!

console.log("이름: " + myName + ", 나이: " + myAge);

정답과 설명:

• myName = "민수"; 부분이 오류입니다!
• const로 선언한 변수는 한 번 값을 할당하면 바꿀 수 없거든요.
• let으로 선언한 변수는 언제든지 새로운 값으로 바꿀 수 있어요!

🔄 2단원 복습: 산술 연산자와 증감 연산자

문제: 다음 계산 결과를 예상해보세요!

let count = 5;
let result1 = count + 3;     // 결과는?
let result2 = count * 2;     // 결과는?

count++;                     // count가 어떻게 변할까요?
let result3 = count;         // 최종 count 값은?

console.log("결과1: " + result1 + ", 결과2: " + result2 + ", 결과3: " + result3);

정답과 설명:

• result1은 8입니다. (5 + 3)
• result2는 10입니다. (5 × 2)
• count++ 후에 count는 6이 됩니다. (5에서 1 증가)
• result3은 6입니다!

🔄 3단원 복습: if문과 조건 판단

문제: 다음 코드의 실행 결과를 예상해보세요!

let score = 85;

if (score >= 90) {
    console.log("A등급입니다!");
} else if (score >= 80) {
    console.log("B등급입니다!");
} else {
    console.log("더 노력해보세요!");
}

정답과 설명:

• 결과는 "B등급입니다!"가 출력됩니다!
• score가 85이므로 첫 번째 조건(score >= 90)은 거짓이고,
• 두 번째 조건(score >= 80)은 참이라서 "B등급입니다!"가 출력됩니다!

이렇게 지난번에 배운 내용들도 계속 기억하면서 새로운 것을 배우는 거예요. 참 좋은 습관이죠? 😊

---

지금까지 for문에 대해 함께 알아보았습니다. for문은 정확하고 효율적인 반복 작업의 핵심 도구입니다. 마치 성실한 조수가 우리 대신 반복적인 일을 묵묵히 해주는 것과 같아요.

다음 시간에는 또 다른 흥미로운 자바스크립트 이야기를 함께 나누어보겠습니다. 여러분의 학습 여정이 계속해서 의미 있고 즐거우시길 바라요! 🌟

✅ 학습 완료 체크리스트

이번 시간에 배운 내용들을 모두 이해했는지 확인해보세요!

학습 내용	이해했나요?
for문의 기본 개념	✅
기본 사용법과 문법	✅
자주 하는 실수들	✅
실전 예제 이해	✅
1-3단원 복습 내용	✅

📂 마무리 정보

오늘 배운 4.1.1 내용이 여러분의 자바스크립트 지식에 잘 자리 잡았나요? 다음 시간에는 더 흥미진진한 내용으로 만나요!

기억할 점: 오늘 배운 내용을 꼭 연습해보시고, 궁금한 점이 있으면 언제든 다시 돌아와서 읽어보세요.

🚀 더 체계적인 JavaScript 학습을 원하신다면?

이 포스팅에서 다룬 내용을 실제로 실습해보세요!
무료 JavaScript 학습 플랫폼에서 단계별 학습과 실시간 코드 실행을 통해
더욱 효과적이고 재미있게 학습하실 수 있습니다.

📝 실시간 코드 실행 📊 학습 진도 관리 👥 체계적 커리큘럼

📚 171개 체계적 학습레슨 · 📋 855개 4지선다 연습문제 · 🆓 완전 무료 · ⚡ 즉시 시작

💻 무료로 학습하러 가기

---