자바스크립트의 반복문은 3종류가 있다.

 

for문, while문, do-while문이다. 문법적인 문제는 넘어가고 여기에서는 반복문의 실행과정을 알아보고 이를 응용하는 방법을 알아보자.

 

아래의 기본적인 반복문을 보자.

 

<style>
* {
    font-family: "굴림체";
}
</style>

<script>
for(var i=0 ; i<5 ; i++)
{
    document.write(i);

// 줄바꿈
document.write("<BR>");

for(var i=0 ; i<5 ; i++)
{
    document.write('+');
}
</script>

 

위의 코드에서 css에 굴림체를 사용한 이유는 글자의 크기를 같게하여 +기호나 숫자 모두 같은 크기로 표현하기 위해서다.

반복횟수는 10회로 제한하였다.

 

실행결과를 보자.

 

 

위와 같이 10칸(0~9)에 +가 추가되었다.

 

이제 홀수번째칸에만 +를 짝수번째칸에는 -를 출력해보자.

 

홀수번째칸은 눈으로 보기에는 첫째칸이지만 위의 코드에서는 0이 홀수번의 첫 시작이다. 즉, 우리가 +를 출력해야 할 번호는 아래와 같다.

 

0, 2, 4, 6, 8 -> + 출력

1, 3, 5, 7, 9 -> - 출력

 

많은 프로그래머들이 실제 반복의 시작을 0으로 잡고 사용하고 있다. 이런이유는 반복하는 횟수가 코드상에 명확히 보이기 때문이다. 

 

for ( var i = 0 ; i < 10 ;  i++ )  ===> 10 회 반복을 코드상에서 바로 판독한다.

 

물론 1부터 시작하여도 된다. 그런 경우 아래와 같이 표기하며 된다.

 

for ( var i = 1 ; i < 11 ; i++ )   ===> 11로 표기하였지만 시작값이 1이므로 10회반복을 의미.

 

어떻게 표현할 지는 작성자의 마음이다. 그러나 많은 프로그래머들이 0을 시작점으로 사용하고 있다.

 

<style>
* {
    font-family: "굴림체";
}
</style>

<script>
for(var i=0 ; i<10 ; i++)
{
    document.write(i);
}
//줄바꿈
    document.write('<BR>');

for(var i=0 ; i<10 ; i++)
{
    if( i % 2 == 0) {
        document.write('+');
    } else {
        document.write('-');
    }
}
</script>

 

실행결과는 아래와 같다.

 

 

이제 중첩 반복문을 작성해보자.

+대신 -를 출력해 보겠다.

 

중첩 반복문은 10 X 10회씩 반복시키겠다.

 

<style>
* {
    font-family: "굴림체";
}
</style>

<script>
document.write('.');
for(var i=0 ; i<10 ; i++)
{
    document.write(i);
}
//줄바꿈
document.write('<BR>');
for(var i=0 ; i<10 ; i++)
{
    document.write(i);
    for(j=0 ; j<10 ; j++)
    {
        document.write('-');
    }
    document.write('<br>'); // 줄바꿈
}
</script>

 

실행결과는 아래와 같다.

 

 

 

처음의 수평 0~9까지는 내부반복문(var j)의 수행결과이고 행으로 표시된 0~9는 외부반복문(var i)의 실행결과이다.

 

이제 대각선(10시에서 5시방향)으로 *를 찍어보자.  

 

	0	1	2	3	4	5	6	7	8	9
0	*
1		*
2			*
3				*
4					*
5						*
6							*
7								*
8									*
9										*

 

위와 같이 표시되어야한다. 즉, i == j 인 경우이다. 이를 프로그램으로 바꾸어보자.

 

    font-family: "굴림체";
}
</style>

<script>
document.write('.');
for(var i=0 ; i<10 ; i++)
{
    document.write(i);
}
//줄바꿈
document.write('<BR>');
for(var i=0 ; i<10 ; i++)
{
    document.write(i);
    for(j=0 ; j<10 ; j++)
    {
        if (i==j) {
            document.write('*');
        } else {
            document.write('-');
        }
    }
    document.write('<br>'); // 줄바꿈
}
</script>

 

