4. 같은 일 반복하기 (반복문)/4.2 조건이 맞는 동안 반복하기 (while)

4.2.1 `while`문 - 조건이 만족될 때까지 기다리기

thejavascript4kids 2025. 7. 1. 02:44

📘 4.2.1 while문 - 조건이 만족될 때까지 기다리기

여러분, 안녕하세요.

어릴 때 제가 자주 했던 일 중 하나가 창가에 앉아서 비가 그칠 때까지 기다리는 것이었습니다. 언제 그칠지는 모르지만, 비가 멈추면 밖에 나가 놀 수 있다는 기대를 품고 있었죠. 그때는 시간이 얼마나 걸릴지 정확히 알 수 없었지만, 비가 그친다는 조건이 만족되면 행동할 수 있다는 것을 알고 있었어요.

프로그래밍에서도 이런 상황들이 있습니다. 정확히 몇 번 반복해야 할지 미리 알 수 없지만, 특정 조건이 만족될 때까지는 계속 기다려야 하는 경우 말이에요.

지난 시간에 배운 for문이 "정확히 10번 해줘"라고 하는 명령이라면, 오늘 배울 while문은 "이 조건이 만족될 때까지 계속 해줘"라고 하는 더 유연한 명령입니다.

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

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

단어 설명
while문 특정 조건이 참인 동안 계속해서 반복하는 반복문이에요.
조건식 참인지 거짓인지를 판단하는 기준이 되는 식이에요.
반복 횟수 실제로 몇 번 반복했는지를 나타내는 숫자예요.
무한 반복 조건이 계속 참이어서 영원히 멈추지 않는 상태예요.

✨ while문이 뭔지 알아보기

while문은 조건 기반 반복의 전문가입니다. 마치 엄마가 "숙제를 다 끝낼 때까지는 놀면 안 돼"라고 하시는 것과 같아요. 언제 끝날지는 모르지만, 숙제가 다 끝나야 한다는 조건은 분명하죠.

while문의 가장 큰 특징은 목표 지향적이라는 점입니다. 횟수보다는 "이런 상태가 될 때까지"라는 목표를 중시해요.

마치 텃밭을 가꾸는 것처럼

할머니는 텃밭에서 토마토를 키우셨습니다. 매일 물을 주시면서 이렇게 말씀하셨어요.

"토마토가 빨갛게 익을 때까지 매일 정성껏 물을 주어야 한다."

할머니는 정확히 며칠이 걸릴지 모르셨어요. 날씨에 따라, 토마토의 상태에 따라 달라질 수 있으니까요. 하지만 "빨갛게 익는다"는 조건은 분명했죠.

while (토마토가_아직_덜_익었다) {
    console.log("오늘도 정성껏 물을 줍니다.");
    물주기();
    토마토_상태_확인하기();
}

console.log("토마토가 빨갛게 익었어요!");

이것이 바로 while문의 정신입니다. 목표가 달성될 때까지 꾸준히, 끈기 있게 노력하는 것이죠.

🎯 while문을 사용하는 이유

while문을 사용하는 이유는 간단합니다.

첫째, 반복 횟수를 예측할 수 없을 때입니다. 사용자가 올바른 답을 입력할 때까지, 원하는 결과가 나올 때까지 같은 상황에서 while문이 완벽한 해결책이 됩니다.

둘째, 조건 달성이 목적일 때입니다. "100점이 될 때까지", "목표 금액을 모을 때까지" 같은 목표 지향적인 상황에서 while문이 자연스럽게 어울립니다.

⚙️ 기본 사용법 배우기

while문의 기본 구조는 for문보다 훨씬 간단합니다.

while (조건식) {
    // 반복할 내용
    // 조건을 변화시키는 코드 (중요!)
}

for문과 while문 비교:

// for문: 정확한 횟수를 알 때
for (let i = 1; i <= 5; i++) {
    console.log("for문: " + i);
}

// while문: 조건만 확인하고 싶을 때
let i = 1;
while (i <= 5) {
    console.log("while문: " + i);
    i++;  // 조건을 변화시키는 코드
}

🧪 직접 해보면서 배우기

실제 상황에서 while문이 어떻게 사용되는지 살펴보겠습니다.

🔹 Ex1) 카운트업으로 숫자 세기

// 1부터 5까지 숫자를 세는 while문
console.log("🔢 1부터 5까지 세어보아요!");

let number = 1;  // 시작 숫자를 1로 설정합니다

while (number <= 5) {  // number가 5 이하인 동안 반복합니다
    console.log("현재 숫자: " + number);
    number = number + 1;  // 숫자를 1씩 증가시킵니다
}

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

🔹 Ex2) 목표 달성하기 게임

// 목표 100에 도달하는 게임
console.log("🎯 목표 100 달성 게임을 시작합니다!");

let currentScore = 0;  // 현재 점수
let targetScore = 100;  // 목표 점수
let round = 1;  // 라운드 번호

while (currentScore < targetScore) {  // 목표에 도달할 때까지 반복합니다
    let earnedPoints = 15;  // 매번 15점씩 획득합니다
    currentScore = currentScore + earnedPoints;

    console.log("🎮 라운드 " + round + ": +" + earnedPoints + "점 획득!");
    console.log("   현재 점수: " + currentScore + "점");

    if (currentScore >= targetScore) {
        console.log("🏆 목표 달성! 축하합니다!");
    }

    round = round + 1;
}

🔹 Ex3) 카운트다운 로켓 발사

