JS 기초 | 반복문 (loop : for, while, do while)

🚀 오늘의 학습 목표

• 반복문 이해 (loop)
• for
• while
• do while
  
  

9. 반복문 (loop)

동일한 작업을 여러번 반복할 수 있다.
반복문에는 for, while, do.. while 이 있다.

9-1. for

for(let i = 0; i < 10 ; i++) {
	// 반복할 코드
}

• let i = 0 초기값
  반복문에 진입할 때 처음 한 번만 실행된다.
  위 예제에서는 i라는 변수를 만들고 0이라는 값을 넣어두었다.

• i < 10 조건
  반복문이 돌면서 조건을 확인하고 false 가 되면 멈춘다.
  위 예제에서는 i 는 10보다 작으면 true 를 반환하게 해 두었다.

• i++ 코드 실행 후 작업
  반복문 한번 실행된 후 해야 할 작업을 명시한다.
  위 예제에서는 i 가 1을 더하면서 증가시켜 준다고 해 두었다.

위의 예제를 풀이하여 보자.

i = 0
i 가 10보다 작으므로 true 반환
코드 실행
i 가 1 증가

i = 1
i 가 10보다 작으므로 true 반환
코드 실행
i 가 1 증가
.
.
.
i = 10
i 가 10과 같으므로 false 반환
반복문 종료 (반복문을 빠져 나온다.)

이를 코드로 확인하여 보자.

for (i = 0; i < 10; i++) {
  console.log(i);
}
/* 	
0
1
2
3
4
5
6
7
8
9
*/

9-2. while

let i = 0;
while (i<10) {
  // 코드
}  

while() 안에 조건을 넣는다.
단, 이렇게 입력할 경우 i 는 계속 0 이기 때문에 무한 반복된다. 이를 방지하기 위해 {} 안에 i 를 증가시키는 코드를 넣어 줘야 한다.

let i = 0;
while (i<10) {
  // 코드
  i++;
}

코드로 확인해 보자.

let i = 0;

while (i<10) {
  console.log(i);
  i++;
}
/* 	
0
1
2
3
4
5
6
7
8
9
*/

9-3. do.. while

while 과 비슷하지만, 조건문을 아래로 옮길 수 있고 일단 코드를 실행하고 조건을 체크하기 때문에 적어도 코드가 한 번은 실행 된다는 게 while 과의 큰 차이점이다.

let i = 0;
do {
	// 코드
    i++;
} while (i<10)

9-4. 반복문을 빠져나오는 기능 (break, continue)

9-4-1. break

만나는 순간 즉시 코드 실행을 멈추고 반복문을 빠져 나온다.

9-4-2. continue

코드 실행을 멈추는 것은 break 와 동일하지만, 반복문을 빠져나오지 않고 다음 반복으로 진행된다.

---

🔍 예제를 통해 쉽게 이해하기

1. break

while(true){
  let answer = confirm('계속 할까요?');
  if (!answer) {
    break;
  }
}

확인을 누르면 계속 confirm 창이 나오고, 취소를 누르면 break 를 만나 반복문을 빠져나온다.

2. while

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

---

✏️ 정리

정해져 있는 것은 없으나 명확한 횟수가 정해져 있으면 for문 을 그렇지 않다면 while 을 사용 하며, do.. while은 자주 사용하지 않는다.