JavaScript while 루프 완벽 가이드: 기본 문법부터 do…while까지

do…while 루프는 코드 블록을 한 번 실행한 뒤, 조건식이 계속 true로 평가되는 한 반복해서 실행합니다. while과 do…while 루프는 특정 조건이 충족되는 동안 코드 블록을 실행하고 싶을 때 유용하게 사용됩니다.

들어가며

루프(loop)는 프로그래밍의 핵심 기능 중 하나로, 반복적인 작업을 자동화하는 데 사용됩니다. 예를 들어 학생 명단에 있는 모든 이름을 출력해야 한다고 생각해 보세요. 루프를 활용하면 이 작업을 손쉽게 자동화할 수 있습니다.

JavaScript는 반복 작업을 수행하기 위한 두 가지 주요 루프를 제공합니다. 첫 번째는 for 루프로, 정해진 횟수만큼 문장을 실행합니다. 두 번째는 while 루프로, 조건식이 true로 평가되는 동안 계속 실행됩니다.

이 글에서는 JavaScript에서 while 루프의 기본 개념을 살펴보고, while 루프와 do…while 루프의 문법과 실전 예제까지 함께 다뤄보겠습니다.

JavaScript while 루프란?

JavaScript의 while 루프는 조건식이 true로 평가되는 동안 코드 블록을 실행합니다. 조건이 false가 되면 루프는 실행을 멈춥니다. while 루프를 사용하면 코드를 복사·붙여넣기하지 않고도 동일한 코드 블록을 여러 번 반복 실행할 수 있습니다.

while 루프는 반복 횟수가 정해져 있지 않은 경우에 주로 사용됩니다. 반면 JavaScript의 for 루프는 반복 횟수를 이미 알고 있거나 계산할 수 있는 경우에 적합합니다.

JavaScript에서 while 루프의 기본 문법은 다음과 같습니다:

while (조건식) {
   // 실행할 코드
}

while 문은 JavaScript의 for 문과 형태가 매우 비슷합니다.

주의: 조건식이 항상 true로 평가되도록 작성하면 무한 루프가 발생합니다. 프로그램을 직접 강제 종료하기 전까지 루프가 끝나지 않도록 하려는 경우가 아니라면, 조건식이 언젠가 false로 평가될 수 있도록 설계해야 합니다.

while 루프 예제 1: 파티 잔여 좌석 계산하기

예시를 통해 while 루프의 동작 방식을 살펴보겠습니다. 우리가 초청 파티를 열고 있으며, 동시에 최대 40명까지만 입장할 수 있다고 가정해 보겠습니다.

현재 파티에는 35명이 참석 중입니다. 누군가를 초대할 때마다 제한 인원까지 몇 명을 더 초대할 수 있는지 계산하고 싶습니다. 다음은 while 루프를 사용해 이 계산을 수행하는 프로그램입니다:

var limit = 40;              // 파티 최대 인원
var current_attendees = 35;  // 현재 참석자 수

while (current_attendees < limit) {
   current_attendees = current_attendees + 1;
   var spaces_left = limit - current_attendees;
   console.log(`파티에는 이제 ${spaces_left}개의 자리가 남았습니다.`);
}

이 코드는 다음과 같은 결과를 출력합니다:

파티에는 이제 4개의 자리가 남았습니다.
파티에는 이제 3개의 자리가 남았습니다.
파티에는 이제 2개의 자리가 남았습니다.
파티에는 이제 1개의 자리가 남았습니다.
파티에는 이제 0개의 자리가 남았습니다.

코드의 첫 두 줄에서는 두 개의 변수를 선언합니다. limit 변수는 파티에 입장할 수 있는 최대 인원을 지정하고, current_attendees 변수는 현재 참석자 수를 추적합니다.

그다음 while 루프를 생성합니다. 이 루프는 현재 참석자 수가 설정한 제한 인원보다 적은 동안 계속 실행됩니다.

루프 내부에서는 먼저 참석자 수에 1을 더하고, limit에서 current_attendees를 빼서 남은 좌석 수를 계산합니다. 마지막으로 콘솔에 남은 좌석 수를 알려주는 메시지를 출력합니다.

