본 포스팅은 깃헙 블로그 사용 당시 작성한 포스팅입니다.

중첩 for문으로 별별 모양 그려보기

컴퓨터 공학이나 아무튼 코딩 관련된 서적, 전공수업 등등에는 전설처럼(이 아니라 그냥 초반 문턱으로…) 반복문으로 탑쌓기 과제가 있다. 자바스크립트 서적을 보며 너무 귀찮아 보여서 넘어갔었는데, 문득 생각이 나서 이것저것 만들어 보았다.

기본적인 원리는 열을 이루는 외부 반복문과 행의 내용을 만드는 내부 반복문(들)을 적절히 사용해 모양을 만드는 것인데, 마치 고대의 아스키아트를 보는 느낌도 있고 그렇다.

1. 정사각형 그리기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

function square(x) {
  let block = "";
  for (i = 0; i < x; i++) {
    for (j = 0; j < x; j++) {
      block += "*";
    }
    block += "\n";
  }
  return block;
}

console.log(square(10));

// 결과

*****
*****
*****
*****
*****

가장 간단한 중첩 반복문 예시이다. 열을 생성하는 외부 반복문이 1번 실행되면 행을 생성하는 내부반복문이 x번만큼 실행되면서 X * X 크기의 정사각형이 완성된다. 슈퍼마리오 같은 고전게임의 블록은 아마 이런 반복문으로 만들어지지 않았을지..!

2. 1부터 x개까지 쌓이는 탑쌓기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

function tower(x) {
  let stars = "";
  for (i = 0; i < x; i++) {
    for (j = 0; j < i; j++) {
      stars += "*";
    }
    stars += "\n";
  }
  return stars;
}

console.log(tower(5));

// 결과

*
**
***
****
*****

타워보단 계단에 가까운 형태의 결과물이 나오는 중첩반복문 예시이다. 동일하게 열을 생성하는 외부 반복문이 1번 실행되면 내부 반복문이 i번 만큼 반복되면서 행을 만든다. 동일하게 슈퍼마리오 같은 고전 게임의 계단 블록이 아마 이런 반복문으로 만들어지지 않았나 싶다.

3. x부터 1까지 쌓이는 역방향 탑쌓기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

function reverseTower(x) {
  let stars = "";
  for (i = 0; i < x; i++) {
    for (j = x; j > i; j--) {
      stars += "*";
    }
    stars += "\n";
  }
  return stars;
}

console.log(reverseTower(10));

// 결과

*****
****
***
**
*

2번의 문제를 거꾸로 뒤집었다. 외부 반복문은 어찌됐건 열을 정하는 것이기 때문에, 항상 폼이 동일하다. 중요한 것은 내부 반복문인데, 거꾸로 출력이 되어야하니, 최대값인 x를 시작으로 반복될 때마다 횟수가 -1번이 되도록 반복시켜준다. 마리오에서의 지형지물…(비좁은 맵을 비좁게 지나가게 만들던 원흉…)

4. 대망의 별 피라미드 쌓기…⭐️

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

function stars(x) {
  let star = "";
  for (i = 0; i < x; i++) {
    for (j = x; j > i; j--) {
      star += " ";
    }
    for (k = 0; k <= i; k++) {
      star += "*";
    }
    for (l = 0; l < i; l++) {
      star += "*";
    }
    star += "\n";
  }
  return star;
}

console.log(stars(3));

// 결과

   *
  ***
 *****

별 피라미드는 두가지 방식으로 해보았다. 우선 첫째는 반복문을 3개를 사용해 만드는 방법이다. 내부 반복문 중 첫번째는 공백을 그리는데, 공백은 x개수부터 열이 변하면 1개씩 줄어든다. 두번째 내부 반복문은 기존 탑쌓기 반복문과 같이 순차적으로 1개씩 쌓아주며, 세번째 반복문은 두번째줄부터 반복되기 시작해 오른쪽 파트를 완성해준다. 사실 그렇게 효율적인 방법은 아니지만 날 것의 반복문으로만 만들고 싶어서 만들어보았다.

5. 대망의 별 피라미드 쌓기…⭐️ (2)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

function stars(x) {
  let star = "";
  for (i = 0; i < x; i++) {
    for (j = x; j > i; j--) {
      star += " ";
    }
    for (k = 0; k <= i * 2; k++) {
      star += "*";
    }
    star += "\n";
  }
  return star;
}

console.log(stars(5));

// 결과

     *
    ***
   *****
  *******
 *********

아마 가장 많이 풀이되는 방식일 거라고 생각한다. 첫째 내부 반복문까지는 4번 반복문과 동일하게 동작하며, 두번째 내부 반복문에서 4번 반복문과는 다르게 한번에 탑을 그린다. k인자가 이미 0에서 시작하기 때문에 i * 2번 만큼 반복하면 자연스럽게 1,3,5,7,9 … 처럼 2씩 늘어나며 탑이 그려진다.

해당 별로 그리는 문제는 정말 지독하게 하기 싫었지만 그래도 나름대로 풀어보니 재밌는 경험이 됐다. 알고리즘 문제들보다야 머리쓸 필요 없고 이것저것 다양한 그림을 그려보면서 나름 머리를 좀 식힌 것 같다. 다음에는 알고리즘 문제 풀이로 돌아와야지..꼭!