// 로켓 발사 카운트다운 시스템
console.log("🚀 로켓 발사 준비 중...");

let countdown = 10;  // 10초부터 시작합니다

while (countdown > 0) {  // 0보다 클 때까지 반복합니다
    console.log("⏰ " + countdown + "초 남았습니다!");

    if (countdown === 1) {
        console.log("   🎯 발사 직전!");
    }

    countdown = countdown - 1;  // 1초씩 감소시킵니다
}

console.log("🚀 로켓 발사 성공!");

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

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

❌ 실수 1: 조건을 변화시키는 코드를 빼먹어서 무한 반복

// ❌ 무한 반복의 위험!
let count = 1;
while (count <= 5) {
    console.log("현재: " + count);
    // count가 변하지 않아서 조건이 영원히 참입니다!
}

// ✅ 안전한 코드
let count = 1;
while (count <= 5) {
    console.log("현재: " + count);
    count++;  // 조건을 변화시키는 코드 추가
}

❌ 실수 2: 비교 연산자와 할당 연산자 헷갈리기

// ❌ = 는 할당, === 는 비교입니다!
let number = 5;
while (number = 3) {  // 항상 참이 됩니다
    console.log(number);
    number--;
}

// ✅ 올바른 비교
let number = 5;
while (number >= 3) {  // 비교 연산자 사용
    console.log(number);
    number--;
}

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

배운 내용을 연습해보겠습니다. 마치 정원사가 꽃이 필 때까지 매일 돌보는 것처럼, 우리도 조건이 만족될 때까지 꾸준히 연습해보겠어요.

Ex1) 0부터 시작해서 10보다 작은 동안 숫자를 출력해보자

let i = 0;                                      // 0부터 시작합니다
while (i < 10) {                                // 10보다 작은 동안 반복합니다
    console.log(i);                             // 현재 숫자를 출력합니다
    i++;                                        // 다음 숫자로 증가시킵니다
}
// 결과: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9

Ex2) 20부터 시작해서 15보다 클 때까지 거꾸로 카운트해보자

let num = 20;                                   // 20부터 시작합니다
while (num > 15) {                              // 15보다 클 때까지 반복합니다
    console.log(num);                           // 현재 숫자를 출력합니다
    num--;                                      // 1씩 감소시킵니다
}
// 결과: 20, 19, 18, 17, 16

Ex3) 변수가 50 이상이 될 때까지 7씩 더해보자

let value = 0;                                  // 0부터 시작합니다
while (value < 50) {                            // 50보다 작은 동안 반복합니다
    console.log("현재 값: " + value);           // 현재 값을 출력합니다
    value = value + 7;                          // 7씩 더합니다
}
console.log("최종 값: " + value);
// 결과: 0, 7, 14, 21, 28, 35, 42, 49, 최종 값: 56

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

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

🔄 4.1.3 복습: 반복 범위 조절하기

문제: 다음 for문에서 출력되는 결과를 예상해보세요!

for (let i = 2; i <= 8; i += 2) {
    console.log("짝수: " + i);
}

정답과 설명:

  • 결과: "짝수: 2", "짝수: 4", "짝수: 6", "짝수: 8"
  • i가 2부터 시작해서 2씩 증가하므로 자동으로 짝수만 출력돼요!

🔄 4.1.2 복습: 카운터 변수의 활용

문제: 다음 코드에서 카운터 변수가 어떻게 사용되는지 설명해보세요!

for (let i = 1; i <= 3; i++) {
    console.log(i + "번째 과일을 준비해요!");
}

정답과 설명:

  • 카운터 변수 i는 순서를 나타내는데 사용돼요
  • 1부터 시작해서 3까지 증가하면서 순서를 알려줘요
  • 결과: "1번째 과일을 준비해요!", "2번째 과일을 준비해요!", "3번째 과일을 준비해요!"

🔄 4.1.1 복습: for문과 while문의 차이

문제: for문과 while문 중 어떤 것을 사용하는 것이 좋을까요?

// 상황 1: 1부터 10까지 출력하기
// 상황 2: 사용자가 "종료"를 입력할 때까지 반복하기

정답과 설명:

  • 상황 1: for문이 좋아요! 정확히 10번 반복하는 것을 알고 있으니까요
  • 상황 2: while문이 좋아요! 언제 끝날지 모르는 조건 기반 반복이니까요

이렇게 지난번에 배운 내용들도 계속 활용하면서 새로운 것을 배우는 거예요! 😊


지금까지 while문에 대해 함께 알아보았습니다. while문은 목표 지향적인 반복의 전문가로, 정확한 횟수를 모르는 상황에서 매우 유용한 도구입니다.

마치 할머니가 토마토가 빨갛게 익을 때까지 매일 정성껏 돌보시듯이, while문도 조건이 만족될 때까지 꾸준히, 끈기 있게 작업을 반복합니다.

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

✅ 학습 완료 체크리스트

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

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

📂 마무리 정보

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

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


🚀 더 체계적인 JavaScript 학습을 원하신다면?
이 포스팅에서 다룬 내용을 실제로 실습해보세요!
무료 JavaScript 학습 플랫폼에서 단계별 학습과 실시간 코드 실행을 통해
더욱 효과적이고 재미있게 학습하실 수 있습니다.
📝 실시간 코드 실행 📊 학습 진도 관리 👥 체계적 커리큘럼
📚 171개 체계적 학습레슨 · 📋 855개 4지선다 연습문제 · 🆓 완전 무료 · ⚡ 즉시 시작