while 문의 정의 및 사용법

while 문은 조건식과 코드 블록으로 구성되며,
조건식이 참(true)인 동안 코드 블록을 반복 실행하는 반복문입니다.
조건식이 거짓(false)이 되면 반복이 종료됩니다.

while 문은 if 문이 반복되는 형태라고 생각할 수 있습니다.
출처: wikipedia - While loop

JavaScript 
let i = 1;

while (i <= 5) {
    console.log(i);
    i++;
}
// 1 2 3 4 5

구문

while 문은 괄호로 묶인 조건식과 코드 블록으로 구성되어 있습니다.

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

코드 블록 실행 조건식

코드 블록을 실행할 조건식입니다. 생략할 수 없습니다.

  • 이 조건식이 참(true)이면 코드 블록을 실행합니다.
  • 이 조건식이 거짓(false)이면 while 문은 더 이상 실행되지 않고 종료됩니다.
  • 조건식을 생략하면 구문 오류가 발생합니다.

구문의 실행 순서

while 문이 실행될 때, 다음의 순서대로 실행됩니다.

  1. 코드 블록 실행 조건식으로 검사합니다. 이때, 이 조건식이 참(true)이면 코드 블록을 실행합니다. 하지만, 거짓(false)이면 for 문은 더 이상 실행되지 않고 종료됩니다.
  2. 코드 블록 실행 조건식이 참(true)으로 검사되었다면 코드 블록이 실행됩니다.
  3. 코드 블록이 실행된 후, 코드 블록 실행 조건식으로 검사하는 첫 번째 단계로 되돌아갑니다. 이 후의 단계가 반복됩니다.

while 문의 유용성

while 문은
특정 횟수가 사전에 정해져 있지 않은 부울(boolean) 조건의 코드를 반복 실행할 때 매우 유용합니다.

다음은 "사용자가 이름을 입력할 때까지 반복하여 입력을 요청하고, 사용자가 입력한 이름을 화면에 출력"하는 예제입니다.
특정 횟수가 사전에 정해져 있지 않은 부울(boolean) 조건의 코드를 반복 실행할 때 while 문이 얼마나 유용한지를 잘 나타냅니다.

HTML 
<button id="btn" type="button">이름 입력하기</button>

<script>
    const btn = document.getElementById("btn");

    /* 사용자가 버튼을 클릭해서 prompt에 이름을 입력할 수 있도록
       이벤트 등록 */
    btn.addEventListener("click", function() {
        let userName = null;

        while (!userName) { // prompt가 false를 반환하면 계속해서 prompt 실행
            /*
             * prompt에 텍스트가 입력되고 확인 버튼을 누르면 true를 반환
             * 그렇지 않으면 false를 반환
            */
            userName = prompt("이름을 반드시 입력하세요."); // prompt의 return 값을 userName에 대입

            /*
             * prompt가 true를 반환하면(텍스트가 입력되고 확인 버튼을 누르면)
             * 버튼의 텍스트를 변경하고
             * 버튼의 이벤트를 disabled 속성으로 비활성시킴
            */
            if (userName) {
                this.textContent = "반갑습니다, " + userName + "님!";
                this.setAttribute("disabled", "");
            }
        }
    });
</script>

코드 부연설명
textContent 속성은 HTML 요소의 텍스트 콘텐츠를 가져오거나 설정합니다.

코드 부연설명
setAttribute() 함수는 DOM 요소에 속성 값을 설정하는 함수입니다.

실제 적용된 모습 '이름 입력하기' 버튼을 클릭하면 위 예제 코드가 실행됩니다.
prompt에 이름을 입력하지 않으면 계속해서 prompt가 활성화됩니다.

주의하세요!
위 예제 코드는 while 문의 작동의 이해를 위한 단순 예제입니다.
특정 횟수가 사전에 정해져 있지 않은 부울(boolean) 조건의 코드를 반복 실행할 때 매우 유용하다는 것을 설명하는 예제로 사용자가 취소를 선택하거나 아무것도 입력하지 않은 경우 무한 반복에 빠질 수 있습니다. 실전에 사용하지 마세요!

위 예처럼 while 문은 특정 횟수가 사전에 정해져 있지 않은 부울(boolean) 조건의 코드를 반복 실행할 때 매우 유용합니다.

반면에, for 문은 특정 횟수나 정해져 있는 범위만큼 코드를 반복 실행할 때 매우 유용합니다.

주의할 점

while 문을 사용할 때에는 무한 반복에 빠지지 않게 주의해야 합니다.

반복 횟수를 제어하기 위해 상황에 따라 조건식을 변경하거나 증감 변수를 사용을 고려할 수 있습니다.

JavaScript 
let i = 1;

while (i <= 5) {
    console.log(i);
    /* 이 코드에서 증감식이 없다면 무한 반복에 빠지게 됩니다. */
    // i++;
}

명세서

while 문의 명세서 사양
명세서 사양
while ECMAScript Language Specification
#sec-while-statement

브라우저 호환성

while 문의 브라우저 호환성
문
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
while 1 12 1 1

참고문헌

같이 보기