for 구문을 이용한 트리 만들기

자바스크립트 뿐만 아니라 다른 프로그래밍 언어에서 if구문을 학습할 때 국룰인 별찍기! 중첩반복문을 사용하기 때문에 난이도가 높아 별찍기를 하다보면 콘솔창이 아니라 눈 앞에 별이 돌아가는 경험을 할 수 있다. 🤩

학습목표

Trimming a Tree with for statement 실습은 간단한 별찍기를 통해, 코드를 한 단계씩 해석하여 중첩반복문이 실행되는 알고리즘을 파악하는 것이 목표이다.

START

완성된 트리이다. 특수문자 *를 이용하여 크리스마스 트리를 만들었다.

JavaScript

  //1.변수선언
let outPut = "";

 //2.loop 횟수설정
for (var i = 0; i < 15; i++) {
  //3. 공백 감소
  for (var j = 15; j > i; j--) {
    //console.log(`i:${i} , j:${j}`);
    outPut += " ";
  }
  //4. 별 증가
  for (var k = 0; k < i * 2 + 1; k++) {
    outPut += "*";
  }
  //5.줄 바꿈
  outPut += "\n";
}
console.log(outPut);

1. 변수선언

let outPut = "";

기호와 공백이 들어갈 변수를 설정해준다. 트리는 기호 * 과 공백, 두가지 string으로 구성되어 있으므로, string type의 데이터가 들어갈 ""; 를 변수에 넣어 선언한다.

2. loop 횟수설정

for (var i = 0; i < 15; i++)

최초의 for구문에서 loop 횟수를 설정한다. 여기서 loop의 횟수를 통해 트리를 몇 줄로 구성할지 정한다.

3. 공백 감소

  for (var j = 15; j > i; j--) {
    console.log(`i:${i} , j:${j}`);
    outPut += " ";
  }

트리를 언뜻 봤을 때 별이 증가하는 것 처럼보이지만 빨간색으로 표시 해놓은 부분은 사실 공백으로 이루어져있다. 즉 트리의 핵심은 for 구문이 한 번 반복 될 때 마다 공백이 증가하고 반대로 별은 감소하는 원리에 있다.

그래서 중첩반복문은 공백 감소, 별 증가 라는 내용으로 총 두 번 사용해야한다.

첫번째 중첩반복문은 공백을 감소시키는 역할을 한다. 변수 j는 15 이고 j는 i보다 크며 1씩 감소된다. 첫 실행시 i는 0이므로 outPut += " " 에 의해 공백이 하나 늘어나는데, 이것은 15번이 반복된다.

콘솔창에 i와 j를 찍어보면 이해하기 쉬운데, 첫 반복문 실행시 아래와 같이 i < j 조건이 맞을때 까지 15번 반복된다.

반복이 끝나고 i는 증감연산자에 의해 1이 되며 두번째 반복이 실행되는데 결과는 아래와 같다.

위와 마찬가지로 i < j 조건이 맞을때 까지 반복되는데 j > i 는, i가 j보다 같거나 작을 때 까지 i를 반복해서 출력하는 것을 의미한다. 여기서 헷갈릴 수 있는데 중첩 반복문에 있는 var j = 15; j > i; j--로 인해 15부터 시작한 j가 증감연산자 --에 의해 15, 14, 13.. 처럼 감소하는 것이 콘솔에 찍힐 것 같지만 위를 보면 알수있듯이 j는 여전히 15부터 시작한다. 이것은 j의 if 구문이 중첩 반복문 안에 위치해있기 때문에 내부에서만 반복되며 j > i에 의해 j의 갯수, 즉 공백이 감소하게 된다.

3. 별증가

  for (var k = 0; k < i * 2 + 1; k++) {
    outPut += "*";
  }

두번째 중첩반복문에서는 별이 증가되며, k < i 에 의해 i는 k보다 크거나 같을때 까지 i를 반복해서 출력하는 것을 의미한다. 즉 공백이 감소할때마다 반대로 별이 증가하는 원리로 트리가 만들어지는 것이다.

3-2. 형태잡기

i * 2 + 1

마지막으로 별을 두배로 증가시켜 모양을 잡아주고 꼭대기에 별을 하나 추가해 더욱 디테일한 트리를 출력할 수 있다.