[Javascript] 반복문

목차
1. 반복문
2. while 문 / do while 문
 ① while 문
 ② do while 문
3. for 문
4. 참고한 문헌

---

1. 반복문

프로그램 내부에서 특정한 코드가 반복적으로 실행될 수 있게 하는 명령문을 반복문이라고 한다.

배열로 저장한 데이터를 차례대로 출력하거나 숫자 1 ~ 10까지 값을 하나씩 증가시켜서 출력하는 등의

동일한 코드를 반복해서 작성해야할 경우에 주로 사용되는 것이 반복문이다.

반복문 실행 구조 다이어그램

 

Javascript에서 주로 사용되는 반복문은 while, for문이 존재한다.

해당 반복문에 대해서는 순차적으로 알아보도록 하자.

---

2. while 문 / do while 문

① while 문

while (/*조건식*/){
	//실행할 명령문
}

while 문은 주어진 조건식의 결과가 참, true인 경우에 내부에 작성된 명령문을 실행하고

조건식의 결과가 거짓, false이면 실행되지 않는 반복문이다.

해당 반복문이 실행되면 내부의 명령문을 순차적으로 실행하고 다시 조건식을 확인해서

결과가 참, true이면 위의 과정을 다시 반복해서 실행하고, 결과가 거짓, false이면 더 이상 반복해서 실행되지 않는다.

---

//while 문 예제
//구구단 2단을 출력해주세요.

let num = 2;
let dan = 1;

while (dan <= 10){
	console.log(`${num} * ${dan} = ${num * dan}`);
}

해당 예제를 실행하면 무한 루프에 빠지게 되는 것을 확인할 수 있을 것이다.

이러한 문제가 발생한 원인은 조건식의 결과가 계속 true인 상태가 유지되는 것 때문이다.

 

상단의 소스코드에서 while 문의 조건식은 'dan <= 10'으로

내부에 변수 dan의 값을 증가시키는 코드가 없기 때문에 '2 * 1 = 1'이라는 문자열이 반복해서 출력되게 된다.

즉, 무한 루프에 빠지게 된다는 것이다.

이러한 문제를 해결할 방법은 간단하다.

while 문의 조건식이 거짓이 될 수 있게, 변수 dan의 값을 1 증가시키는 증감 연산자를 추가하는 것으로 해결할 수 있다.

 

//while 문 예제 (수정 후)
//구구단 2단을 출력해주세요.

let num = 2;
let dan = 1;

while (dan <= 10){
    console.log(`${num} * ${dan} = ${num * dan}`);
    dan ++;
}

예제 실행 결과, 구구단이 정상적으로 출력하는 것을 확인할 수 있다.

---

② do while 문

do while 문은 while 문에서 파생된 반복문으로

기존 while 문과는 다르게 조건식의 결과가 false여도 최소 한 번 이상은 실행되는 반복문이다.

do {
 //실행할 명령문
} while (/*조건식*/)

do while 문은 '{ }' 내부에 작성된 명령문을 한 번 실행하고, 이후에 조건식을 확인해서

조건식의 결과가 true이면 내부의 명령문을 반복 실행하고, false이면 반복 실행하지 않는다.

 

기존 while 문과 비교했을 때 다른 점이라면 조건식을 입력하는 '( )' (소괄호)가 '{ }' (중괄호) 뒤에 존재한다는 점이고

이러한 형태가 do while 문이 조건식의 결과에 상관없이 최소 한 번은 실행된다는 특성을 가지게 해 준다.

---

//do while 문 예제
//숫자 카운트하기

let num = 1;

do {
  console.log(`숫자 : ${num}`);
} while(num == 2)

do while 문은 최소 한 번은 실행되고 이후에 조건식이 true나 false냐에 따라 반복 여부를 결정한다.

 

---

3. for 문

for 문은 앞에서 설명한 while 문보다는 약간 복잡한 구조를 가지고 있으며 제일 많이 사용되는 반복문이다.

for 문은 '시작 조건', '실행 조건', '증감식' 그리고 명령문을 입력하는 명령부 ({ })로 구성되어 있다.

for 문의 기본 문법은 아래와 같다. 

for (/*시작조건; 실행조건; 증감식*/){
  //실행할 명령문
}

---

//for 문 예제
//구구단 출력하기

let num = 3;
console.log("=== 구구단 3단 출력하기===");

for (let dan = 1; dan <= 10; dan++){
  console.log(`${num} * ${dan} = ${num * dan}`);
}

구성 요소		예시			설명
시작 조건		let dan = 1;			for 문 실행 시 딱 한번만 실행되는 조건식
실행 조건		dan <= 10;			조건식, 조건식이 true면 반복 실행하고, false면 실행 종료한다.
증감식		dan++			명령부를 실행한 다음, 실행된다.
명령부		{ console.log(...); }			실행 조건이 true일 동안 실행되는 부분

이를 참고해서 상단의 코드의 동작 과정을 정리하자면 다음과 같다.

1. '시작 조건', 'let dan = 1;'이 실행된다.
2. '실행 조건', 'dan <= 10;'이 true이기 때문에 해당 반복문이 실행된다. ("3 * 1 = 3" 출력)
3. '증감식', 'dan++'이 실행된다. (변수 dan의 값이 1 증가한다.)
4. 실행 조건인 'dan <= 10;'이 true이므로 해당 반복문이 다시 실행된다. ("3 * 2 = 6" 출력)
5. 증감식, 'dan++'이 다시 실행된다. (변수 dan의 값이 1 증가한다.)
 * 이하의 과정을 실행 조건 'dan <= 10;'이 false가 될 때까지 반복해서 실행한다. 

---

4. 참고한 문헌

웹 프론트엔드를 위한 자바스크립트 첫 걸음 (인프런)
모던 자바스크립트 - while과 for 반복문