[프론트엔드][JavaScript] 14. 중첩 반복문 (구구단, 별찍기)

중첩 반복문

: 반복문이 2개 이상 겹쳐 있는 것을 의미한다.

 

 

예제 코드

구구단 출력하기

<script>
    'use strict';
    for(let i=2; i<=9; i++){
      document.write(`<p>${i}단</p>`);
      for(let j=1; j<=9; j++){
      	document.write(`${i} * ${j} = ${i*j} <br>`);
      }
    }
</script>

 

바깥 for문은 2~9까지의 단을 반복하게 한다.

안쪽 for문은 각 단에서 곱해질 1~9의 숫자를 반복한다.

 

 

 

별찍기

<script>
  for(let i=1; i<=5; i++){
    for(let j=i; j<=5; j++){
      document.write(`★ `);
    }
    document.write(`<br>`);
  }
</script>

 

바깥 for문은 1~5 줄을 반복한다.

안쪽 for문은 각 줄에서 반복한다.

1번째 줄에서는 1~5개의 별을 찍고, 줄바꾸고,

2번째 줄에서는 2~5개의 별을 찍고, 줄바꾸고,

... 

이런 식으로 별을 찍을 수 있다.

 

 

<script>
  for(let i=1; i<=5; i++){
    for(let j=1; j<=i; j++){
      document.write(`★ `);
    }
    document.write(`<br>`);
  }
</script>

 

이번에는 위와 반대의 형태인 모양을 만들어보자.

 

바깥 for문은 1~5의 줄을 반복한다.

안쪽 for문은 각 줄 안에서 반복을 한다.

 

1번째 줄에서는 1~1개의 별을 찍고 줄을 바꾼다.

2번째 줄에서는 1~2개의 별을 찍고 줄을 바꾼다.

...

이렇게 1부터 n까지 별을 찍으면 아래와 같은 모양이 출력된다.