[자바스크립트] while과 for 반복문

 

while과 for 반복문

• 자바스크립트의 반복문을 알아보자!

 

 

while

기본 분법

<script>
    while (조건) {
        // 코드
        // 반복문 본문으로 불림
    }
</script>

let i = 0;
while (i < 3) {
    alert(i);
    i++;
    }

// 출력 : 0, 1, 2 

let i = 3;
while (i) { // i가 0이 되면 false기 때문에 반복문 탈출
    alert(i);
    i--;
}
// 출력 : 3, 2, 1 

 

🔔 사전 지식( prompt() )

• prompt는 사용자가 데이터를 입력할 수 있도록 해주는 함수
• 아무것도 입력하지 않고 확인 버튼을 누르면 빈 문자열을 반환
• 취소 버튼을 누르면 null을 반환

let name = prompt("이름 입력하세요.");

document.write(name);

break를 사용항 반복문 탈출 가능

let sum = 0;

while (true) {
    let value = +prompt("숫자를 입력하세요.", '');
    if (!value) break; // *
    sum += value;
}

alert( '합계: ' + sum );

// 입력 : 1 2 3 4 g
// 출력 : 합계 : 10

• * 부분에 아무것도 입력하지 않거나 취소 버튼을 눌렀을 때 활성화 -> 반복문 탈출

 

 

‘do…while’ 반복문

기본 구조

do {
  // 반복문 본문
} while (condition);

• 본문 먼저 실행되고 조건문을 확인한다.
• 본문을 최소한 한번이라도 실행하고 싶을때만 사용!

let i = 0;
do {
  alert( i );
  i++;
} while (i < 3);
// 출력: 0 1 2

 

 

for 반복문

기본 문법

for(begin; condition; step) {
    // 반복문
}

for (let i = 0; i < 3; i++) { // i를 반복문 선언. 이를 '인라인 변수 선언'아라 부르고 반복문 안에서만 접근가능
    alert(i);
}

// 출력 : 0, 1, 2

 

 

다음 반복으로 넘어가기

• continue는 전체 반복문을 멈추지 않고 현재 반복문을 현재 실행중인 반복문을 멈추고 다음 반복을 강제로 실행(조건을 통과할 때)

for (let i = 0; i < 10; i++) {

  // 조건이 참이라면 남아있는 본문은 실행되지 않는다.되지 않습니다.
  if (i % 2 == 0) continue; //i가 짝수면 continue, 홀수일 때만 alert 실행

  alert(i);
}
// 출력 :  1, 3, 5, 7, 9

⚠️ 주의

• 3항 연산자에서 break, continue를 사용하면 안 된다. ex) (i > 5) ? alert(i) : *continue*;

 

 

break/continue와 레이블

for (let i = 0; i < 3; i++) {
    for (let j = 0; j < 3; j++) {
        let input = prompt(`(${i},${j})의 값`, '');
        // 사용자가 Cancel을 눌렀을 때 반복문을 중단시킬 방법이 필요하다.
        // input 아래 break를 사용해서 2개의 for문을 탈출할 수 없다.
        //-> label을 사용하여 탈출 

    }
}
alert('완료!');

label은 반복문 앞에 콜론과 함께 쓰이는 식별자

labelName: for (...) {
  ...
}

• 반복문 안에서 break<labelName>을 사용하면 레이블에 해당하는 반복문을 빠져나올 수 있다.

outer: for (let i = 0; i < 3; i++) {
    for (let j = 0; j < 3; j++) {

        let input = prompt(`(${i},${j})의 값`, '');

        // 사용자가 아무것도 입력하지 않거나 Cancel 버튼을 누르면 두 반복문 모두 탈출.
        if (!input) break outer; // 탈출 조건

        // 입력받은 값을 가지고 무언가를 함
    }
}
alert('완료!');

• break outer는 outer라는 레이블이 붙은 반복문을 찾고, 해당 반복문을 빠져나오게 해준다.

 

 

⚠️ 주의

• break와 continue는 반복문 안에서만 사용할 수 있다.
• 레이블은 반드시 break이나 continue 지시자 위에 있어야 한다.

 

 

📌 참고

• 모던 JavaScript 튜토리얼