Chapter 5. 반복문

학습 목표

• for 반복문을 작성할 수 있다.
• for 반복문이 여러 개의 코드 블록의 조합이라는 것을 이해한다.
• 구구단 n단 출력을 반복문으로 구현할 수 있다.
• 반복문 내부에 조건문을 활용할 수 있다.
• 이중반복문의 동작 순서를 이해할 수 있다.
• 구구단 1-9단 출력을 이중반복문으로 구현할 수 있다.
• for반복문과 while반복문의 차이점을 설명할 수 있다.
• for반복문으로 작성된 코드를 while반복문으로 바꿀 수 있다.

5-1. for문

let result = 0;
result = result + 1;
result = result + 2;
result = result + 3;
result = result + 4;
result = result + 5;
console.log(result); // 15

반복문을 사용하면 불필요한 코드를 반복적으로 사용하지 않고 간결하게 코드를 작성할 수 있음

• 1부터 5까지의 수를 모두 더하는 코드를 for문으로 구현

  • for문을 쓰지 않고 작성

    let result = 0;
    result = result + 1;
    result = result + 2;
    result = result + 3;
    result = result + 4;
    result = result + 5;
    console.log(result); // 15

  • for문을 사용하여 작성

    let result = 0;
    
    for (let num = 1; num <= 5; num++) {
      result = result + num;
    }
    console.log(result); // 15

    이 코드를 살펴보면, 아래와 같은 순서로 진행됨

    1. for문 내부에 num이라는 변수를 선언하고 1이라는 초기값을 할당한다.
    2. 변수 num이 5보다 작거나 같은지 확인한다.
    3. 2의 결과가 true면, 코드블록 내부의 코드를 실행한다.
    4. 변수 num을 1 증가시킨다.
    5. 2부터 4까지 반복한다.
    6. 2의 결과가 false면, 반복문이 종료된다.

for문을 사용하면 코드를 몇 번 반복하여 실행할지 결정할 수 있음

조건식만 바꾸면 됨

반복 횟수가 크다고 해도 for문을 사용하면 간결하게 구현할 수 있음

for문은 다음과 같은 형식으로 이루어져 있음

for (초기값; 조건식; 증감식) {
	// 실행할 코드
}

for 뒤에 오는 소괄호(())에는 각각 초기값, 조건식, 증감식이 들어가고

코드블록에는 반복해서 실행할 코드가 들어감

• for문을 구성하는 각 요소

  • 초기값 : 증감식 반복 횟수를 카운트하는 역할을 하는 변수
    • 이때 변수는 정수를 의미하는 ‘integer’ 의 약자인 i를 주로 사용)
    • 초기값은 반복문의 코드블록 내부에서만 유효

  // 초기값(i)을 선언하고 1을 할당
  for (let i = 1; 조건식; 증감식) {
  		console.log(i);
  }

  • 조건식 : 코드블록 내부의 코드를 실행 여부를 결정
    • true일 경우에는 코드를 실행하며, false일 경우 반복문이 종료

  // i가 3보다 작거나 같을 경우 코드 실행, 3보다 클 경우 반복문 종료
  for (let i = 1; i <= 3; 증감식) {
  		  console.log(i);
  }

  • 증감식: 코드블록 내부의 코드를 실행한 후 초기값으로 선언된 변수를 증가 또는 감소시키기 위한 표현식

  // 코드가 실행될 때마다 i가 1씩 증가
  for (let i = 1; i <= 3; i++) {
  		  console.log(i); // 1 2 3
  }

• 위 예제의 실행 순서

  	1. for문 내부에서 유효한 변수 i를 선언하고 1을 할당한다.
  	2. 조건식에 따라 i가 3보다 작거나 같은지 여부를 평가한다. 현재 i는 1이므로 `i <= 3`은 true로 평가된다.
  	3. 코드블록 내부의 `console.log(i)`가 실행되어 1이 출력된다.
  	4. 증감식에 따라 i가 1 증가한다. i는 2가 된다.
  	5.조건식에 따라 i가 3보다 작거나 같은지 여부를 평가한다. 현재 i는 2이므로 `i <= 3`은 true로 평가된다.
  	6. 코드블록 내부의 `console.log(i)`가 실행되어 2가 출력된다.
  	7. 증감식에 따라 i가 1 증가한다. i는 3이 된다.
  	8. 조건식에 따라 i가 3보다 작거나 같은지 여부를 평가한다. 현재 i는 3이므로 `i <= 3`은 true로 평가된다.
  	9. 코드블록 내부의 `console.log(i)`가 실행되어 3이 출력된다.
  	10. 증감식에 따라 i가 1 증가한다. i는 4가 된다.
  	11. 조건식에 따라 i가 3보다 작거나 같은지 여부를 평가한다. 현재 i는 4이므로 `i <= 3`은 false로 평가된다.
  	12. 반복문이 종료된다.

5-2. 반복문 활용하기

구구단 출력하기

• 조건문으로 구구단 출력

