[JS]자바스크립트 반복문으로 별찍기

제로초님의 자바스크립트 입문 강의(인프런에 있는) 복습용으로 글을 쓸 예정입니다!
이제 5강 듣고 있지만... 2강에 있는 반복문 숙제부터 복습해 보겠습니다..

우선 강의에서 변수부터 조건문, 반복문까지 자바스크립트의 기본 문법을 배우고 콘솔창에 별찍기로 반복문을 익혀보았습니다.

 

 

목차

0. 반복문(while, for)

1. 별찍기 기본(repeat 메서드 사용)

2. 짝수로 증가하는 경우

3. 큰 수부터 감소하는 경우

4. 공백 포함

5. 마름모 모양

6. 트리 모양

 

0. 반복문(while, for)

-> while (조건식)

       동작문;

1부터 10까지 출력하려면

let i = 0;
while (i < 10) { // i는 0~9
    console.log(i + 1);
    i++;
}

 

-> for (시작; 조건식; 종료식)

       동작문;

for (let i = 0; i < 10; i++) {
    console.log(i + 1);
}

기본 형태는 이렇고 필요에 따라 while을 쓸지 for을 쓸지 결정하면 되고, 같은 코드를 두 방식으로 서로 변환할 수 있습니다.

 

1. 별찍기 기본(repeat 메서드 사용)

*

**

***

****

*****

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

repeat 메서드는 문자열을 주어진 횟수만큼 반복해 붙인 새로운 문자열을 반환 합니다.

콘솔로그에는 줄바꿈이 포함되어 있으므로 별의 개수만 신경써주면 됩니다. 

 

3 * 5의 네모 모양으로 별을 찍을 때도 위 코드에서 '*'.repeat(3)만 바꿔주면 됩니다

C언어만 써본 저는 

for (let i = 0; i < 5; i++) {
    for (let j = 0; j < 3; j++) {
        console.log('*');
    }
}

이런식으로 이중반복문을 써야하나 싶었는데 이렇게 해봐야 콘솔에서는 별을 15번 찍을 뿐 모양이 나오지 않네요.

 

2. 짝수로 증가하는 경우

*

***

*****

*******

베리에이션이 생기면 별이 증감하는 규칙성을 찾아줍니다. 다음처럼 별이 2개씩 늘어나는 경우엔

a) 애초에 i 를 2씩 증가시켜주거나

for (let i = 0; i < 7; i += 2) {
  console.log('*'.repeat(i + 1));
}

 

b) 조건문을  이용해 별이 홀수개 일때 (i가 짝수) 출력되도록 -> i % 2 === 0 // 값을 2로 나눈 나머지가 0이면 짝수

for (let i = 0; i < 7; i++) {
    if (i % 2 === 0)
        console.log('*'.repeat(i + 1));
}

 

c) 혹은 별이 짝수개 일때 (i는 홀수) continue를 사용해 출력되지 않게 해줍니다. -> i % 2 !== 0 // 0으로 나누어 떨어지지 않으면 홀수

for (let i = 0; i < 7; i++) {
    if (i % 2 !== 0) continue;
    console.log('*'.repeat(i + 1));
}

 

3. 큰 수부터 감소하는 경우

*****

****

***

**

*

a) 반대로 i를 큰 수부터 감소시켜줍니다. 이때 i의 초기값을 5로 설정했기 때문에 조건은 i > 0, repeat(i)로 설정해주었습니다

for (let i = 5; i > 0; i--) {
    console.log('*'.repeat(i));
}

 

b) 혹은 i를 바꾸지 않고서 별의 개수는 감소하지만 i는 증가하는 규칙을 이용해 repeat(5-i) 만 간단히 바꿔줄 수 있습니다.

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

 

4. 공백 포함

*****

 ****

  ***

    *

앞에 있는 공백 개수의 규칙성을 찾아주고,

공백을 넣을 때 콘솔을 두번 쓰면 줄바꿈이 되므로 명령 한줄에 다 입력해줍니다('+' 또는 ',' 로 연결)

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

출력 결과

반대 모양은

for (let i = 0; i < 5; i++) {
  console.log(' '.repeat(4 - i) + '*'.repeat(i + 1));
}

 

5. 마름모 모양

규칙을 찾아보면 공백은 21012, 별이 13531 로 증가했다가 감소하는 모양입니다.

이전까지 썼던 방식으로만 하면 윗부분은 이런식으로 (별을 기준으로 했을 때 공백은 2부터 감소하므로 i를 뺀 후 2로 나눠주는 방법) 

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

만들 수 있지만 아래 대칭 부분을 조건문을 넣거나 반복문을 또 쓰거나 해야하는데 상당히 까다롭습니다..어케하는지 모르겠음

 

그래서 Math.abs() 메서드를 사용하면 간단하게 구현할 수 있습니다.

absolute의 약자겠죠? 주어진 숫자의 절댓값을 반환합니다.

범위는 4~-4로 짝수만 고려했습니다. 절댓값으로 바꿔주면 4~0 그리고 다시 0~4(원래 0~-4)가 되므로 대칭 모양이 나옵니다.

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

그밖에 Math 객체에 여러 속성들이 있어서 앞으로도 유용하게 쓰일 예정입니다.

 

6. 트리 모양

트리모양의 규칙은 공백 43210,  별모양 13579

별이 9개까지 찍혀야하므로 그에 맞게 범위를 설정해주고, 

이때 i는 0, 2, 4, 6, 8이고, 공백은 점점 감소해야하므로 8 - i 를 해주면 8, 6, 4, 2, 0 즉, 공백과 2배 차이인 관계를 파악할 수 있습니다.

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

 

 

이제 차차 끝말잇기, 숫자야구 등 웹게임 구현 결과와 복습 내용들도 적어보겠습니다~