[Javascript] 제어문 총정리 ② | for, while, do-while, break, continue문 정의 및 사용법

1. 제어문-반복문이란?

앞서 제어문 총정리 1에서 조건문을 살펴보았습니다. 이번 장에서는 조건문과 함께 제어문을 대표하는 반복문에 대해서 살펴보겠습니다.

반복문은 한마디로 "사용자가 지정한 일정 범위만큼 코드 블록을 실행하거나 특정 조건에서만 무한으로 코드를 실행하도록 하는 제어문" 이라고 할 수 있으며, 이러한 반복문은 대표적으로 for문과 while문이 있습니다.

2. For 문

for문은 사용자가 지정한 범위 동안에 해당 코드 블록을 수행하는 제어문을 의미하며,

for문 안에 들어가는 조건문의 인자로는 (초기화식 ; 조건식 ; 증감식)이 세미콜론을 사이에 두고 구성됩니다.

또한 괄호 안에는 초기화식이나 조건식, 증감식의 생략도 가능하나 이 경우 세미콜론은 생략이 불가능 핟다는 점, 초기화식은 for문 바깥쪽에, 증감식의 경우 for문 안쪽에 작성을 권장되며,

특히 조건식이 생략된 경우 while문의 조건식과 같이 항상 참(true)인 조건이 적용되기 때문에 조건문을 활용하여 특정 상황에서 break를 걸어 for문의 무한 루프를 빠져나오게 하는 방법 등의 코드문 작성이 추가로 필요합니다.

마지막으로 for문 또한 중첩 for문이 가능하며, 객체를 순회할 경우 for_in을, 배열을 순회할 경우 for_of문을 사용하기도 합니다.

// for문 예시)
for(let i = 0 ; i < 10 ; i++){ ->let i의 변수를 0으로 초기화하고 i가 10 이전인 9가 될때까지 i를 증가하면서
console.log("i의 값은 " + i + " 입니다.") -> 해당 문구를 범위인 0부터 9까지 수행.
}

// 조건의 외부 및 내부 선언의 예시)
let i = 0; // 괄호 안에 초기화식을 작성하지 않을 경우 for문 바깥(위쪽)에 작성을 권장하는 이유는 for문 아래의 경우 아직 해당 초기화식(변수)가 초기화 되지 않은 상태이기 때문이고, for문 안에 작성할 경우 i가 루프마다 초기화 되어 결과적으로 무한 루프를 초래할 수 있기 때문입니다.
for( ; i < 10 ; ){ -> 조건문 만은 괄호 안에 작성을 권장합니다.
console.log("i의 값은 " + i + " 입니다.")
i++ -> for문의 코드 블록의 작업이 완료 되었으면 다음 루프 이동을 위해 초기화식(i)을 1 증가시키는 증감식 또한 작성해 줍니다.
}

//무한 루프를 이용한 조건 선언 예시)
let boundIs = true -> boundIs 변수의 값을 true로 초기화 하면
for( ;boundIs;){ -> boundIs는 True이기에 항상 돌게 되는데,
if(boundIs === true) boundIs = !boundIs; -> 만약 특정 조건에서 무한 루프를 종료시키고 싶을 경우 조건문(if)으로 boundIs의 값을 true에서 fasle로 역전(NOT 연산자 사용) 하게 되면 boundIs의 값은 False가 되고 for문이 종료됩니다.
}

//이중 for문을 활용한 1부터 5까지의 구구단 출력 예시)
for(let i = 1 ; i < 6 ; i++){ -> let i가 1번쨰로 돌때
  for(let j = 1 ; j < 10 ; j++) -> let j는 1부터 9까지 돈 후에 let은 2 증가하고
  console.log(`${i} * ${j} = ${i * j}`) -> 구구단을 출력하게 됩니다.
}

// for-in과 for-of문의 간단한 기본 예시)
const thisObject = { // 객체 리터럴을 이용하여 간단한 객체 생성
	first : 1,
    second : 2,
    third : 3,
    forth : 4,
    fifth : 5
};
const thisArray = [1,2,3,4,5]; // 배열 리터럴을 사용하여 간단한 배열을 생성합니다.
>>
for(let key in thisObject){ for in문으로 객체를 순회하며 해당 키와 값에 접근할 수 있습니다. (이때 열거 불가능한 객체의 프로퍼티는 해당 루프에서 검색되지 않습니다.)
	console.log(`${thisObject[key]} is key`);
};
for(let i of thisArray){ // for of문으로 배열을 순회하며 해당 요소들에 접근 할 수 있습니다. 다만 객체와는 다르게 배열은 열거 가능한 속성입니다.
	console.log(`Valu of this Index ${thisArray.indexOf(i)} is : ${i}`)
};

3. while문

while문은 for문과 비슷한 로직을 가지고 있지만 반복 횟수가 정해져있는 for문에 반해 특정 조건을 만족하는 경우에 한에서(참인 경우) 무한 루프를 실행하는 반복문 입니다.

