[javascript 언어공부] 반복문(3)

이번에는 반복문의 효용에 대해서 알아보자.

어떤 것을 공부할때, 공부만 하는 것은 재미 없을 수 있다.

'이게 없다면 얼마나 불편할까?' 라고 생각해 보는 것도 중요하다.

이것이 없었던 시절에 살았던 사람이라고 상상해보고 

그 기능이 없었을 때 얼마나 불행했을까,

그리고 그 기능이 처음 개발했을 때 사람들이 얼마나 기뻐했을까

라는 것에 대해 공감해보면 좋을 것이다.

다음과 같은 코드를 작성 후 실행해보면 

document.write('coding everybody');

브라우저엔 coding everybody가 출력될 것이다. 

누군가가 이것을 10줄 출력하라고 한다면,

document.write('coding everybody <br />');

document.write('coding everybody <br />');

document.write('coding everybody <br />');

document.write('coding everybody <br />');

document.write('coding everybody <br />');

document.write('coding everybody <br />');

document.write('coding everybody <br />');

document.write('coding everybody <br />');

document.write('coding everybody <br />');

document.write('coding everybody <br />');

이와 같이 복사, 붙여넣기를 해야 했을 것이다. 

하지만 이를 10000번 붙여넣기 해야한다면??

또, 만약 저 코드 안에 몇번째 줄인지 넣으라 한다면 

document.write('coding everybody 1<br />');

document.write('coding everybody 2<br />');

document.write('coding everybody 3<br />');

document.write('coding everybody 4<br />');

document.write('coding everybody 5<br />');

document.write('coding everybody 6<br />');

document.write('coding everybody 7<br />');

document.write('coding everybody 8<br />');

document.write('coding everybody 9<br />');

document.write('coding everybody 10<br />');

그런데 누군가가 저 숫자를 2의 배수로 바꾸라 한다면??

이처럼 노가다 작업을 지속적으로 한다는 것은 매우 피곤한 일이다.

이를 반복문으로 바꿔보자.

for{var i=0;i<10;i++}{

document.write('coding everybody <br />');

}

만약 1000줄이 필요하다면? 

for{var i=0;i<10000;i++}{

document.write('coding everybody <br />');

}

만약 뒤에 숫자를 붙여야 한다면? 

for{var i=0;i<10000;i++}{

document.write('coding everybody '+i+'br />');

}

만약 이 숫자에 2를 곱해야 한다면? 

for{var i=0;i<10000;i++}{

document.write('coding everybody '+2i+'br />');

}

이처럼 손쉽게 변경이 가능할 것이다. 

다음으로 반복문의 제어에 대해서 배워보겠다.

반복문을 언제까지 반복할것이냐가 반복문의 제어의 핵심이다.

- 반복문을 강제로 종료시키고 싶다. (break)

- 현재 박복되는 것만 skip 시키고 다시 반복문을 실행하고싶다. (continue) 

하는 기능을 생각해볼 수 있다.

먼저 반복문을 강제로 종료시키는 제어문 break에 대해서 알아보자. 

다음 코드를 살펴보자. 기존 for문에서 빨간색 부분만 추가된 코드이다. 

for(var i = 0; i < 10; i++){

    if(i === 5) {

        break;

    }

    document.write('coding everybody'+i+'<br />');

}

실행시키면 

coding everybody 0

coding everybody 1

coding everybody 2

coding everybody 3

coding everybody 4

0~4까지 실행되는데, 이는 i가 1씩 증가 하다가 딱 5가 되는 상태에서 진입했을 때, if 부분이 true가 되서 

if절 안에 들어갈 수 있게 되는데, 이 때 break라는 키워드를 만나고, break는 현재 진행하던 반복문을 중단하고 밖으로 나가라는 뜻이기 때문에 

실행하던 반복문 중괄호 바깥으로 나가게 되는 것이다. 

반복문은 이처럼 중단시킬 수 있으며, 또 한가지로

반복문 안에 조건문이 들어갈 수 있다는 것을 기억하자. 

이제 또 하나의 제어문 continue에 대해서 알아보자.

하단의 코드를 살펴보면,

for(var i = 0; i < 10; i++){

    if(i === 5) {

        break;

    }

    document.write('coding everybody'+i+'<br />');

}

실행시키면 다음과 같다. 

coding everybody 0

coding everybody 1

coding everybody 2

coding everybody 3

coding everybody 4

coding everybody 6

coding everybody 7

coding everybody 8

coding everybody 9

5번이 빠져있는데, 그 이유는 

i의 값이 5가 됐을 때 if문에 진입해 continue를 만나는데, continue는 현재 중지되고 다시 

i++ 부분으로 가게 된다.  

즉 break는 반복문의 종료, continue는 그 순간에만 중지시키는 것이고, 반복문은 다시 실행되는 것이다. 

마지막으로 반복문의 중첩에 대해서 알아보자. 

반복문 안에는 반복문이 또 들어갈 수 있다. 

하단의 코드를 살펴보자. 

for(var i = 0; i < 10; i++){

    document.write('coding everybody'+i+'<br />');

}

이를 실행시키면 

coding everybody 0

coding everybody 1

coding everybody 2

coding everybody 3

