자바스크립트 기본 - 반복문 (while & for)

do....while

do{
  console.log("HI!")
}
while(condition)

조건(condition)의 truthy 여부와 상관없이 본문을 최소 한번은 실행하고 싶을 때 사용합니다.
보통 잘 쓰지는 않는다고 합니다.

 

for

for (begin; condition; step) {
  // 본문(body)
}

begin은 시작 시 한 번 실행됩니다.
condition은 반복바다 확인 할 조건입니다. false가 된 순간 멈춥니다.
body는 condition이 truthy이면 실행됩니다.
step은 본문(body)실행 후 실행됩니다.

 

for문 구성 요소 생략하기

for문은 구성 요소 생략이 가능합니다.

let i = 0
for(; i < 3 ; i++){     // begin을 생략했습니다.
  본문(body)
}

let i = 0
for(; i < 3 ;){     	// begin, step을 생략했습니다.
   본문(body)
   i++
}

for(; ;){
  본문(body)		// 모두 생략했습니다. 끊임 없이 본문이 실행됩니다.
}				// 세미콜론 (;) 두개는 생략할 수 없습니다!

 

break

 반복문에서 break를 사용하면 원하는 때에 반복문을 빠져나올 수 있습니다. (전체 종료합니다.)

let sum = 0;

for(;;){
  let value = +prompt("숫자를 입력하세요.", '');   
  // + 단항 연산자로 인해 입력 받은 값을 숫자형으로 변환합니다 
  
  if(!value) break;
  // falsy값이 value에 할당되면 break로 인해 반복문이 종료됩니다
   
  sum += value;
}
alert( '합계: ' + sum );

사용자가 0을 입력하거나, 숫자 외의 값을 입력하거나, 숫자를 입력하지 않거나, cancle버튼을 누르면
break가 발동하고 반복문을 종료합니다. 사용자가 입력한 값을 모두 더한 값을 출력합니다.

반복문의 조건을 시작이나 끝 지점에서 확인하는 것이 아니라 (i=0 , i<3 등등)
본문 여러 곳에서 확인해야 한다면 무한 반복문 + break 조합을 사용하세요!
무한 반복문을 위해 예제에서는 for(;;)을 사용했지만 while(true)를 많이 사용합니다.

 

continue

반복문에서 continue를 사용하면 원하는 때에

실행중인 이터레이션을 멈추고 다음 이터레이션을 강제 실행할 수 있습니다.

 

for(let i=0; i<10; i++){
  if(i % 2 != 0) continue;
  console.log(i)  // 0 2 4 6 8
}

위 예시에서 if문은 2로 나눈 나머지가 0이 아닐 때 (홀수를 만났을 때) 실행됩니다.
continue는 해당 이터레이션을 멈추고 다시 반복문을 실행합니다.
0을 포함한 짝수만 출력됩니다. // 0을 2로 나눈 나머지는 0입니다.

 

삼항 연산자와 break, continue

표현식이 아닌 문법 구조는 삼항 연산자와 사용할 수 없습니다!

if (i > 5) {
  alert(i);
} 
else {
  continue;
}
 
(i > 5) ? alert(i) : continue   // 삼항 연산자로 바꿔보면~?
위 코드는 문법 에러를 뿜어냅니다

삼항 연산자 ? 를 if문 대신에 쓰지말아야 하는 이유 중 하나입니다!

 

레이블과 break, continue

레이블은 여러개의 중첩 반복문을 한 번에 빠져나오고 싶을 때 사용할 수 있습니다.  

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

    let input = prompt(`(${i},${j})의 값`, '') 
    
    if (input === "") input = "0" 
    // 사용자가 아무것도 입력하지 않고 확인을 누르면 "0"을 할당합니다.     
    else if(input === null) break outer;
    //사용자가 취소버튼을 누르면 반복문을 전부 종료합니다.

    console.log(`좌표: ${i},${j} 적군: ${input}명`);
  }
}
console.log('완료!');

위 코드에서 outer: 는 레이블 입니다. 
레이블은 반복문 앞에 콜론과 함께 쓰이는 식별자입니다!
break나 continue뒤에 레이블 명을 써주면 해당하는 반복문을 빠져나올 수 있습니다.

 

 

 

기본이 중요하다.