이러한 무한 루프 상태인 while문을 빠져나오기 위해 일반적으로 if_break문을 이용하여 특정 조건에 break문을 발동시켜 while문을 종료시키는 방식으로 사용합니다.

그래서 조건이 참인 동안 계속해서 반복되는 로직을 가진 while 문은 반복 횟수를 명확하게 알 수 없는 경우에 주로 사용되며, 특히 특정 조건을 만족하는 동안 작업을 수행하거나, 어떤 조건이 충족될 때까지 반복하는 경우에 유용합니다.

이 while문 또한 do_while문도 존재하는데, while문의 조건이 처음부터 거짓(false)이더라도 일단 do문의 코드 블록 안 명령문을 1회 실행 후 종료하는 독특한 명령문 입니다.

그러나 대부분의 경우에는 for 문이나 while 문을 더 많이 사용되므로 do...while 문은 최소한 한 번은 실행되어야 하는 상황에서 선택적으로 사용된다는 점만 알아두시면 됩니다.

//① while문 예시)
let randomNumber; //randomNomber 변수를 선언 후

while(randomNumber !== 10){ randomNumber가 10이 아닐 때까지 실행하면서
randomNumber = Math.floor(Math.random()\*10) +1; // randomNumber에 1 ~ 10 사이의 랜덤값 할당
  if(randomNumber === 1){ //만약 randomNumber 값이 1이면
      console.log("앗! 1이 들어와버렸잖아?"); //다음 문구 출력 후
      break; //while문 종료
  }else console.log(randomNumber); //아니라면 randomNumber 출력
};

//② do_while문 예시)
let condition = false; // condition 변수에 false값 선언 후
    do{ //일단
    console.log(condition is `${condition}`) // 다음 문구를 콘솔에 출력
    }
    while(condition !== false); // condition이 false가 아닐 때 까지.

4. break문

break문은 일정 조건에 의한 코드 블록의 종료를 의도할 때 사용됩니다.

주로 for, while, switch문 등에 사용되며 break문 하나당 지정되어있는 하나의 루프문을 빠져나오기 때문에 if문 안에 break를 사용하더라도 그 if문을 감싸는 for, while문까지 같이 종료된다는 특징을 가지고 있는데요.

그래서 중첩된 for문이나 if문의 경우 break의 지정 위치에 따라 루프 종료의 범위 또한 다르기에 만약 원하는 위치에 해당 제어문을 종료시키고 싶다면 해당 제어문 앞에 레이블(제어문의 이름을 부여하는 방법)을 지정하여, break 키워드 작성시 해당 레이블을 함께 작성하는 것으로 원하는 위치에서의 제어문 종료를 가능케 할 수 있스빈다.

// ① 기본적인 break문 예시) 100번 루프를 반복하는 for문 안에 3의 배수를 배열변수 A에 저장하되 A의 길이가 3(배열에 값이 3개가 들어있을 때)일때 break를 선언하여 for문 종료 후 A 배열의 값 출력.
let A = [];
for(let i = 1 ; i < 100+1 ; i++){
  if(i%3 === 0){
  A.push(i);
  }else{
  console.log(i);
  };
  if(A.length === 3){
  break;
  };
};
console.log(A)

// ② for문을 이용하여 1부터 9까지의 구구단을 출력하되, 만약 i값이 6, 그러니까 6단을 출력하려 하면 식별자로 지정된 제어문까지 종료하는 코드문.
firstOuter : for(let i = 1 ; i < 9 ; i++){
  secondOuter :for(let j = 1 ; j < 9 ; j++){
    if(i === 6){
    break firstOuter; // 특정 조건 만족시 firstOuter 레이블로 지정된 for문까지 종료시킵니다.
    }else{
    console.log(`${i} * ${j} = ${i*j}`)
    };
  };
};

5. continue문

break문과 자주 거론되며, 특정 조건에서 수행 되는 break의 경우 해당 전체 루프를 종료하거나 레이블로 지정된 루프까지 종료시킬 수 있는대에 반해,

continue문의 경우 현재 작업중인 루프를 건너띄고 다음 루프를 이어가게 됩니다. 즉, break문은 "아예 전체 루프를 종료시킨다" 의 의미인 반면, continue문은 "현재 작업을 건너띄고 다음 루프를 실행한다." 의 의미를 가지는거죠.

단 식별자를 통해 루프 종료의 구간을 설정할 수 있는 break문과는 달리 continue문은 레이블 설정이 허용되지 않고 단독으로 사용해야한다는 점을 주의해야 합니다.

// ① 1부터 9까지의 구구단을 출력하되, 만약 3의 배수의 구구단은 건너띄고 나머지 구구단을 출력하는 코드.
outer : for(let i = 1 ; i < 9 ; i++){
  for(let j = 1 ; j < 9 ; j++){
    if(i%3 === 0){
    continue; // 특정 조건을 만족하면 현재 루프를 건너띄고 바로 다음 루프로 이동.
    }else{
    console.log(`${i} * ${j} = ${i*j}`)
    };
  };
};