4.1.2 카운터 변수 - 현재 몇 번째인지 기억하는 친구

📘 4.1.2 카운터 변수 - 현재 몇 번째인지 기억하는 친구

여러분, 안녕하세요.

어릴 때 할머니와 함께 콩을 고르던 기억이 납니다. 할머니는 한 알씩 콩을 골라내시면서 "하나, 둘, 셋..."하고 세어가셨어요. 정확히 몇 개를 골랐는지 알기 위해서였죠. 그 할머니의 신중한 손가락 동작과 함께 들려오는 숫자들이 지금도 생생합니다.

프로그래밍에서도 그런 할머니 같은 존재가 있어요. 바로 카운터 변수입니다. 현재 몇 번째 반복인지를 정확히 기억하고, 우리에게 알려주는 성실한 친구죠.

지난 시간에 배운 for문이 정확하게 반복할 수 있는 이유가 바로 이 카운터 변수 때문입니다. 마치 할머니가 콩을 세시듯이, 카운터 변수도 하나하나 차근차근 세어가며 우리를 도와줍니다.

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

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

단어	설명
카운터 변수	for문에서 현재 몇 번째 반복인지를 세어주는 특별한 변수예요.
순번	순서에서 특정 위치를 나타내는 번호예요.
시작값	카운터 변수가 처음 시작할 때 가지는 숫자예요.
증가량	한 번 반복할 때마다 카운터 변수가 얼마나 변할지를 정하는 값이에요.
범위	카운터 변수가 움직이는 시작점부터 끝점까지의 구간이에요.

✨ 카운터 변수가 뭔지 알아보기

카운터 변수는 for문의 핵심 두뇌 역할을 하는 매우 중요한 존재입니다. 이 변수가 없다면 for문은 현재 몇 번째 반복인지 알 수 없고, 언제 멈춰야 할지도 모를 거예요.

카운터 변수의 가장 중요한 특징은 자동 관리 기능입니다. 우리가 따로 신경 쓰지 않아도 매 반복마다 스스로 값을 바꿔가며 진행 상황을 추적해줘요.

마치 도서관 대출 카드처럼

제가 자주 다니던 도서관에는 오래된 대출 카드 시스템이 있었어요. 사서 선생님이 책을 빌려줄 때마다 카드에 도장을 찍으셨죠. 첫 번째 칸, 두 번째 칸, 세 번째 칸... 이렇게 차례대로요.

대출 카드의 기능:

• 현재 위치 파악: "지금 3번째 대출이에요"
• 진행률 확인: "10칸 중 3칸 채웠어요"
• 한계 확인: "7번 더 빌릴 수 있어요"
• 특별 지점 알림: "5번째 대출! 우수 독자상 후보예요!"

for (let borrowCount = 0; borrowCount <= 10; borrowCount++) {
    console.log("현재 " + borrowCount + "번째 책 대출!");

    if (borrowCount === 5) {
        console.log("🎉 우수 독자상 후보가 되었어요!");
    }

    if (borrowCount === 10) {
        console.log("📚 올해 독서왕 달성!");
    }
}

카운터 변수도 이런 정확한 대출 카드와 같습니다. 현재 어디까지 왔는지, 얼마나 더 가야 하는지를 정확히 알려주는 신뢰할 만한 도구예요.

🎯 카운터 변수를 사용하는 이유

카운터 변수가 왜 이렇게 중요할까요?

첫째, 정확한 위치 추적이 가능합니다. 순서가 중요한 작업을 할 때 카운터 변수가 정확한 위치를 알려줘요.

둘째, 진행 상황 파악에 유용합니다. 전체 작업 중 현재 몇 퍼센트가 완료되었는지, 얼마나 더 해야 하는지를 쉽게 계산할 수 있어요.

셋째, 조건부 처리가 가능합니다. 특정 번째에서만 다른 일을 하고 싶을 때, 카운터 변수의 값을 확인해서 특별한 처리를 할 수 있어요.