이 while 루프는 파티 참석자가 40명 미만인 동안 반복 실행되었습니다. 루프가 실행될 때마다 current_attendees 값이 1씩 증가하고, 참석자가 40명에 도달하는 순간 루프는 더 이상 실행되지 않습니다.

while 루프 예제 2: VIP 명단 출력하기

이번에는 배열과 함께 사용하는 예제를 살펴보겠습니다. 아래 예제에서는 while 루프를 사용해 파티 VIP 명단 배열의 모든 이름을 출력합니다:

var vips = ['Robert De Niro', 'Will Smith', 'Brad Pitt', 'Denzel Washington'];
var counter = 0;

while (counter < vips.length) {
   console.log(vips[counter]);
   counter = counter + 1;
}

이 코드는 다음과 같은 결과를 출력합니다:

Robert De Niro
Will Smith
Brad Pitt
Denzel Washington

이 루프는 카운터 변수가 배열의 길이보다 작은 동안 vips 배열을 순회하며 각 이름을 차례대로 출력합니다.

JavaScript do…while 루프란?

JavaScript의 do…while 루프는 문장을 먼저 한 번 실행한 후에 조건식을 검사합니다. 조건이 true이면 루프가 다시 실행되고, false이면 코드 실행이 종료됩니다.

while 루프와 do…while 루프의 가장 큰 차이점은 바로 여기에 있습니다. do…while 루프는 조건식이 단 한 번도 true로 평가되지 않더라도 최소 한 번은 반드시 실행됩니다. 반면 while 루프는 조건식이 true로 평가되어야만 실행됩니다.

JavaScript에서 do…while 루프의 기본 문법은 다음과 같습니다:

do {
   // 실행할 코드
} while (조건식);

do…while 루프 안의 코드는 조건 검사 결과와 관계없이 항상 최소 한 번 실행된다는 점을 기억하세요.

do…while 루프 예제: 숫자 맞추기 게임

예제를 통해 do…while 루프의 동작 방식을 확인해 보겠습니다. 숫자 맞추기 게임을 만든다고 가정해 보겠습니다. 사용자가 정답을 맞힐 때까지 프로그램이 계속 숫자 입력을 요구하도록 만들고 싶습니다.

다음은 이 게임을 구현한 예제 프로그램입니다:

var number_to_guess = 7;
var guessed_number = 0;

do {
   var input = prompt("1부터 10 사이의 숫자를 입력하세요.");
   guessed_number = parseInt(input);
} while (guessed_number != number_to_guess);

이 프로그램은 guessed_number가 number_to_guess와 일치하지 않는 동안 사용자에게 1부터 10 사이의 숫자를 계속 입력받습니다. 중요한 점은, 프로그램이 조건식을 처음 평가하기 전에 do 블록의 내용을 먼저 실행한다는 것입니다. 덕분에 사용자는 최소 한 번은 숫자를 입력할 기회를 얻게 됩니다.

조건식이 false로 평가되는 순간, 즉 사용자가 정답을 맞히면 루프는 실행을 멈춥니다.

마치며

while 루프는 조건식이 true로 평가되는 동안 반복적인 코드 블록을 실행할 때 사용하고, do…while 루프는 코드 블록을 먼저 한 번 실행한 뒤 조건이 계속 true로 평가되는 한 반복 실행할 때 사용합니다.

두 루프 모두 특정 조건이 충족되는 동안 코드 블록을 실행해야 하는 상황에서 매우 유용합니다. 이 글에서는 JavaScript에서 while 루프와 do…while 루프를 작성하는 방법을 배우고, 실제로 어떤 경우에 활용할 수 있는지 몇 가지 예제를 통해 살펴보았습니다. 이제 여러분도 JavaScript 전문가처럼 while 루프를 자유롭게 활용할 준비가 되었습니다!

JavaScript를 체계적으로 익히고 싶다면, 신뢰할 만한 온라인 강의와 공식 문서(MDN Web Docs 등)를 병행하여 학습 로드맵을 세워보는 것을 추천합니다.