if의 조건문에 i==j를 주었다.

 

결과는 아래와 같다.

 

 

이번에 2시에서 7시방향으로 대각선 *를 출력해보자.

 

	0	1	2	3	4	5	6	7	8	9
0										*
1									*
2								*
3							*
4						*
5					*
6				*
7			*
8		*
9	*

 

위와 같이 출력되어야 한다. 규칙을 발견해보자.

i = 9 일때 j = 0

i = 8 일때 j = 1

i = 7 일때 j = 2

......

i = 0 일때 j = 9

 

즉 i+j = 9 일때 *를 출력하면 된다. 이제 프로그램으로 작성해보자.

 

<style>
* {
    font-family: "굴림체";
}
</style>

<script>
document.write('.');
for(var i=0 ; i<10 ; i++)
{
    document.write(i);
}
//줄바꿈
document.write('<BR>');
for(var i=0 ; i<10 ; i++)
{
    document.write(i);
    for(j=0 ; j<10 ; j++)
    {
       if (i+j==9) {
           document.write('*');
       } else {
           document.write('-');
       }
    }
    document.write('<br>'); // 줄바꿈
}
</script>

 

출력결과를 확인해보자.

 

 

정상적으로 출력되었다.

 

그러면 X모양으로 *를 출력해보자.이 조건은 위의 예로 알고있다.

i == j 일때와 i+j == 9 때이다. 프로그램을 작성해보자.

 

<style>
* {
    font-family: "굴림체";
}
</style>

<script>
document.write('.');
for(var i=0 ; i<10 ; i++)
{
    document.write(i);
}
//줄바꿈
document.write('<BR>');
for(var i=0 ; i<10 ; i++)
{
    document.write(i);
    for(j=0 ; j<10 ; j++)
    {
        if (i==j || i+j==9) {
            document.write('*');
        } else {
            document.write('-');
        }
    }
    document.write('<br>'); // 줄바꿈
}
</script>

 

실행결과는 아래와 같다.

 

 

정상적으로 출력되었다.

 

이번엔 위에 배운것들을 응용하여 아래와 같이 사각형 모양의 *를 그려보자.

 

	0	1	2	3	4	5	6	7	8	9
0	*	*	*	*	*	*	*	*	*	*
1	*									*
2	*									*
3	*									*
4	*									*
5	*									*
6	*									*
7	*									*
8	*									*
9	*	*	*	*	*	*	*	*	*	*

 

우선 맨위의 *는 j=0 일때이다.

첫 수직은 i=0 일때이다.

끝 수직은 i=9 일때이다.

마지막줄은 j=9 일때이다.

 

출력조건은 모두 나왔다.

 

j == 0 || i == 0 || i ==9 || j == 9

 

위의 조건으로 프로그래밍을 해보자.

 

<style>
* {
    font-family: "굴림체";
}
</style>

<script>
document.write('.');
for(var i=0 ; i<10 ; i++)
{
    document.write(i);
}
//줄바꿈
document.write('<BR>');
for(var i=0 ; i<10 ; i++)
{
    document.write(i);
    for(j=0 ; j<10 ; j++)
    {
        if (j == 0 || i == 0 || i == 9 || j == 9) {
            document.write('*');
        } else {
            document.write('-');
        }
    }
    document.write('<br>'); // 줄바꿈
}
</script>

 

결과는 아래와 같다.

 

 

정상적으로 출력되었다.

 

우리는 복잡해 보이는 과정이라도 차분히 생각하여 일정한 규칙을 발견하고 응용하면 보다 나은 코드를 작성할 수 있다.

이러한 과정은 한번에 딱 되는 것이 아니다. 

차분히 생각하는 과정과 연습이 필요하다.

한번에 안된다고 낙심할 필요가 전혀 없다.