let num = 3;
if (num >= 2 && num <= 9) {
	console.log(num * 1); // 3
	console.log(num * 2); // 6
	console.log(num * 3); // 9
	console.log(num * 4); // 12
	console.log(num * 5); // 15
	console.log(num * 6); // 18
	console.log(num * 7); // 21
	console.log(num * 8); // 24
	console.log(num * 9); // 27
} else {
	console.log('2와 9사이의 수를 입력하세요.');
}

• 변수 num에 할당된 값에 따라 구구단 결과가 다르게 출력
• for문을 사용하면 더 간결하게 작성 가능
• 반복문으로 구구단 출력

  let num = 3;
if (num >= 2 && num <= 9) {
	for (let i = 1; i <= 9; i++) {
		console.log(num * i);
	}
} else {
	console.log('2와 9사이의 수를 입력하세요.');
}

문자열과 반복문

문자열에 반복문을 활용하기 위해 문자열에 대해 몇 가지 복습

• 인덱스(index)
  문자열의 각 문자는 순서를 가지고 있고, 첫 번째 문자의 인덱스는 0

let str = 'codestates';
console.log(str[0]); // 'c'
console.log(str[4]); // 's'

특정 문자의 인덱스를 확인하는 메서드는 indexOf()

let str = 'codestates';
console.log(str.indexOf('c')); // 0
console.log(str.indexOf('e')); // 3

만약 찾는 문자가 2개 이상일 경우, 가장 앞에 있는 문자의 인덱스를 조회

• 길이(length)
  문자열의 길이는 문자열 뒤에 .length를 붙임으로써 조회

let str = 'codestates';
console.log(str.length); // 10

for문의 초기화, 조건식, 증감식은 모두 숫자 타입과 관련

만약 문자열의 첫 번째 문자부터 마지막 문자까지 모두 출력하는 코드를 구현하려면?

let str = 'codestates';
for (let i = 0; i <= 9; i++) {
	console.log(str[i]);
}

변수 i가 0부터 9까지 1씩 증가하며 반복문이 실행
변수 str에 할당된 문자열 'codestates'의 첫 번째 문자인 ‘c’의 인덱스는 0, 마지막 문자인 ‘s’의 인덱스는 9이므로, 결과적으로 이 코드는 각 문자를 하나씩 차례대로 출력하는 코드

문자열의 길이가 매우 길거나 또는 알 수 없는 상태일 때는

4
let str = 'codestates';
for (let i = 0; i <= str.length - 1; i++) {
	console.log(str[i]);
}

문자열 'codestates'의 길이는 10
0부터 시작하는 인덱스와는 달리, 길이는 말 그대로 문자열에 속한 문자의 개수
따라서, 문자열의 마지막 문자의 인덱스는 문자열의 길이보다 1만큼 작음

위의 예제처럼 i <= str.length - 1(또는 i < str.length)로 조건식을 작성하면, 문자열의 끝까지 순회하는 반복문을 구현할 수 있음

5-3. 반복문과 조건문

반복이 진행되는 동안, 특정 조건에 따라 문제를 해결하도록 코드를 작성한다면, 더욱 복잡한 문제도 해결 가능

// 1부터 10까지의 숫자 중 홀수만 출력하도록 코드를 작성

for (let i = 1; i <= 10; i++) {

	// 조건문을 사용하여 홀수만 출력하도록 코드를 작성
    
	if (i % 2 === 1) {
		console.log(i);
	}
}

위 예제에서 i는 1에서 시작하여 1씩 증가하는 동안 반복하여 실행

i가 10일 때까지 실행된 후, i가 11이 된 시점에서 반복문이 종료

반복문 내부에서 실행되고 있는 코드는 if문

조건식은 i를 2로 나누었을 때 나머지가 1인지, 즉 홀수인지 여부를 확인

따라서 i가 1부터 10까지 차례대로 증가하는 가운데 i가 홀수인 경우에만 i를 출력

조금 더 나아가 i가 홀수인지, 짝수인지 여부를 확인하고 싶다면 다음과 같이 코드를 작성

for (let i = 1; i <= 10; i++) {
  if (i % 2 === 1) {
    console.log(`${i}는 홀수입니다.`);
  } else {
    console.log(`${i}는 짝수입니다`);
  }
}

5-4. 반목문의 중첩

반복문은 중첩이 가능

다시 말해 반복문 내부에 또 다른 반복문을 사용할 수 있음

다음 예시는 정육면체 주사위 두 개를 굴려서 나올 수 있는 모든 경우의 수를 구하기 위한 코드

for (let i = 1; i <= 6; i++) {
	for (let j = 1; j <= 6; j++) {
		console.log(`첫번째 주사위는 ${i}, 두번째 주사위는 ${j}입니다.`);
	}
}

위 코드의 실행순서는 다음과 같습니다.

