[JS/반복문] 자바스크립트, 가장 기초적인 반복문 for문의 동작 원리 (for문/이중for문/break/continue)

어떤 언어에서든지 매우 중요하게 다뤄지는 반복문에 대해서 정리해보려고 한다.

 

1. for문

반복문은 어떤 동작을 여러 번 실행할 때 사용한다.

만약에 어떤 변수에 1부터 10까지 더한다고 생각해보자.

반복문이 없다면 우리는 변수에 계속해서 숫자를 더하는 코드를 10줄 써야할 것이다.

var sum = 0;
sum += 1;
sum += 2;
sum += 3;
sum += 4;
sum += 5;
sum += 6;
sum += 7;
sum += 8;
sum += 9;
sum += 10;

이 얼마나 귀찮은(!)

100까지 더하면 100줄, 1000까지 더하면 1000줄로 늘어난다(!)

 

물론 컴퓨터는 매우 똑똑해서 귀찮은 반복작업을 대신 해준다.

그 때 사용하는 것이 반복문인데 가장 많이 사용되는 for문으로 코드를 적어보면 이렇다.

 

var sum = 0;
for(var i=1; i<11; i++) {
	sum += i;
}

for문의 동작 원리는 다음과 같다.

 

for문은 ()안에 초기식, 조건식, 증감식이 들어간다.

for(초기식; 조건식; 증감식) {
	명령문;
}

실행순서는 이렇다.

 

1. 초기식
2. 조건식
   1. 조건식이 truthy이면 명령문 실행
   2. 조건식이 falsy이면 반복문 실행종료
3. 조건식이 truthy이고 명령문이 실행되었다면 증감식
4. 다시 조건식
   1. 조건식이 truthy이면 명령문 실행
   2. 조건식이 falsy이면 반복문 실행종료
5. ... 무한반복

 

이걸 좀 더 쉽게 그림으로 표현하면 아래와 같다.

(조건식을 좀 더 간단하게 i < 3으로 변경하였다.)

 

 

그렇다면 다음 코드를 실행하면 console창에는 어떤 결과가 찍힐까?

var i = 0;
function init() {
    console.log('me');
}
function isValid() {
    console.log('you');
    return i < 5;
}
function update() {
    console.log('we');
    i++;
}
for(init(); isValid(); update()) {
    console.log(i);
}

정답은 이렇다.

 

먼저 초기식인 init()가 실행되어 'me'가 출력된다.

그리고 조건식으로 넘어가서 'you'가 출력된다.

그리고 i가 5보다 작은지 판별한 후, 5보다 작으니까 true를 return한다.

그리고 console.log(i)를 실행하여 0을 출력한다.

 

그리고 증감식으로 가서 'we'를 출력하고 i를 1증가시킨다.

다시 조건식으로 가서 'you'를 출력한 후

i가 5보다 작은지 확인하고 true를 return한다.

그리고 console.log(i)를 실행하여 1을 출력한다.

 

...반복...

 

그리고 맨 마지막에 i가 5가 되는 순간

isValid() 실행하여 'you'를 출력하고 false가 return되므로

반복문 실행은 종료되고 반복문을 빠져나가게 된다.

 

 

 

2. 이중 for문(중첩 for문)

우리는 때에 따라서 반복을 중첩해서 사용해야 할 때가 있다.

 

가장 많은 사람들이 예제로 사용하는 구구단 출력을 살펴보자.

구구단은 2단부터 9단이 있다.

2~9까지 8번 반복을 해야한다는 말이다.

 

그런데 각 단에서 우리는 1부터 9까지 곱하는 반복을 해야한다.

각 단마다 또 9번을 반복을 해야한다는 말이다.

 

즉, 8번 반복하여 1단부터 9단을 만들고

각 단마다 9번 반복하여 연산을 해야한다는 말이다.

 

코드로 표현해보면 다음과 같다.

for(var i=2; i<10; i++) {
    console.log(i+'단 출력 시작');
    for(var j=1; j<10; j++) {
        console.log(i + ' X ' + j + ' = ' + i*j);
    }
    console.log(i+'단 출력 끝');
}

위 코드의 실행과정

위 그림을 보면 알겠지만

바깥쪽 for문이 실행하다가 안쪽에서 또 for문을 만나면

안쪽의 for문을 먼저 실행시키고 안쪽의 loop가 다 끝나고 빠져나오면

다시 바깥쪽 for문의 loop를 실행한다.

 

위 코드를 실행해보면 console창에 다음과 같이 출력된다.

 

 

3. 반복문 종료방법(break, continue, return의 차이점)

반복문을 실행하다가 중간에 종료하는 방법에는

break와 continue, return 등이 있다.

 

반복문을 실행하다가 break문을 만나면 

반복문은 그 즉시 실행을 멈추고 반복문은 종료된다.

function addNum() {
    var sum = 0;

    for(var i=1; i<51; i++) {
        if(sum > 100) {
            break;
        }
        sum += i;
    }

    console.log(sum);    // 1275 -> 105
}
addNum();

위 함수는 1부터 50까지의 수를 모두 더하는 함수이다.

1부터 50까지 더하면 1275가 출력되어야 하지만

sum이 100보다 커지는 순간 break문을 만나 반복을 종료하게된다.

 

 

break와 다르게 continue는 특정 조건이 주어졌을 때,

그 조건이 만족하는 값을 만나면 명령을 건너뛰고 다음으로 넘어갈 때 쓴다.

function addNum() {
    var sum = 0;

    for(var i=1; i<51; i++) {
        if(i % 2 === 0) {
            continue;
        }
        sum += i;
    }

    console.log(sum);    // 625
}
addNum();

위 코드는 1부터 50까지의 숫자 중 홀수만 더하는 코드이다.

i를 2로 나눴을 때 나머지가 0이라면 그 숫자는 짝수이므로

continue문을 사용하여 명령을 실행시키지 않고 건너뛰도록 만들어준 것이다.

 

만약 (i % 2 === 1)이라는 조건을 주었다면 짝수만 더하고 출력되었을 것이다.

 

 

return은 반복문을 종료시키기도 하지만 함수 자체를 종료시킨다.

예를 들면 다음과 같다.

function addNum() {
    var sum = 0;

    for(var i=1; i<51; i++) {
        if(sum > 100) {
            return;
        }
        sum += i
    }

    console.log(sum)
}
addNum()

sum이 100보다 클 때 break문을 실행했을 때는

반복문을 빠져나가 console창에 sum을 출력하고 종료되었다.

 

그러나 break대신 return을 쓰게되면

sum이 100보다 커지는 순간 반복문뿐만 아니라 addNum이란 함수 자체를 종료시킨다.

그러므로 console창에는 아무 값도 출력되지 않게된다.