Unit2-[JavaScript] 반복문

📌 반복문 개요 

만약 컴퓨터에게 한 번에 한 가지 일만 시킬 수 있다면, 사람이 그 일을 처리하는 속도와 큰 차이가 없을 지도 모릅니다. 컴퓨터가 한 번의 일을 처리할 때마다 같은 명령을 반복적으로 해주어야 하기 때문입니다. 우리가 의도한 만큼 같은 동작을 반복하도록 할 수는 없을까요? 이것이 바로 조건문과 함께 JavaScript의 대표적인 제어문인 반복문을 사용하는 이유입니다. 이번 시간에는 코드를 불필요하게 중복해서 작성하지 않아도 컴퓨터가 반복적으로 동작을 수행하도록 하는 방법인 반복문에 대해 학습해 보겠습니다.

 

💡 반복문을 쓰는 이유는 컴퓨터에게 우리가 의도한 만큼 같은 동작을 시키기 위해서

📌 for문

✅ for문

 

JavaScript의 대표적인 반복문인 for문에 대해서 학습해 보겠습니다.

먼저, 1부터 5까지의 수를 차례대로 더한 값을 구하는 코드를 작성해 보겠습니다. 가장 쉽게 떠올릴 수 있는 방법은 1부터 5까지의 수를 모두 직접 입력하는 것입니다.

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

이런 식으로 작성해도 원하는 결과를 얻을 수 있습니다. 하지만 만약 1부터 5까지의 합이 아니라 100,000까지의 합이라면 어떻게 될까요? 같은 코드를 100,000줄을 반복해서 작성해야 할 것입니다. 코드를 작성하는 것도 힘들지만, 그런 코드는 가독성도 매우 떨어질 수 밖에 없습니다. 이때 **반복문을 사용하면 불필요한 코드를 반복적으로 사용하지 않고 간결하게 코드를 작성할 수 있습니다.** 1부터 5까지의 수를 모두 더하는 코드를 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문을 사용하면 코드를 몇 번 반복하여 실행할지 결정할 수 있습니다. 조건식만 바꾸면 되기 때문에 1부터 5까지의 합을 구하는 코드와, 1부터 100,000까지의 합을 구하는 코드는 큰 차이가 없습니다.

let result = 0;

for (let num = 1; num <= 100000; num++) {
  result = result + num;
}

console.log(result); // 5000050000

이처럼 반복횟수가 크다고 해도 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. 반복문이 종료된다.

💡 for 문을 사용하는 이유 - 코드를 간결하게 하고 가독성도 높일 수 있다. 컴퓨터에게 우리가 의도한만큼 초기값 조건식 증감식 을 주어서 반복적인 동작을 할 수 있게 한다.

📌 반복문 활용하기

✅ 반복문 활용하기

 

이번에는 반복문으로 구구단을 출력해 보겠습니다. 조건문을 학습한 후 다음과 같이 구구단 n단을 출력했습니다.

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문을 사용하면 지금보다 간결하게 코드를 작성할 수 있을 것 같지 않나요? 좌변에 있는 변수 num과 곱해지는 우변에 있는 숫자들을 보니, 1부터 9까지의 숫자가 차례대로 나열되어 있습니다. 우변에 들어갈 숫자를 반복문으로 구현하면 어떻게 될까요?

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이므로, 결과적으로 이 코드는 각 문자를 하나씩 차례대로 출력하는 코드가 됩니다.

그런데 이렇게 코드를 구현하려면 문자열의 길이를 알고 있어야만 합니다. 문자열의 길이가 매우 길거나 또는 알 수 없는 상태일 때는 어떻게 해야 할까요? => .length 이용

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)로 조건식을 작성하면, 문자열의 끝까지 순회하는 반복문을 구현할 수 있습니다.

 

