JavaScript로 별 그리기

SeSAC 수업 중 삼일절 연휴 과제로 받아서 풀었던 문제인데, 5개 문제 중에 1번과 5번만 내 힘으로 풀었다. JS로 별 그리기 문제는 코딩테스트로 많이 나온다니까, 모든 문제의 풀이를 블로그에 기록하며 되짚어보려고 한다.

---

문제:
drawsStars() ~ drawsStars5()까지의 모든 함수들은 lines라는 매개변수를 갖는다.
예를 들어 drawsStars(5); 를 호출하면 특정 규칙에 따라 5줄의 별이 그려진다.
출력 예시처럼 보일 수 있도록 코드를 작성하라.

좌측 정렬 직각삼각형

이건 과제에 포함된 문제는 아니었지만 만들어봤다.

1. 앞으로 작성해야하는 모든 함수에 공백과 별을 공통적으로 사용할거라서 미리 const로 값을 할당하고 시작.
2. for문을 두고 왜 while문으로 작성했는지는 모르겠지만..😅
   아무튼 i는 1부터 시작하고, lines보다 작거나 같아야 매개변수로 들어오는 숫자만큼 찍힌다.
3. 그리고 콘솔에 repeat() 메소드 이용해서 반복시키면 왼쪽 예시처럼 찍힌다.

---

좌측 정렬 역방향 직각삼각형

1. 처음에 매개변수에 들어오는 숫자만큼 별을 찍어야하니까, i = lines
2. 점차 1개씩 줄어들어서 마지막에 1개 찍어야하니까, i는 0보다 커야하고 증감식에 감소연산자를 사용한다.
3. 나는 조건식에 "i가 1보다 크거나 같다"고 했던거 같은데, 이러나 저러나 결과는 같다.😁

---

우측 정렬 직각삼각형

이 문제는 코드를 어떻게 작성해야 우측으로 정렬이 될지 생각하다가 for문을 중첩시켜서 작성해봤는데,

공백이 하나씩 줄어드는건 됐지만 별이 늘어나는게 제대로 안 되어 고민을 많이 했었다.🤔

결국 수업시간에 리더님이랑 같이 풀었다.

1. 별이 1개 찍힌 이후 하나씩 늘어나야 하니까, i에 1을 할당하고 증감식에 증가연산자 사용.
2. 매개변수 숫자만큼 찍히고 끝나야 하니까, i는 lines보다 작거나 같아야 한다.
3. 공백의 개수가 매개변수보다 1씩 작아야 하니까, 공백을 반복하는 메소드에서 lines - i
   → lines - 1로 하면 모든 반복에서 공백의 개수가 같게 나온다. (들여쓰기 된 좌측정렬 직각삼각형 나옴)

---

가운데 정렬 이등변삼각형 (트리 모양)

2번을 못 풀었기 때문에, 3번 역시 혼자 힘으로 풀지 못하고 수업시간에 같이 풀었다.😢

1. 별이 1개 찍힌 이후 개수가 늘어나니까, i는 1부터 시작하고 증감식에 증가연산자 사용.
2. 매개변수 숫자만큼만 찍히고 끝나니까, i는 lines보다 작거나 같다.
3. 공백이 점차 줄어드는건 2번이랑 같으니까, 공백의 repeat 메소드에 2번 문제에서 사용한 코드 입력.
4. 별은 1개부터 행을 거듭할수록 2개씩 늘어나며 홀수가 되니까, 2 * i - 1

---

다이아몬드 모양

이것도 마찬가지로 혼자 힘으로 못 풀고 수업 시간에 같이 풀었다.

1. 이등변삼각형으로 매개변수에 들어온 숫자만큼 늘어나는건 3번과 같고, 줄어드는건 새로운 for문 작성.
2. 매개변수에 들어온 숫자만큼 별을 찍고 점차 줄어들어야 하니까 → i는 lines보다 하나 작아야 하고, 감소연산자 사용.
3. 이등변삼각형이 위/아래로 붙어있는 모양이라 콘솔에 찍는 내용이 같은 것이고, 별이 증가하는지 감소하는지의 차이만 있어서 for문 소괄호 내부의 조건만 다르다.

---

평행사변형

이건 2번 문제를 풀다가 얼떨결에 풀어버린 문제였다.🙄

1. for문의 중첩을 사용했고, 공백에 관한 내용을 j로 설정해서 하나씩 줄어들게 만들었다.
2. i와 j에 lines를 할당해야, 매개변수에 들어온 숫자만큼 별이 찍히고 반복된다.
   → i가 1이면 별 1개부터 5개까지 매개변수 숫자만큼 반복된다.

나는 이렇게 작성했는데, 수업시간에 리더님이 작성한 코드가 더 간결했다.

function drawStars5(lines) {
  for (let i = 1; i <= lines; i++) {
    console.log(blank.repeat(lines - i) + msg.repeat(lines));
  }
}

1. 공백이 매개변수보다 1씩 작으면서 줄어드니까, 공백에 대한 메소드에는 2번 문제에서 작성한 코드 입력.
2. 별은 모든 행에 매개변수에 들어온 숫자만큼 찍혀야하니까, repeat() 메소드에 매개변수로 lines 입력.

---

JS로 예시처럼 별을 찍는 문제는 재미있는데 쉽지 않았다.

혼자 힘으로 풀지 못한 문제들도 있지만, 특히 5번 문제에서 굳이 j로 공백에 대한 설정을 할 필요없이 i만 가지고도 원하는 모양을 만들어낼 수 있다는걸 알고, 깨달음을 얻은 느낌이었다.💡

앞으로도 부지런한 연구와 실험으로 JS와 더 친해져야겠다.