⚙️ 기본 사용법 배우기

카운터 변수는 여러 가지 패턴으로 사용할 수 있습니다. 상황에 맞는 패턴을 선택하는 것이 중요해요.

기본 패턴들:

// 패턴 1: 0부터 시작 (가장 일반적)
for (let i = 0; i < 5; i++) {
    console.log(i); // 0, 1, 2, 3, 4
}

// 패턴 2: 1부터 시작 (자연스러운 순서)
for (let i = 1; i <= 5; i++) {
    console.log(i); // 1, 2, 3, 4, 5
}

// 패턴 3: 감소 패턴 (카운트다운)
for (let i = 5; i >= 1; i--) {
    console.log(i); // 5, 4, 3, 2, 1
}

// 패턴 4: 2씩 증가 (건너뛰기)
for (let i = 0; i < 10; i += 2) {
    console.log(i); // 0, 2, 4, 6, 8
}

🧪 직접 해보면서 배우기

실제 예시를 통해서 카운터 변수가 어떻게 활용되는지 자세히 살펴보겠습니다.

🔹 Ex1) 다양한 카운터 패턴 체험하기

// 🔢 카운터 변수 패턴 체험관에 오신 것을 환영합니다!

console.log("=== 패턴 1: 0부터 시작하는 카운터 변수 ===");
for (let i = 0; i < 5; i++) {                      // 0부터 4까지 반복합니다
    console.log("카운터 변수 값: " + i + " (컴퓨터가 좋아하는 방식)");
}

console.log("");
console.log("=== 패턴 2: 1부터 시작하는 카운터 변수 ===");
for (let number = 1; number <= 5; number++) {      // 1부터 5까지 반복합니다
    console.log(number + "번째 순서 (사람이 자연스럽게 느끼는 방식)");
}

console.log("");
console.log("=== 패턴 3: 카운트다운 ===");
for (let countdown = 5; countdown >= 1; countdown--) { // 5부터 1까지 감소합니다
    console.log("카운트다운: " + countdown);
    if (countdown === 1) {
        console.log("🚀 발사!");
    }
}

🔹 Ex2) 구구단에서 카운터 변수 활용하기

// 📚 구구단에서 카운터 변수가 하는 일 알아보기

console.log("📋 구구단 5단을 만들어볼게요!");

for (let i = 1; i <= 9; i++) {                     // 1부터 9까지 반복합니다
    let result = 5 * i;                             // 5 곱하기 i의 결과를 계산합니다
    console.log("5 × " + i + " = " + result + " (현재 " + i + "번째 계산)");

    // 특별한 번째에 메시지 추가합니다
    if (i === 5) {
        console.log("   ✨ 5번째 계산! 절반 완료!");
    }
}

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

🔹 Ex3) 일주일 요일 세어보기

// 📅 일주일 요일을 카운터 변수로 출력하기

console.log("🌟 즐거운 일주일 계획! 🌟");

for (let day = 1; day <= 7; day++) {               // 1일차부터 7일차까지 반복합니다
    console.log(day + "일차");

    // 각 요일별 특별 메시지입니다
    if (day === 1) {
        console.log("   월요일: 새로운 한 주 시작! 화이팅!");
    } else if (day === 2) {
        console.log("   화요일: 창의력이 넘치는 날!");
    } else if (day === 3) {
        console.log("   수요일: 한 주의 중간점!");
    } else if (day === 4) {
        console.log("   목요일: 거의 다 왔어요!");
    } else if (day === 5) {
        console.log("   금요일: 한 주 마무리! 수고했어요!");
    } else if (day === 6) {
        console.log("   토요일: 주말 시작!");
    } else if (day === 7) {
        console.log("   일요일: 휴식과 재충전의 시간!");
    }
}

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

카운터 변수를 사용할 때 주의해야 할 몇 가지 사항들을 알아보겠습니다.

❌ 실수 1: 시작 숫자와 끝 숫자 헷갈리기

// 1부터 5까지 출력하고 싶은데...

