제어문 (Control Flow)

코드를 구성하다보면 특정 조건에서 발생하도록 유도하는 조건문, 반복되는 문장을 쉽게 반복할 수 있는 반복문과 같은 제어문들이 필요하다.

반복문

자바스크립트에서 반복문은 for, while, do ~ while을 통해 구현할 수 있다.

for

for을 이용한 반복문은 아래와 같이 사용할 수 있다.

for (변수 선언 및 초기화; 조건; 실행) {
  // 반복문 실행 내용
}

• 변수 선언 및 초기화: 반복문 내에서 사용할 변수를 선언하고 초기화 한다.
• 조건: 조건이 맞을 경우 아래 반복문 내용을 실행한다.
• 실행: 반복문 내용을 실행한 후 실행된다.

예시를 통해 보면,

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

반복문은 1부터 10까지 출력하는 반복문이다.

순서대로 보면,

1. for문에 진입하면서
2. let i = 0, i라는 변수를 선언하면서 값에 0을 할당한다.
3. i < 10이라는 조건이 맞을 경우 console.log(i + 1)을 통해 i + 1, 즉 1을 출력한다.
4. i++를 통해 i의 값을 +1한다. (i = 1)
5. 3번, 4번을 반복해서 실행한다.
6. 10이 출력되었을 때, i의 값은 9이다. 출력 후 i++를 통해 i의 값은 10이 되었다.
7. i < 10의 조건에 false 값이 되어 반복문을 끝낸다.

위의 순서대로 반복문이 동작하게 된다.

while

while도 for와 마찬가지로 반복문을 구현하는데 사용한다.

while (조건) {
  //실행
}

while의 경우 조건이 참이면, 내부의 코드가 실행된다.

let i = 0;
while (i < 10) {
  console.log(i + 1);
}

위 코드는 for의 예시와 같이 동작할까?

아니다.

위 코드의 동작은 1을 계속해서 출력하게 될 것이다. 무한히

왜냐하면 i의 값은 변함없이 0이기 때문에 i < 10이라는 조건에 무한히 참이다. 그렇기 때문에 while이 종료되지 못하고 무한히 출력하게 된다.

let i = 0;
while (i < 10) {
  console.log(i + 1);
  i++;
}

i++와 같은 코드를 작성해줘야 1부터 10까지 출력한 뒤 종료되게 된다.

가만, 그렇다면 무한히 동작하는 코드를 구현하고자 한다면?

while (true) {
  // 무한히 실행될 코드
}

위와 같이 조건에 true를 준다면 무한히 실행되는 코드를 작성할 수 있다.

그렇다면, 중간에 빠져나오고 싶다면?

break를 통해 중단점을 잡아주면 된다.

let i = 0;

while (true) {
  console.log(i + 1);
  i++;
  if (i > 9) break;
}

if를 통해 조건문을 사용하고 break를 사용하면, 조건에 참일 때 반복을 멈출 수 있다.

do ~ while

do ~ while의 경우 while과 비슷하지만,
do 내부의 코드를 반드시 1번은 실행한다는 것이 다르다.

let i = 10;

// 10 출력하고 종료
do {
  console.log(i);
} while(i < 10);

// 아무것도 하지 않음
while (i < 10) {
  console.log(i);
}

결론

반복문을 사용할 땐 for, while, do~while이 있다.
while을 사용하면 무한 루프를 구현할 수 있다.
하지만 무한 루프를 사용할 땐 조건에 조심하자.