[새싹x코딩온] 웹 개발자 부트캠프 과정 5 | JS 별 그리기 과제

별 그리기 과제

오늘은 과제중에서 헷갈렸던 별그리기 과제를 어떻게 풀었는지 적어보려고 한다.

과제1

      function drawStars(lines) {
        while (lines > 0) {
          console.log("*".repeat(lines));
          lines--;
        }
      }
      drawStars(3);

나는 위와 같은 방식으로 코드를 작성했다.while 문을 사용하여 lines가 0보다 클 때까지만 반복하도록 하고, lines의 수만큼 별을 반복 출력하도록 했다. 별의 수가 하나씩 줄어들어야 하므로 lines--로 감소시켰다.

과제2

      function drawStars2(lines) {
        for (let i = 1; i <= lines; i++) {
          if (i === lines) {
            console.log("*".repeat(i));
          } else {
            console.log(" ".repeat(lines - i) + "*".repeat(i));
          }
        }
      }
 drawStars2(3);

이번에는 for 루프 사용해서 별을 만드는 함수를 만들었다. 예를 들어서 drawStars2(3)을 호출하면 매개변수가 3이므로 i가 1,2,3으로 세 번 반복된다. 이 함수에서는 숫자에 해당하는 별을 출력하는데 i가 lines,즉 마지막 숫자 3일 때는 그 숫자만큼의 별을 출력하고 그렇지 않을 경우에는 앞에 공백을 두고 별을 출력한다. 이 때 공백의 개수는 lines에서 현재 줄 번호 i를 뺀 값이다. 예를 들어 첫번째 줄에서는 3-1=2개의 공백을 출력하고 두번째에는 3-2=1개의 공백을 출력한다. 흠 근데 다시 이 문제를 보니 조건문 안하고 그냥 아래의 코드로 쓰면 될거 같다.

 function drawStars2(lines) {
        for (let i = 1; i <= lines; i++) {
          console.log(" ".repeat(lines - i) + "*".repeat(i));
        }
      }

이렇게 쓰는게 더 간단한거 같다. *은 i숫자만큼 출력하고 앞에 공백은 각각 3-2=1 3-1=2 3-3=0이 된다. 결국 위에쓴 코드랑 똑같음.

과제3

      function drawStars3(lines) {
        for (let i = 1; i <= lines; i++) {
          let space = lines - i;
          let stars = 2 * i - 1;
          let starLine =
            " ".repeat(space) + "*".repeat(stars) + " ".repeat(space);

          console.log(starLine);
        }
      }

위의 문제와 똑같이 for 루프로 반복해주고 여기서는 space 변수를 만든다음에 lines -i로 넣어주었다. 별은 각 줄마다 홀수숫자로 프린트 되어있기 때문에 2*i -1 넣어주었고 총 라인에 각각 공백숫자랑 별 숫자 넣어주었다.

과제4

이 부분부터 엄청 헷갈렸다. 일단 별을 위층에 있는 별과 아래층에 있는 별로 나누어서 코드를 작성했다. 위층에서는 별의 개수가 증가하고, 아래층에서는 별의 개수가 감소하기 때문이다.

      function drawStars4(lines) {
        for (let i = 1; i <= lines; i++) {
          let space = lines - i;
          let stars = 2 * i - 1;
          let starLine =
            " ".repeat(space) + "*".repeat(stars) + " ".repeat(space);
          console.log(starLine);
        }
        for (let j = lines - 1; j >= 1; j--) {
          let space = lines - j;
          let stars = 2 * j - 1;
          let starLine =
            " ".repeat(space) + "*".repeat(stars) + " ".repeat(space);
          console.log(starLine);
        }
      }

이 코드에서는 위층과 아래층을 각자 맡은 두개의 for루프를 사용한다. 위층은 별의 개수 증가하고 아래층은 별의 개수 감소하는걸 생각해서 작성하면 된다.

여기서도 일단 for loop i로 윗층에 있는 별을 출력해줬다. 윗층은 문제 3과 똑같았다. 밑에 층은 j로 loop해줬는데 여기는 반대로 줄어드는 거기 때문에 j--를 써줬다. 또 음수가 되면 안되기때문에 j >=1까지 루프되는걸로 써줬다. 윗층에서 lines 숫자까지의 별을 출력해줬기 때문에 j는 lines -1부터 시작한다.

과제5

      function drawStars5(lines) {
        for (let i = 0; i < lines; i++) {
          let space = " ".repeat(lines - i - 1);
          let stars = "*".repeat(lines);
          console.log(space + stars);
        }
      }

이것도 for loop로 반복해주었다. space에 이렇게 lines - i -1 넣어준 이유는 제일 위에 프린트 되는 별이 한칸씩 더 뒤로 가야하기 때문이다. 그 말은 즉 공백을 하나씩 더 가져야 한다는 뜻이다.

느낀점

아직 답안이 나오지 않았기 때문에 내가 맞게 푼건지는 모르지만 일단은 내가 푼 방법을 기록해두고 나중에 답안지 나오면 비교해서 블로그에 추가 보완해서 적어야 겠다.