[js] 중첩 for문

[js] 중첩 for문 - 별찍기

연습용365 2021. 9. 7. 20:53

중첩 for문은 말 그대로 for문 안에 또 for문이 있는 것입니다.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>TreeEx</title>
  <style>
  </style>
  <script>
	function tree(){
		for(i=1; i<=10; i++){
			for(j=1; j<=i; j++){
				document.write("*");
			 }
			document.write("<br>");
			}
		}
  </script>
 </head>
 <body>
	<button onclick="tree();">실행</button>
 </body>
</html>

i는 1부터 10까지 실행이 되고, j는 i의 숫자 만큼 실행이 됩니다. 그래서 1열에는 1행까지만 2열에는 2열까지 순차적으로 늘어나는데요. 그 숫자 만큼 별(*)이 출력 되는 과정입니다.

function tree(){
		for(i=1; i<=10; i++){
			for(j=10; j>=i; j--){
				document.write("*");
			 }
			document.write("<br>");
			}
		}

j를 10부터 시작하고 j>=i 일 때 실행을 하면 위 그림과 반대로 출력이 됩니다. 증가가 되는 게 아니라 증감이 되어야 하는 게 맞겠죠? 그래서 i줄은 그대로고 j만 (j=10; j>=i; j--)가 됩니다.

<script>
	function tree(){
		for(i=1; i<=10; i++){
			for(j=1; j<=i; j++){
				document.write("*");
			 }
			document.write("<br>");
			}
		for(i=1; i<=10; i++){
			for(j=10; j>=i; j--){
				document.write("*");
			 }
			document.write("<br>");
			}
		}
  </script>

그리고 위에 두 개를 합치면 이런 모양이 나온답니다^^