coding everybody 4

coding everybody 5

coding everybody 6

coding everybody 7

coding everybody 8

coding everybody 9

0~9까지 출력됨을 알 수 있다. 

이번에는 0부터 9까지가 아니라 

0부터 99까지 카운트 되는데, 숫자가 00, 01, 02, 03 ... 99 처럼 카운트 됐으면 좋겠다. 

코드를 한번 작성해보자. 

00

01

02

03

...

99

라고 봤을 때, 

앞쪽의 있는 숫자를 i가 책임지도록 하고, 

뒷쪽의 숫자를 v가 책임지도록 해보자.

코드를 작성해보면 다음과 같다. 

for(var i = 0;i < 10; i++){

for(var v=0;var v<10;var v++){

document.write('coding everybody '+i+v+'<br />');

}

}

사실 i+j는 숫자+숫자이기 때문에 숫자를 반환하지만, 

얖에 coding every라는 문자가 있기 때문에 i가 문자열이되고, v도 문자열이 돼서 

문자열+문자열 결합이 돼서 2개의 문자의 결합이 되는 것이다. 

결과를 실행해보면 다음과 같다.

coding everybody 09

coding everybody 02

coding everybody 03

....

coding everybody 10

coding everybody 20

....

coding everybody 99

과연 소스가 어떤식으로 실행되는 것일까? 

for(var i = 0;i < 10; i++){

for(var v=0;var v<10;var v++){

document.write('coding everybody '+i+v+'<br />');

}

}

이를 디버깅 해보자. 

1. for(var i = 0;i < 10; i++){

// 우선 컴퓨터는 var i=0이라는 코드를 읽는다. 

//그런 후 i<10이라는 조건을 확인 한다. 

//조건이 일치할 경우 중괄호 안으로 들어간다. 

//현재 i는 0, v는 undefined다. 

2. for(var v=0;v<10;var v++){

//또 다시 조건문을 만난 컴퓨터는 var v=0이라는 코드를 읽는다.

//이후 v가 10보다 작은지 확인 한 후 

//조건이 일치할 경우 중괄호 안으로 들어간다. 

//현재 i는 0, v는 0이다. 

3. document.write('coding everybody ' +i+v+'<br />');

//중괄호 안의 코드를 실행한다 

// 브라우저에 coding everybody 00 이 출력된다.

// 실행이 끝나면 다시 해당 for문으로 돌아간다.

4. for(var v=0;v<10;var v++){

// v++를 수행한다.

//이후 v가 여전히 10보다 작은지 확인한다.

//조건이 일치하면 다시 중괄호 안으로 들어간다.

//현재 i는 0이고 v는 1이다. 

5. document.write('coding everybody ' +i+v+'<br />');

//중괄호 안의 코드를 실행한다 

// 브라우저에 coding everybody 01 이 출력된다.

// 실행이 끝나면 다시 해당 for문으로 돌아간다.

6. for(var v=0;v<10;var v++){

// v++를 수행한다.

//이후 v가 여전히 10보다 작은지 확인한다.

//조건이 일치하면 다시 중괄호 안으로 들어간다.

//현재 i는 0이고 v는 2이다. 

7. document.write('coding everybody ' +i+v+'<br />');

//중괄호 안의 코드를 실행한다 

// 브라우저에 coding everybody 02 이 출력된다.

// 실행이 끝나면 다시 해당 for문으로 돌아간다.

이와 같은 작업을 반복한다. 

컴퓨터가 브라우저에

coding everybody 09라고 출력한다. 

8. for(var v=0;v<10;var v++){

// v++를 수행한다.

//이후 v가 여전히 10보다 작은지 확인한다.

//v가 10이 됐기 때문에 조건이 일치하지 않는다. 중괄호 밖으로 나간다. 

//현재 i는 0이고 v는 10이다. 

9. for(var i = 0;i < 10; i++){

// i++를 수행한다.

//이후 i가 여전히 10보다 작은지 확인한다.

//조건이 일치하면 다시 중괄호 안으로 들어간다.

//현재 i는 1이고 v는 10이다.

10. for(var v=0;v<10;var v++){

//또 다시 조건문을 만난 컴퓨터는 var v=0이라는 코드를 읽는다.

//이후 v가 10보다 작은지 확인 한 후 

//조건이 일치할 경우 중괄호 안으로 들어간다. 

//현재 i는 1, v는 0이다. 

이와 같이 다시 중괄호 안의 조건문을 실행한다. 

쭉 실행한다.

컴퓨터가 coding everybody 99를 브라우저에 출력한다.

11. for(var v=0;v<10;var v++){

// v++를 수행한다.

//이후 v가 여전히 10보다 작은지 확인한다.

//v가 10이 됐기 때문에 조건이 일치하지 않는다. 중괄호 밖으로 나간다. 

//현재 i는 9이고 v는 10이다. 

12. for(var i = 0;i < 10; i++){

// i++를 수행한다.

//이후 i가 여전히 10보다 작은지 확인한다.

//i가 10이 됐기 때문에 조건이 일치하지 않는다. 중괄호 밖으로 나간다. 

//현재 i는 10이고 v는 10이다.

코드는 이렇게 마무리 된다.