1. 변수 i를 선언하고 1을 할당한다.
2. i가 6보다 작거나 같은지 평가한다.
   변수 j를 선언하고 1을 할당한다.
   변수 j가 6보다 작거나 같은지 평가한다.
   i와 j를 각각 출력한다. (첫번째 주사위는 ${1}, 두번째 주사위는 ${1}입니다.)
   j가 1 증가한다.
   변수 j가 6보다 작거나 같은지 평가한다.
   i와 j를 각각 출력한다. (첫번째 주사위는 ${1}, 두번째 주사위는 ${2}입니다.)
   j가 1 증가한다.
   변수 j가 6보다 작거나 같은지 평가한다.
   i와 j를 각각 출력한다. (첫번째 주사위는 ${1}, 두번째 주사위는 ${3}입니다.)
   j가 1 증가한다.
   변수 j가 6보다 작거나 같은지 평가한다.
   i와 j를 각각 출력한다. (첫번째 주사위는 ${1}, 두번째 주사위는 ${4}입니다.)
   j가 1 증가한다.
   변수 j가 6보다 작거나 같은지 평가한다.
   i와 j를 각각 출력한다. (첫번째 주사위는 ${1}, 두번째 주사위는 ${5}입니다.)
   j가 1 증가한다.
   변수 j가 6보다 작거나 같은지 평가한다.
   i와 j를 각각 출력한다. (첫번째 주사위는 ${1}, 두번째 주사위는 ${6}입니다.)
   j가 1 증가한다.
   i가 6보다 작거나 같은지 평가한다.
   내부 반복문을 종료한다.
3. i가 1증가한다.
4. i가 6보다 작거나 같은지 평가한다.
   변수 j를 선언하고 1을 할당한다.
   변수 j가 6보다 작거나 같은지 평가한다.
   i와 j를 각각 출력한다. (첫번째 주사위는 ${2}, 두번째 주사위는 ${1}입니다.)
   j가 1 증가한다.
   변수 j가 6보다 작거나 같은지 평가한다.
   i와 j를 각각 출력한다. (첫번째 주사위는 ${2}, 두번째 주사위는 ${2}입니다.)
   j가 1 증가한다.
   …(중략)…
   변수 j가 6보다 작거나 같은지 평가한다.
   i와 j를 각각 출력한다. (첫번째 주사위는 ${6}, 두번째 주사위는 ${6}입니다.)
   j가 1 증가한다.
   변수 j가 6보다 작거나 같은지 평가한다.
   내부 반복문을 종료한다.
5. i가 1증가한다.
6. i가 6보다 작거나 같은지 평가한다.
7. 외부 반복문을 종료한다.

외부 반복문의 초기화와 조건식 평가가 이루어진 후, 내부 반복문이 실행

내부 반복문 또한 초기화와 조건식 평가가 이루어진 후 내부에 있는 코드가 실행되고, 증감식, 조건식 평가가 반복

내부 반복문의 조건식 평가가 false가 되면, 내부 반복문은 종료가 되고 외부 반복문의 증감식과 조건식 평가

이때 조건식 평가가 true면, 다시 내부 반복문을 순환하는 방식으로 진행

외부 반복문의 조건식이 false가 되면 모든 반복문이 종료

반복문은 두 개 이상 중첩 가능

2개의 반복문이 중첩된 경우 이중반복문, 3개의 반복문이 중첩된 경우 삼중반복문

for (let first = 0; first <= 3; first++) {
  for (let second = 0; second <= 3; second++) {
    for (let third = 0; third <= 3; third++) {
      console.log(
        `first는 ${first}, second는 ${second}, third는 ${third}입니다.`
      );
    }
  }
}

5-5. while문

초기화, 조건식, 증감식이 모두 필요한 for문과 달리 while문은 조건식만 입력한 후 조건식의 평가결과가 true인 경우 코드블록 내부의 코드를 반복하여 실행

let num = 0;

while (num < 3) {
	console.log(num); // 0 1 2
	num++
}

위 코드를 for문으로 바꾸면 다음과 같음

for (let num = 0; num < 3; num++) {
	console.log(num); // 0 1 2
}

while문을 사용할 때는 무한루프를 주의

무한루프란 반복문이 종료되는 조건식이 항상 참으로 평가되어 무한히 반복되는 현상

let num = 1;
while (num > 0) {
	console.log(num);
	num++;
}

위 코드에서 num은 항상 0보다 크므로, 무한루프가 발생

따라서 while문을 작성할 때는 조건식이 false로 평가되는 순간이 있는지 반드시 주의

• do…while문
  do…while문은 while 뒤에 오는 조건식이 true로 평가되는 동안 do 뒤에 오는 코드블록 내부의 코드를 반복하여 실행

단, 이 경우 do의 코드블록 내부의 코드가 최소 한 번은 실행

do {
	console.log('코드블록 내부의 코드는 최소 한 번은 실행됩니다.') 
	// '코드블록 내부의 코드는 최소 한 번은 실행됩니다.'
} while (false)

while 뒤에 오는 조건식이 항상 false임에도 do의 코드블록 내부에 있는 코드가 한 번은 실행

• for문과 while문
  • for문을 사용하는 경우
    • 반복 횟수가 비교적 명확할 때
    • 배열, 문자열 내부를 순회할 때
    • 반복문의 중첩이 필요할 때
  • while문을 사용하는 경우
    • 반복 횟수가 명확하지 않을 때