-
조건문과 반복문을 이용해 별을 찍어보기 (feat. Javascript)Front-end/Javascript 2020. 7. 29. 18:50
모든 프로그래밍의 언어를 배울 때 별찍기는 누구나 거쳐가는 학습 커리큘럼일 것입니다. 🌠
반복문과 조건문을 공부하는데에 주로 사용되지만 기초 알고리즘 사고력을 키우는데도 아주 확실한 역할을 하기 때문에 다양한 별찍기의 예제를 가지고 충분히 연습하는 것이 좋습니다.
저는 자바스크립트로 구현하지만 대부분의 언어는 비슷한 형태를 가지고 있으니 해당 언어에 맞게 연습하면 되겠습니다.
모든 높이와 별, 공백은 아래의 값을 전제로 진행합니다.
var STAR = "*"; var SPACE = " "; var HEIGTH = 5;
직각삼각형
for (var i = 0; i < HEIGTH; i += 1) { var result = ""; for (var j = 0; j < i + 1; j += 1) { result += STAR; } console.log(result); }
높이가 낮아질수록 별이 하나씩 추가되는 규칙을 가지고 있습니다.
그래서 i가 하나 추가될 때마다 별을 추가하여 출력하였습니다.
역직각삼각형
for (var i = 0; i < HEIGTH; i += 1) { var result = ""; for (var j = 0; j < HEIGTH; j += 1) { if (j < HEIGTH - (i + 1)) { result += SPACE; } else { result += STAR; } } console.log(result); }
역직각삼각형은 높이가 낮아질수록 공백이 없어지고 별이 채워지는 규칙을 가지고 있습니다.
그러면 공백, 별 이 두가지가 각각의 상황에 맞추어 그려져야 하기 때문에 특정 조건이 필요하단 것을 알 수 있겠죠?
저는 먼저 공백을 그리는 조건을 구했습니다. 총 5개의 j 중 i의 증가에 따라 하나씩 공백이 줄어드는 것을 파악했습니다.
즉, i가 증가하면 공백의 갯수가 줄고, 별이 증가하니 전체 높이에서 i를 제거하면서 내려가면 별이 증가할 것입니다.
그래서 j가 증가하면서 공백을 추가하고 만약 공백이 들어가는 j 값이 아니라면 별을 추가하였습니다.
피라미드
for (var i = 0; i < HEIGTH; i += 1) { var result = ""; for (var j = 0; j < HEIGTH + (HEIGTH - 1); j += 1) { if (j <= HEIGTH - 1 + i && j >= HEIGTH - 1 - i) { result += STAR; } else { result += SPACE; } } console.log(result); }
피라미드는 높이가 낮아질수록 공백 대신 별이 양쪽으로 하나씩 추가되는 규칙을 가지고있습니다.
중앙을 기준으로 양 옆으로 확장하고 있기 때문에 중앙, 좌, 우를 그리는 조건이 있어야한다는 것을 유추할 수 있습니다.
또한 j의 길이가 높이와는 다르기 때문에 높이에 따른 넓이의 공식도 필요한 것을 유추했습니다.
먼저 중앙일 때는 총 j 갯수의 중앙일 것입니다. 이 전에 높이에 따른 넓이를 알아야 중앙을 찾겠죠?
증가의 규칙성을 찾아 HEIGTH + (HEIGTH - 1) 라는 공식을 통해 5일 때는 9, 3일 때는 5 등 높이에 따른 넓이 공식을 활용해 총 넓이를 구하고, 이 중앙값인 4를 찾아냈습니다.
그리고 이 값은 높이에서 1을 뺀 HEIGTH - 1 이라는 것도 알아냈습니다.
그리고 중앙값을 기점으로 좌, 우로 j 값에 따라 추가가 되기 때문에 i 의 증가에 따라 왼쪽은 j값이 작아지면서 별이 추가되고, 오른쪽은 j값이 커지면서 별이 추가되기 때문에 둘 다 해당되는 경우에는 별을 추가하고 아니라면 공백을 추가해주었습니다.
여기서 AND 연산자를 사용한 이유는 두 조건이 모두 만족하는 j 값이어야 별을 그려야하기 때문입니다.
또한 같은 값일 때도 고려를 해야 정중앙일 때를 처리할 수 있습니다.
왕관
var HEIGHT_LENGTH = HEIGTH + (HEIGTH - 1); for (var i = 0; i < HEIGTH; i += 1) { var result = ""; for (var j = 0; j < HEIGHT_LENGTH; j += 1) { if (i >= j || j >= HEIGHT_LENGTH - (i + 1)) { result += STAR; } else { result += SPACE; } } console.log(result); }
왕관은 높이가 낮아질수록 양 끝점을 기준으로 하나씩 별이 추가되어 최종 한 줄이 완성되는 규칙을 가지고 있습니다.
중앙을 기점으로 좁아지고 있기 때문에 좌, 우를 그리는 조건을 유추해야합니다.
또한 피라미드와 동일하게 높이에 따른 넓이를 구하는 공식도 필요합니다.
먼저 i와 j가 비례하여 왼쪽 별을 그린다는 것을 파악하여 i가 j보다 크거나 같을 때 별을 그리면 왼쪽 별이 그려지겠죠?
오른쪽은 총 길이에 비례하여 i가 증가함에 따라 별이 증가하는 것을 파악할 수 있습니다.
그래서 i가 증가하면서 해당 값보다 j 값이 더 크다면 별을 그려주는 조건을 추가했습니다.
여기서는 OR 연산자를 사용했는데, 그 이유는 둘다 만족하는 것이 아닌 둘 중에 하나만 만족하더라도 별을 그려야 하기 때문입니다.
'Front-end > Javascript' 카테고리의 다른 글
옵저버 패턴을 활용하여 인스타그램 피드 렌더링 해보기 (0) 2020.09.09 객체지향...? 그게 뭐죠..;;; (0) 2020.08.30 자바스크립트 배열을 탐구 & 활용하기 (0) 2020.08.01 자바스크립트의 데이터 타입에는 어떤 것들이 있을까? (0) 2020.07.27 자바스크립트 기초 간단하게 살펴보기 (0) 2020.07.01