제주코딩베이스캠프 자바스크립트 100제를 공부하며 정리한 내용입니다. 문제와 정답 노션 링크(무료), 인프런 해설 강의(유료)

자바스크립에서 for 문을 연습할 때 많이 풀어보는 별 찍기 문제입니다.

문제

5를 입력해서 트리 모양의 별을 찍습니다.

// 입력
5

// 출력
    *
   ***
  *****
 *******
*********  

해설

5을 받아서 5줄로 별을 출력합니다. 1부터 시작해서 2씩 커집니다. 우선 5단의 값을 담을 변수를 선언하고 할당합니다. 고정값이므로 const 를 사용합니다.

const level = 5; 

단수별로 별을 찍어주는 for 문을 작성해보면,

for(let i = 1; i <= level; i++){
	console.log("*")
}

// 콘솔 출력
*
*
*
*
*  

이렇게 기본적인 뼈대를 만들고 각 단마다 갯수를 증가 시켜줍니다. 그러기 위에 for 문 안에 for 문을 하나 더 만들어줍니다.

const level = 5; 

for(let i = 1; i <= level; i++){
	for(let j = 1; j <= i; j++){} // i 만큼 반복해주는 것이므로 j 와 비교 
}

별이 들어갈 변수를 추가로 선언하고 단 마다 증가하는 별을 찍어보면,

const level = 5; 
let stars = "";

for(let i = 1; i <= level; i++){
	for(let j = 1; j <= i; j++){
		stars = stars + "*";
	}
	console.log(stars);
}

// 콘솔 출력
*
***
******
**********
***************

j 가 1일 때 1개, 2일 때 2개, 3일 때 3개.. 식으로 별이 추가되지만 stars 값에 중복으로 별이 들어가므로 원했던 갯수대로 증가하지 않습니다. 두번째 for 문 앞에서 매번 stars 를 초기화해야 하므로 바깥에 있던 변수를 안으로 가져옵니다.

const level = 5; 

for(let i = 1; i <= level; i++){
	let stars = "";
	for(let j = 1; j <= i; j++){ 
		stars = stars + "*";
	}
	console.log(stars);
}

// 콘솔 출력
*
**
***
****
*****

우리가 원하는 값은 단별로 별을 2개씩 증가시키므로 for 문을 두번씩 돌도록 조건인 i 에 2를 곱하면,

const level = 5; 

for(let i = 1; i <= level; i++){
	let stars = "";
	for(let j = 1; j <= i*2; j++){  // i 에 2를 곱한다.
		stars = stars + "*";
	}
	console.log(stars);
}

// 콘솔 출력

**
****
******
********
**********

1, 3, 5 순으로 증가해야 므로 조건을 i*2-1 로 수정합니다. (2, 4, 6 순으로 증가해서 1씩 빼주는 것)

const level = 5; 

for(let i = 1; i <= level; i++){
	let stars = "";
	for(let j = 1; j <= i*2-1; j++){ 
		stars = stars + "*";
	}
	console.log(stars);
}

// 콘솔 출력
"*"
"***"
"*****"
"*******"
"*********"

우리가 원하는 모양대로 별이 2개씩 증가합니다. 이제 별 앞에 공백을 넣어 삼각형 모양을 만들어 줍니다. 이때 공백의 갯수는 단이 길어질 수록 점점 줄어듭니다. (4, 3, 2, 1) 공백은 별이 그려지기 전에 오므로 벽을 찍는 for 문 앞에 새로운 for 문을 작성합니다.

const level = 5; 

for(let i = 1; i <= level; i++){
	let stars = "";
	// 공백 증가 for 문
	for(let k = 1; k <= level-i; k++){ // 점점 줄어두는 조건 확인
		stars = stars + " ";
	}
	// 별 증가 for 문
	for(let j = 1; j <= i*2-1; j++){ 
		stars = stars + "*";
	}
	console.log(stars);
}

고정된 level 에서 점점 커지는 i 값을 빼서 점점 줄어드는 조건을 만듭니다. 위와 같이 작성하면 최종 출력값은,

// 콘솔 출력
    *
   ***
  *****
 *******
*********