티스토리 뷰

728x90
반응형

코테를 준비하다가 지그재그 출력에 대해 자세히 잘 모르는 것 같아 이번 기회에 정리를 해보려 한다.

 

 

 

일정 숫자에서 출력

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

이 부분은 많이들 하신 거 같으니 설명은 생략하겠습니다.

<html>
  <body>
    <h2>지그재그 출력</h2>
    <script>
      const num = 25;
      for (let i = 1; i <= num; i++) {
        document.write(`${i} `);
        if (i % 5 == 0) {
          document.write("<br />");
        }
      }
    </script>
  </body>
</html>

일단 출력은 5의 숫자에서 잘 떨어지게 출력이 된다...

문제는 깔끔하게 하기 위해 10 미만의 숫자에는 공백을 추가하였지만...

 

숫자 출력에 공백 추가

하지만 깔끔하게 잘 되지 않는다.

이전에 커멘드 출력을 할 때는 잘 된 것 같았지만, 잘 모르겠다.

 

그러니 일단 노가다로 해보자.

<html>
  <body>
    <h2>지그재그 출력</h2>
    <script>
      for (let i = 1; i <= 5; i++) {
        document.write(`${i} `);
      }
      document.write("<br />");
      for (let i = 10; i >= 6; i--) {
        document.write(`${i} `);
      }
      document.write("<br />");
      for (let i = 11; i <= 15; i++) {
        document.write(`${i} `);
      }
      document.write("<br />");
      for (let i = 20; i >= 16; i--) {
        document.write(`${i} `);
      }
    </script>
  </body>
</html>

일단 노가다로 할 경우 위와 같은 코드로 나온다.

노가다의 산출물

하지만 결과는 맞아도 이건 개발자스럽지 않은 방법이다.

여기서 규칙을 찾아야 한다...

모르겠다.

 

다른 블로그를 참고해보려고 한다.

처음 코드를 그대로 가져와 적어보면서... 이해가 가지 않았다.

그리고 코드 하나하나 뜯어보았다.

<html>
  <body>
    <h2>지그재그 출력</h2>
    <script>
      const maxLine = 5;
      let minNumber = 0;
      for (let i = 1; i <= maxLine; i++) {
        let data = [];
        for (let j = 1; j <= 5; j++) {
          minNumber += 1;
          data.push(minNumber);
        }
        if (i % 2 == 0) {
          data.reverse();
        }
        document.write(`${data}<br />`);
      }
    </script>
  </body>
</html>

위위 코드는 필자가 이해를 통해 만든 코드다

그리고 아래는 결과물이다.

 

지그재그 자바스크립트 출력

여기서 알 수 있었던 것은, 배열을 통해서 출력하는 법 push를 다시 한번 기억하게 해 주었다.

그리고 여기서 핵심은 reverse함수

javascript에서 reverse함수는 전체 문자열이나, 배열에 따라 거꾸로 출력을 해주는 함수다.

이 함수로 간편하게 할 수 있었다.

 

 

 

사실 필자는 코딩테스트 많이 준비는 하지 않았다.

하지만 이제 점점 현실적으로 코딩 테스트의 절실함을 느꼈고 준비를 하면서의 과정을 적어보았다.

물론 처음은 쉽지 않지만, 예전에 구구단이 어려웠던 것 처럼

이후에는 언제든 구구단 코드를 출력할 수 있는 실력을 가지기 위해선

역시 반복과 학습이 항상 존재한다는 것을 다시 한번 깨달았다.

 

이렇게 기본 개념을 하다 보니 조금씩 개념 정리를 하는데도 많은 도움이 되었다.

728x90
반응형
댓글
250x250
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2025/01   »
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
26 27 28 29 30 31
글 보관함