💡 반복문의 활용 1.구구단과 같이 차례대로 늘어나는 것을 표현할때는 반복문이 유용  2.문자열의 인덱스도 차례대로 늘어나고 숫자타입과 관련이 있기 때문에 반복문으로 문자열 끝까지 순회 하는 것을 구현 가능 만약 문자열의 길이를 알 수 없을 때는 .length 사용

 

📌 반복문과 조건문

✅ 반복문과 조건문

 

이제 반복문을 사용하는 이유와 사용 방법에 대해 어느 정도 이해가 되었을 겁니다. 반복문만 가지고도 다양한 문제를 해결할 수 있습니다. 하지만 반복이 진행되는 동안, 특정 조건에 따라 문제를 해결하도록 코드를 작성한다면, 더욱 복잡한 문제도 해결할 수 있습니다. 특정한 조건이라는 말을 들었을 때 조건문이라는 단어가 떠오르셨다면, 이전 학습을 충분히 잘 따라오신 겁니다.

 

💻 실습1)

 

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

 

💡 실습1 - 정답)

// 실습) 1부터 10까지의 숫자 중 홀수만 출력하도록 코드를 작성하세요.
for (let i = 1; i <= 10; i++) {
	// 조건문을 사용하여 홀수만 출력하도록 코드를 작성하세요.
	if (i % 2 === 1) {
		console.log(i);
	}
}

위 실습 예제에서 i는 1에서 시작하여 1씩 증가하는 동안 반복하여 실행됩니다. i가 10일 때까지 실행된 후, i가 11이 된 시점에서 반복문이 종료됩니다. 반복문 내부에서 실행되고 있는 코드는 if문입니다. if문은 소괄호 안에 있는 조건식이 true로 평가될 경우, 코드블록 내부의 코드가 실행됩니다. 조건식은 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}는 짝수입니다`);
  }
}

💡 반복문과 조건문을 사용하는 이유는 컴퓨터를 제어하기 위함이다.  만약 반복이 진행하는 동안 특정한 조건을 부여하고 싶으면 조건문을 사용하자.

📌 반복문의 중첩

✅ 반복문의 중첩

 

반복문은 중첩이 가능합니다. 다시 말해 반복문 내부에 또 다른 반복문을 사용할 수 있습니다.

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

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

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

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

이처럼 외부 반복문의 초기화와 조건식 평가가 이루어진 후, 내부 반복문이 실행됩니다. 내부 반복문 또한 초기화와 조건식 평가가 이루어진 후 내부에 있는 코드가 실행되고, 증감식, 조건식 평가가 반복적으로 이루어 집니다. 내부 반복문의 조건식 평가가 false가 되면, 내부 반복문은 종료가 되고 외부 반복문의 증감식과 조건식 평가가 이루어 집니다. 이때 조건식 평가가 true면, 다시 내부 반복문을 순환하는 방식으로 진행됩니다. 외부 반복문의 조건식이 false가 되면 모든 반복문이 종료가 됩니다.

반복문은 두 개 이상 중첩 가능합니다. 2개의 반복문이 중첩된 경우 이중반복문, 3개의 반복문이 중첩된 경우 삼중반복문이라고 부르기도 합니다. 아래는 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}입니다.`
      );
    }
  }
}

💡 반복문의 중첩 - 주사위 2개의 경우의 수를 기억하자. 

📌 while문

대표적인 반복문인 for문을 학습했습니다. 이번에는 또다른 반복문인 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문의 용도는 명확하게 구분되지 않습니다. while문으로 할 수 있는 것을 for문으로 구현이 가능하고, for문으로 할 수 있는 것을 while문으로 구현이 가능합니다. 그러나 주로 사용하는 상황은 있습니다. 아래 내용을 참고하여 상황에 맞는 반복문을 사용하시기 바랍니다.

 

for문을 사용하는 경우

• 반복 횟수가 비교적 명확할 때
• 배열, 문자열 내부를 순회할 때
• 반복문의 중첩이 필요할 때

while문을 사용하는 경우

• 반복 횟수가 명확하지 않을 때