이번에는 반복문을 활용한 별(*)찍기 문제이다.
코드는 다음과 같다.

ex1) 반복문으로 별찍기

for(let i=0; i<5; i++){
  console.log('*'.repeat(i+1))
}
//출력값
*
**
***
****
*****

아직 함수를 배우기 전이지만 repeat 함수를 사용하여 반복문을 완성해 별을 찍었다.
별개수를 역순으로 찍으려면

ex2) 반복문으로 별찍기 (역순)

for(let i=6; i>=1; i--){
  console.log('*'.repeat(i-1))
}
//출력값
*****
****
***
**
*

이렇게 변수의 값을 변경하고, 감소 -- 연산자를 이용해 변수의 값을 줄여나가 역순으로 별을 출력한다.
*조건식에서 최종 조건1의 값을 (=)그대로 놔두면 무한루프가 발생하므로... (>=)로 처리해줘야 무한루프가 발생하지 않는다!

여기서 i 의 값이 0으로 고정되어 있을때 역순으로 별을 찍으려면 아래와 같은 코드로 가능하다.

ex3) 변수값이 고정일때 역순으로 별찍기

for(let i=0; i<5; i++){
  console.log('*'.repeat(5-i))
}
//출력값
*****
****
***
**
*

repeat 함수를 건드리면 간단하게 해결되는 문제였는데... 혼자 풀어보겠다고 중첩반복문에 if문에 갖가지 난리를 치다가 (a.k.a 삽질) 정답 코드를 보고 허탈했지만 ㅎㅎ 그렇게 배워나가는거지 뭐...

다음은 여러가지 별찍기 문제 예시들이다.

ex4) 홀수개수로 역순 별찍기(9, 7, 5, 3, 1)

for(let i = 0; i < 10; i++ ){
  if(i % 2 === 1){
    console.log('*'.repeat(10-i))
  }
}
//출력값
*********
*******
*****
***
*

ex5) 홀수개수로 별찍기(1, 3, 5, 7, 9)

for(let i = 0; i < 10; i++ ){
  if(i % 2 === 1){
    console.log('*'.repeat(i))
  }
}
//출력값
*
***
*****
*******
*********

ex6) 공백을 포함한 역순 별찍기

for(let i = 0; i < 5; i++ ){
    console.log(' '.repeat(i) + '*'.repeat(5-i))
}
//출력값
*****
 ****
  ***
   **
    *

ex7) 공백을 포함한 별찍기

for(let i = 5; i >= 0; i-- ){
    console.log(' '.repeat(i) + '*'.repeat(5-i))
}
//출력값
    *
   **
  ***
 ****
*****

ex8) 크리스마스 트리 별찍기

for(let i = 1; i <= 9; i+=2 ){  
  console.log(' '.repeat( (9-i)/2 ) + '*'.repeat(i))
}
//출력값
    *    
   ***   
  *****  
 *******
*********

-여기까진 혼자 힘으로 풀 수 있었는데 마름모부터 막혔다 ㅠㅠ

ex9-1) 마름모 별찍기

먼저 이 문제는 Math.abs( )함수를 활용하느냐 아니냐로 나뉘는거 같은데...
절대값을 사용하라는 댓글을 참고했지만 아직 나는 Math.abs( ) 함수를 배우지 못했으므로 ㅜㅜ 절대값을 사용하는 방법은 모르는게 당연했다.

하지만 아예 방법이 없지는 않았고, 절대값 사용 없이 마름모 별찍기를 완성하는 코드는 다음과 같다. (구글 선생님께 도움 받음...^^)

for(let i = 1; i <= 5; i++ ){  
  console.log(' '.repeat( 2- 5 % i ) + '*'.repeat(5 % i * 2+1))
}
//출력값
    *    
   ***   
  *****  
   ***
    *

ex9-2) 마름모 별찍기 (절대값 사용)

Math.abs( )함수를 활용하여 절대값을 사용한 코드는 다음과 같다.
(과거 같은 문제가 나왔던 제로초님의 ES2020 자바스크립트 강좌 참고했음)

for(let i = 4; i >= -4; i-=2 ){  
  console.log(' '.repeat( Math.abs(i)/2 ) +  '*'.repeat(5 - Math.abs(i)))
}
//출력값
    *    
   ***   
  *****  
   ***
    *

예상보다 생각할게 많은 문제였다...
오늘은 이 별찍기에 반나절은 할애한 듯 하다 ㅋㅋ
나중에 함수부분을 배우게 되면 다시 한번 도전해봐도 좋을 예제인 것 같다!




출처 - 이 포스트는 제로초님의 youtube - ES2021 자바스크립트 강좌를 참고하여 작성하였습니다.

profile
프론트엔드 공부 정리

0개의 댓글

Powered by GraphCDN, the GraphQL CDN