[자바스크립트 연습문제] 13 별찍기 예제

별찍기 예제는 반복문을 연습하는데 좋은 예제입니다.

반복문을 사용하여 위 그림처럼 별문자를 출력하려면 어떻게 코딩해야 할까요? 이 글에서는 우선 위 그림처럼 별찍는 방법을 설명한 후, 다른 모양으로 별찍는 방법을 연습문제로 드리겠습니다.

그림을 살펴보면, 첫째줄에는 별이 1개, 둘째줄에는 별이 2개.. 이런식으로 다섯번째 줄에는 별이 5개로 되어 있습니다. 출력을 5번 반복한다는 것을 알 수 있죠.

for(var i=0; i<5; i++){

  var string = "";

  //줄당 별의 갯수를 조절하는 부분
  //...

  console.log(string);
}

우선 이렇게 만들면 5줄을 출력하는 코드를 만들 수 있습니다. 다음으로 각각 줄의 별의 갯수를 조절해 주어야 합니다.

n번째 줄에는 n개 만큼의 별이 찍힙니다. 이때 몇번째 줄인지 알 수 있는 방법은 i입니다. 첫번째 줄은 i가 0, 2번째 줄은 i가 1 ... 이런 식이죠. 즉 i만큼 반복하여 별을 찍어주면 됩니다.

for(var i=0; i<5; i++){

  var string = "";

  for(var j=0; j<=i; j++){
    string = string+"*";
  }

  console.log(string);
}

이렇게 반복문 안에 반복문이 들어 있는 것을 다중반복문이라고 하고, 위의 경우에는 2중반복문이 되겠습니다. 반복문안의 반복문에는 반복에 사용되는 변수 이름으로 j를 사용하였는데, j는 단순히 알파벳 순서상 i 다음이기 때문에 주로 사용됩니다. 3중 반복문인 경우에 3번째 반복문에는 k가 주로 사용됩니다.

자 그럼, 위의 내용을 바탕으로 아래 그림처럼 별을 찍는 반복문을 만들어 봅시다.

연습문제 13-1

힌트: 별의 숫자가 줄 번호와 반대로 움직입니다.

연습문제 13-2

힌트: 빈칸을 먼저 찍고, 별을 찍어줘야 합니다.

연습문제 13-3

이 문제는 고난이도 보너스 문제입니다. 너무 어렵다면 그냥 넘어가셔도 좋습니다.

댓글

J
Jihong Kim 2019.01.25
예제 풀이에서 궁금한 점이 있어 질문드립니다. (너무 수준이 낮아 죄송합니다. 독학 시작한지 얼마 안되어서요..)  우선 첫번째 for문을 5번 반복시키고, 두번째 for문을 별 개수대로 반복시킨다는 건 이해했습니다. 
이제 코딩만 하면 되는데, 변수 부분을 잘 모르겠습니다. 익숙하지 않아서 그런지, 변수를 써야 한다는 생각 자체를 못했어요. 변수는 어느때 써야 하는지, 위 예제에서는 왜 변수를 쓴 건지, 안 쓰고 문제를 해결하는 법은 없는지 궁금합니다. 
I
Ian H 2019.01.25
@Jihong Kim,
변수를 선언하는 이유는 console.log함수가 출력 후에 반드시 줄바꿈을 하기 때문입니다. 두번째 for문은 한 줄의 내용을 출력하는 부분으로 줄바꿈이 일어나선 안되고, 두번째 for문이 끝난 후에 줄바꿈이 일어나야 하는데, console.log는 내용을 출력 후 반드시 줄바꿈을 하기 때문에 두번째 for문 안에서 사용할 수 없습니다.
변수는 데이터를 저장하는 용도입니다. 두번째 for문에서 반복을 하면서 이전까지 기록된 별을 가져온 후 새로 별을 추가하는데, 이전까지 기록된 별을 가져오고 새로운 별을 추가한 후 다시 기록하기 위해서 변수는 반드시 필요합니다.
만약 문자열 출력함수가 자동으로 줄바꿈을 하지 않는다면 변수선언은 필요하지 않습니다.
https://a-mean-blogger.github.io/text-game-maker-js/sandbox/ 으로 가셔서 콘솔 창을 연 다음
for(var i=0; i<5; i++){   for(var j=0; j<=i; j++){     TMS.insertText("*");   }   TMS.insertText("\n\r"); }
이 코드를 입력해 보세요.
TMS.insertText("*"); <- 별을 찍는 코드 TMS.insertText("\n\r"); <- 줄바꿈을 하는 코드
text-game-maker-js 는 제가 만든 라이브러리인데, 여기서 TMS.insertText 함수는 console.log와 달리 줄바꿈을 하지 않기 때문에 변수 사용없이 별찍기 예제를 만들 수 있습니다.
대신 두번째 for문 이후에 강제로 줄바꿈을 하는 코드를 입력해 주어야 합니다.
J
Jihong Kim 2019.01.27
@Ian H,
console.log() 때문에 줄바꿈이 일어나는 것이었군요. 조금 이해가 되는 것 같습니다. 친절하게 답변 주셔서 감사합니다.!
J
Jihong Kim 2019.01.27
한가지 더 궁금한 점이 있어 질문 남깁니다.  전역변수 지역변수라는 것에 대해 배웠는데요, 다중반복문에서는 어떻게 적용되는지 궁금합니다. 예를 들어 두번째 for문에서 string 값이 *가 되면, 첫번째 for문에서도 변수 string의 값이 *로 변하는 건가요? 
I
Ian H 2019.01.28
@Jihong Kim,
두번째 for문의 string은 첫번째 for문의 string과 동일한 변수입니다. 즉 두번째 for문에서 string값을 변경하면 첫번째 for문에서 선언한 string의 값이 변경됩니다.
사실 이건 전역변수, 지역변수와 조금 다른 문제인데요.. var로 선언된 변수의 스코프(영향력을 가지는 범위)는 가장 가까운 함수의 괄호({})이기 때문에 for문의 {}에는 영향을 받지 않습니다. 이 부분에 대해서는 나중에 다루어 볼 기회가 있다면 자세하게 다루어 보겠습니다. 
일단은 var로 선언된 변수의 지역변수, 전역변수는 함수 선언에만 관계가 있고, 다른 문법의 {}에는 상관이 없다는 것만 이해하시면 되겠습니다. 
for(var i=0; i<5; i++){   var string = "";   for(var j=0; j<=i; j++){     string = string+"*";   } } console.log("string: ", string); console.log("i: ", i); console.log("j: ", j);
이 코드를 실행시켜보세요. console.log는 for문 밖에서 string, i, j를 호출하지만 값을 출력하는 것을 볼 수 있습니다. 이것은 이 변수들이 var를 사용해서 생성되었고, var를 사용해서 생성된 변수들은 for문의 {}에 영향을 받지 않기 때문입니다. 
댓글쓰기

이 글에 댓글을 다시려면 SNS 계정으로 로그인하세요. 자세히 알아보기

UP