[S1-Unit02] JavaScript 기초 - 반복문
포스트
취소

[S1-Unit02] JavaScript 기초 - 반복문

반복문이란?

반복문 은 프로그램 내에서 똑같은 명령을 일정 횟수만큼 반복하여 수행하도록 제어하는 명령문이다.

1. for문

JavaScript의 대표적인 반복문인 for문이 있다.

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

1
2
3
4
5
6
7
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문으로 구현하면 다음과 같다.

1
2
3
4
5
6
7
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
2
3
4
5
6
7
let result = 0;

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

console.log(result); // 5000050000


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

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

for 뒤에 들어오는 소괄호(())에는 각각 초기값, 조건식, 증감식이 들어간다. 코드블록에는 반복해서 실행할 수 있는 코드가 들어간다. for문을 구성하는 각 요소에 대해 하나하나 자세히 살펴본다.

  • 초기값: 증감식 반복횟수를 카운트하는 역할을 하는 변수다. (이때 변수는 정수를 의미하는 ‘integer’의 약자인 i를 주로 사용한다.) 초기값은 반복문의 코드블록 내부에서만 유효한다.
    1
    2
    3
    4
    
    // 초기값(i)을 선언하고 1을 할당
    for (let i = 1; 조건식; 증감식) {
        console.log(i);
    }
    
  • 조건식: 코드블록 내부의 코드를 실행 여부를 결정한다. true일 경우에는 코드를 실행하며, false일 경우 반복문이 종료된다.
    1
    2
    3
    4
    
    // i가 3보다 작거나 같을 경우 코드 실행, 3보다 클 경우 반복문 종료
    for (let i = 1; i <= 3; 증감식) {
        console.log(i);
    }
    
  • 증감식: 코드블록 내부의 코드를 실행한 후 초기값으로 선언된 변수를 증가 또는 감소시키기 위한 표현식이다.
    1
    2
    3
    4
    
    // 코드가 실행될 때마다 i가 1씩 증가
    for (let i = 1; i <= 3; i++) {
        console.log(i); // 1 2 3
    }
    

for문의 중첩

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

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

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

반복문의 두 개 이상 중첩 가능하다. 2개 반복문의 중첩된 경우 이중반복문, 3개의 반복문이 중첩된 경우 삼중반복문이라고 부른다. 다음은 3개의 반복문이 중첩된 삼중반복문의 예시다.

1
2
3
4
5
6
7
8
9
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문은 조건식만 입력한 후 조건식의 평가결과가 true인 경우 코드블록 내부의 코드를 반복하여 실행한다.

1
2
3
4
5
6
let num = 0;

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

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

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

while문을 사용할 때에는 무한루프를 주의해야 한다. 무한루프 란 반복문의 종료되는 조건식이 항상 참으로 평가되어 무한히 반복되는 현상을 말한다.

1
2
3
4
5
let num = 1;
while(num > 0) {
  coconsole.log(num);
  num++;
}

위 코드에서는 num은 1로 항상 0보다 크므로, 무한루프가 발생한다. 따라서 while문을 작성할 때는 조건식이 false로 평가되는 순간이 있는지 반드시 확인해야한다.


3. do while문

do while문은 while 뒤에 오는 조건식이 true로 평가되는 동안 do 뒤에 오는 코드블록 내부의 코드를 반복하여 실행한다. 단, 이 경우 do의 코드블록 내부의 코드가 최소 한 번은 실행된다.

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


4. for문과 while문

for문과 while문의 용도는 명확하게 구분되지 않는다. while문으로 할 수 있는 것을 for문으로 구현이 가능하고, for문으로 할 수 있는 것을 while문으로 구현이 가능하다. 그러나 주로 사용하는 상황은 다음과 같다.

for문을 사용하는 경우

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

while문을 사용하는 경우

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


Reference

CODESTATES (SEB_FE_43)

이 기사는 저작권자의 CC BY 4.0 라이센스를 따릅니다.