[Javascript] 반복문(2): while 사용 방법

앞선 포스팅에서는 반복문 for에 대해서 알아보았습니다.

2021.04.18 - [쿤즈 Dev/HTML & CSS & Javascript] - [Javascript] 반복문(1): for 사용 방법

모든 언어에서 그렇듯 반복문을 매우 많이 사용하는 문법이기 때문에 반드시 익혀두셔야 할 문법입니다.

 

 

이번 포스팅에서는 while 반복문에 대해서 알아보도록 하겠습니다.

---

while 반복문

while 반복문에는 다시 두 가지 종류가 있습니다. while과 do ... while 반복문입니다. 그럼 먼저 while 반복문의 사용방법은 아래와 같습니다.

while ( 조건 ) {
  ...
}

while 반복문은 for와는 다르게 parameter를 1개만 받습니다. 이 parameter는 조건입니다. 조건은 true 또는 false로 판단되어야 하는 조건입니다.

 

조건이 true이면 while 반복문을 계속 실행하고 false가 되는 순간 반복문을 탈출합니다. 그럼 예제 하나를 통해서 알아보겠습니다.

---

while 반복문 예제 1

let num = 5;

while (num > 0) {
	console.log(num);
	num --;
}
console.log('end loop');

while 반복문 결과 1

5
4
3
2
1
end loop

먼저 변수 num을 선언하고 5라는 값으로 초기화했습니다. while의 조건은 num>0 입니다. 차근차근 따라가 보겠습니다.

1. num=5, num>0 === true, num 출력(5), num--

2. num=4, num>0 === true, num 출력(4), num--

3. num=3, num>0 === true, num 출력(3), num--

4. num=2, num>0 === true, num 출력(2), num--

5. num=1, num>0 === true, num 출력(1), num--

6. num=0, num>0 === false, while 반복문 탈출

7. end loop 출력

 

위와 같이 while 반복문이 동작하도록 되어 있습니다. 그럼 합을 구할 수도 있지 않을까요? 예제 하나를 더 해보겠습니다.

---

while 반복문 예제 2

let num = 5, sum = 0;

while (num > 0) {
	sum += num;
	num --;
}
console.log(`sum = ${sum}`);

while 반복문 결과 2

sum = 15

예제 1과 동일한 방법으로 출력하는 대신 합계를 구했습니다. 조건은 동일합니다.

---

do ... while 반복문

do ... while 반복문은 while 반복문과 동일합니다. 다만 최초 1회 실행이 있느냐 없느냐의 차이가 있습니다. 사용 방법은 아래와 같습니다.

do {
  ...
} while ( 조건 );

우선 do ... while 반복문을 만나면 블록 내부로 들어와 1회는 실행을 합니다. 그리고 while을 만나서 조건을 확인합니다. 여기서 조건이 true가 되면 다시 do 부터 시작해서 내부 블록을 실행하고 false이면 do ... while 반복문을 빠져오게 됩니다. 예제로 확인해 볼게요.

---

do ... while 반복문 예제 1

let num = 5;

do {
	console.log(num);
	num --;
} while (num > 0);
console.log('end loop');

do ... while 반복문 결과 1

5
4
3
2
1
end loop

while 반복문 예제 1을 do ... while 반복문으로 변경하였습니다. 결과는 동일합니다. 차이는 조건을 먼저 확인하는지 아니면 1회 실행하고 확인하는지에 대한 차이뿐입니다.

---

do ... while 반복문 예제 2

let num = 5, sum = 0;

do {
	sum += num;
	num --;
} while (num > 0);
console.log(`sum = ${sum}`);

do ... while 반복문 결과 2

sum = 15

합계를 구할 때에도 동일한 방법으로 진행했습니다. while 문법을 안다면 do ... while 문법은 사용법이 거의 동일하기 때문에 쉽게 눈에 들어올 거예요.

---

무한 반복문

for 반복문도 그렇고 while 반복문도 그렇고 조건이 true가 되면 계속 반복문 내부를 실행하게 됩니다. 따라서 조건이 잘못 설정된다면 무한 반복을 실행할 수도 있습니다. 아래와 같은 경우가 무한 반복문이 됩니다.

while ( true ) {
  ...
}

const num = 5;

do {
  ...
} while ( num == 5 )

while 내부에 true를 넣어주거나 조건을 const(상수) 값을 비교해서 true로 판단하게 만들면 의도치 않게 무한반복을 실행할 수도 있으니 주의하셔야 합니다. 물론 내부에서 특정 조건이 되면 빠져나오게 만들 수도 있습니다.

---

이번 포스팅에서는 반복문 두 번째로 while과 do ... while에 대해서 알아보았습니다. 모든 언어에서 변수, 상수, 조건, 반복은 가장 기본이 되는 부분이기 때문에 익숙해지실 필요가 있습니다. 도움이 되셨으면 합니다. 이상입니다.