JavaScript 05 반복문 (Loops)

while 반복문

문법

while (condition) {
  // 반복해서 실행할 코드
  // '반복문 본문(body)'이라 불림
}

• condition(조건)이 truthy 이면 반복문 본문의 코드가 실행
• if 조건문과 형태가 매우 비슷.
• 차이점 : if 조건문이 문장을 한 번만 실행하는 반면,
  while 반복문은 불 표현식이 true면 계속해서 문장을 실행함
  

예시

// while문을 이용하여 1 부터 100까지 더하고 그 결과를 출력하시오.

let a = 0;
let b = 0;

while (b<=100) {
  a = a + b;
  b++;
}

console.log(a)

// 5050

for 반복문

배열 요소를 하나하나 꺼내서 특정 문장을 실행할 때 사용

for 반복문

문법

for ( 초기화문; 조건문; 반복이 될 때마다 실행되는 코드(증감식) {
   수행할 동작
}

for (begin; condition; step) {
  // ... body ...
}

begin : 반복문에 진입할 때 단 한 번 실행
condition : 반복마다 해당 조건이 확인됨, false이면 반복문을 멈춤
body : condition이 truthy일 동안 계속해서 실행
step : 각 반복의 body가 실행된 이후에 실행, 증감식에서 i += 2 이렇게 표현하면 2씩 증가.

• 반복문이 시작될 때 아무것도 할 필요가 없으면 begin 생략 가능
• step도 생략 가능
• 모든 구성요소를 생략할 수 있고, 이러면 무한반복문이 됨
• 구성요소 생략 시 주의 점 : 두개의 세미콜론(;;)을 꼭 넣어주어야 함

예시

for (let i = 0; i < 3; i++) {
  console.log(i);
}

단계별로 보면,

// begin을 실행함
let i = 0

// condition이 truthy이면 → body를 실행한 후, step을 실행함
i = 0 < 3이 true이므로 → body console.log(0) 실행 → i++

// condition이 truthy이면 → body를 실행한 후, step을 실행함
i = 1 < 3이 true이므로 → body console.log(1) 실행 → i++

// condition이 truthy이면 → body를 실행한 후, step을 실행함
i = 2 < 3이 true이므로 → body console.log(2) 실행 → i++

// i == 3이므로 반복문 종료

예시2

console.log( )를 어디에 두는 지에 따라 결과가 달라짐

let a = [ ]
for ( i=100; i < 111; i++) {
    a.push(i)
    console.log(a)
}

//
[100]
[100, 101]
[100, 101, 102]
[100, 101, 102, 103]
[100, 101, 102, 103, 104]
[100, 101, 102, 103, 104, 105]
[100, 101, 102, 103, 104, 105, 106]
[100, 101, 102, 103, 104, 105, 106, 107]
[100, 101, 102, 103, 104, 105, 106, 107, 108]
[100, 101, 102, 103, 104, 105, 106, 107, 108, 109]
[100, 101, 102, 103, 104, 105, 106, 107, 108, 109, 110]

let b = [ ]
for ( i=100; i < 111; i++) {
    b.push(i)
}

console.log(b)

//
[100, 101, 102, 103, 104, 105, 106, 107, 108, 109, 110]

예시3

for문은 큰 숫자에서 작은 숫자로 진행하는 것도 가능

let ourArray = [];
for (let i=10; i > 0; i -= 2) {
  ourArray.push(i);
}

console.log(ourArray)

// [10, 8, 6, 4, 2]

for in 반복문 ✍🏼

for of 반복문 ✍🏼

반복문 제어

break

for(let i = 0; i < 10; i++){
    if(i === 5) {
        break;
    }
    console.log('coding everybody' + i);
} 

원래는 10행이 출력되어야 하지만 5행만 출력됨
break는 반복문을 그 자리에서전체 반복문을 즉시 종료시킨다

continue

for(let i = 0; i < 10; i++){
    if(i === 5) {
        continue;
    }
    console.log('coding everybody' + i);
} 

coutinue는 break와 다르게 그 단계의 실행은 중단하지만 나머지 반복은 진행시킴. continue는 if문 안에 있기 때문에 if문의 조건이 true인 현재 iteration만 멈추고 반복문이 다음 iteration을 실행시키게 함. 해당 단계만 중단시키고 나머지 진행

'?' 오른쪽엔 break, continue 올 수 없음

• 표현식이 아닌 문법 구조(syntax construct)는 삼항 연산자 ?에 사용할 수 없다
• 특히 break나 continue 같은 지시자는 삼항 연산자에 사용하면 에러 발생
• 물음표 연산자 ? 를 if 대용으로 쓰지 말아야 하는 이유

break/continue와 레이블 ✍🏼

i와 j를 반복하면서 프롬프트 창에 (0,0)부터 (2,2)까지를 구성하는 좌표 (i, j)를 입력하게 해주는 예시

for (let i = 0; i < 3; i++) {
  for (let j = 0; j < 3; j++) {
    let input = prompt(`(${i},${j})의 값`, '');
  }
}

alert('완료!');

• input 아래에 평범한 break 지시자를 사용하면 안쪽에 있는 반복문만 빠져나올 수 있고 중첩 반복문을 포함한 반복문 두개 모두를 빠져나올 수는 없음. 이럴 때 레이블 사용.
• 레이블(label) 은 반복문 앞에 콜론과 함께 쓰이는 식별자

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라는 레이블이 붙은 반복문을 찾고, 해당 반복문을 빠져나오게 해줌.