// ❌ 0부터 4까지 출력됩니다
for (let i = 0; i < 5; i++) {
    console.log(i + 1); // 1,2,3,4,5가 나오긴 하지만 복잡해요
}

// ✅ 1부터 5까지 자연스럽게 출력됩니다
for (let i = 1; i <= 5; i++) {
    console.log(i); // 1,2,3,4,5 (더 간단하고 명확해요)
}

❌ 실수 2: 반복 횟수 계산 실수

// 10번 반복하고 싶은데...

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

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

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

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

Ex1) 1부터 5까지 "번째"라는 말과 함께 출력해보자

for (let i = 1; i <= 5; i++) {                     // 1부터 5까지 반복합니다
    console.log(i + "번째");                        // 현재 순서를 출력합니다
}
// 결과: "1번째", "2번째", "3번째", "4번째", "5번째"

Ex2) 5부터 1까지 카운트다운을 해보자

for (let i = 5; i >= 1; i--) {                     // 5부터 1까지 감소합니다
    console.log(i);                                 // 현재 숫자를 출력합니다
    if (i === 1) {
        console.log("완료!");
    }
}
// 결과: 5, 4, 3, 2, 1, "완료!"

Ex3) 짝수만 출력해보자 (2, 4, 6, 8, 10)

for (let i = 2; i <= 10; i += 2) {                 // 2부터 시작해서 2씩 증가합니다
    console.log(i);                                 // 현재 짝수를 출력합니다
}
// 결과: 2, 4, 6, 8, 10

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

새로운 것을 배우면서도 이전에 배운 것들을 잊지 않는 것이 중요해요.

🔄 4.1.1 복습: for문의 기본 구조

문제: 다음 for문에서 각 부분의 역할을 설명해보세요!

for (let i = 0; i < 3; i++) {
    console.log("반복 중: " + i);
}

정답과 설명:

• let i = 0: 시작 숫자 - 카운터 변수 i를 0부터 시작해요
• i < 3: 반복 조건 - i가 3보다 작은 동안 계속 반복해요
• i++: 변화 규칙 - 매 반복 후에 i를 1씩 증가시켜요
• 결과: 0, 1, 2가 출력돼요 (총 3번 반복)

🔄 3단원 복습: switch문과 default

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

let grade = "C";

switch (grade) {
    case "A":
        console.log("최우수");
        break;
    case "B":
        console.log("우수");
        break;
    default:
        console.log("더 노력하세요!");
        break;
}

정답과 설명:

• 결과는 "더 노력하세요!"가 출력돼요!
• grade가 "C"인데, case "A"와 case "B"에 해당하지 않으므로
• default 부분이 실행되어서 "더 노력하세요!"가 출력돼요!

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

문제: 다음 코드에서 count의 최종 값은?

let count = 5;
count++;        // count가 어떻게 변할까요?
count += 2;     // 그 다음에는?
console.log(count);  // 최종 값은?

정답과 설명:

• count++ 후에 count는 6이 돼요 (5에서 1 증가)
• count += 2 후에 count는 8이 돼요 (6에서 2 증가)
• 최종 값은 8이에요!

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

---

지금까지 카운터 변수에 대해 함께 알아보았습니다. 카운터 변수는 for문의 핵심 동력이며, 정확하고 체계적인 반복 작업을 가능하게 하는 소중한 도구입니다.

마치 할머니가 콩을 세시듯이, 카운터 변수도 하나하나 차근차근 세어가며 우리를 도와줍니다. 이런 성실함과 정확성이야말로 좋은 프로그래밍의 기본이 아닐까요?

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

✅ 학습 완료 체크리스트

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

학습 내용	이해했나요?
카운터 변수의 기본 개념	✅
다양한 카운터 패턴	✅
자주 하는 실수들	✅
실전 예제 이해	✅
이전 단원 복습 내용	✅

📂 마무리 정보

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

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

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

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

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

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

💻 무료로 학습하러 가기

---