중첩 반복문 예제1(계단 만들기)

javascript 2015. 3. 22. 16:20

728x90
반응형

예제를 하기전 for문(여러 반복문들중 하나) 에 대해서 알아보도록 하자

for문은 초기식, 조건식, 종결식 으로 나눈다.

가장 먼저 초기식이 실행되고 나서 조건식으로 비교하고 조건이 참이면 아래 문장을 실행시킨뒤 종결식으로 돌아간다.

만약 조건이 거짓이라면 안의 실행문은 실행하지 않고 종결식 까지 가지도 못한다.

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

여기서 초기식이란 : var i = 0

조건식 : i < 5

종결식 : i++

중괄호 안에는 조건이 참일 경우 실행할 구문을 넣어주면 된다.

또한 for문 안에 또 for문을 넣을수 있는데 이를 '중첩 반복문' 이라고 한다.


바로 이 중첩 반복문을 통해서 예제를 만들어 보도록 하자(계단 만들기)


못해도 괜찮다.

이 글을 쓰고 있는 나도 정답을 보고 난 뒤에 이해했으니까..



나름대로 해석 하자면..

*이 당장에 뭐 찍혀야 할건 아니기에 일단 *이 들어갈 변수를 만든다.

var output = '';

이제 포문으로 저 아웃풋에 별을 넣어줘야 하는데 안의 내용이 11번이 돌아가야 한다는것..

for(i = 0; i < 11; i++){

}

왜 11번이 돌아가는지 안에 들어가는 for문속 for문을 살펴 보도록 하자

for(i = 0; i < 11; i++){

for(j = 0; j < i; j++){

output += "*";

}

}


먼저 i 가 0 이고 i 는 11보다 작으니까 조건이 참이 된다.

조건이 참이면 그 안의 문장을 실행 할 수 있다는 소리가 된다.

i 라는 0 이 그대로 내려간다. 

중첩 포문을 만나게 되는데 j = 0 이지만 j 는 i 보다 작은가?

그건 아니지..

j 도 i 도 모두 0 이다.

조건이 거짓이기에 중첩 반복문을 빠져나간다.

하지만

i는 안의 내용을 만났으니까 조건이 참이라는 소리가 되기에 종결식을 실행할수 있게 된다.

i가 증감연산자 ++ 를 만나서 하나 더 올라간다.

지금의 i 는 몇인가? 1 이 된거다. 1은 11보다 작은가? 맞으면 아랫문장을 실행할수 있게 된다.

잘 보자. i 는 1 이다.

j 는 아까의 조건이 거짓이기에 조건식과 비교하자마자 바로 빠져 나가서 종결식을 못만났다.

j 는 아직도 0 인거다.

j 는 i 보다 작은가?

작다. 이건 확실하게 맞는거다. 그럼 안의 내용을 실행할수 있겠다!.

output 이라는 변수에 * 이라는걸 +=(복합대입 연산자) 를 이용해 기존에 변수에 있던 값에 넣어줄 내용을 더한다.

그러면, 이 문장을 실행했다는 소리는 곧 뭐다?

중첩 반복문의 조건식이 참이였다는 소리가 된다.

참이기에 종결식이 j++ 을 만나게 되는대 0 이였던 j는 1 이 되고

중첩반복문을 다시 실행시킨다. i  는 1 이고 j 도 1 이다.

j 가 i 보다 작은가?

아니다.

그럼 빠져 나오는거다.

첫번째 반복문의 조건문은 실행이 됬다는거에 참이란 소리가 된다. i 가 2 가 된다.

이런식으로 돌아가게 되는데...

아마 alert 로 output을 찍어주게 되면

별이 ******************** 뭐 이런식으로 나오게 될꺼다.

줄바꿈이 중간에 안들어가서다.

이스케이프 문자 중 하나인 줄바꿈을 이용하자

이스케이프 문자(줄바꿈) : \n

\ 은 역슬래시 라는 뜻이다. 쓰는 폰트에 따라 달리 보일 수 있다.

이걸 어디에 넣어주냐

조건문이 참일경우! i 가 ++ 되기전!

그렇다 즉 실행문장중의 하나여야 한다는 소리다.


for(i = 0; i < 11; i++){

for(j = 0; j < i; j++){

output += "*";

}

output += "\n";

}


중첩 포문 안에서 이미 * 이 output 에 들어가 있을꺼다.

그 output 에 줄바꿈 문자를 다시한번 복합대입연산자 += 을 통해 넣어준 후

i 가 ++ 되면 된거다.

이런식으로 돌아가게 되면 계단으로 * 이 출력된걸 확인할 수 있다.



다시한번 글을 쓰지만 이걸 못했다고 해서 이해 못했다고 해서 낙심하고 포기하면 안된다!

끝까지 열심히 해보자!

반응형

'javascript' 카테고리의 다른 글

익명함수와 선언적함수의 차이  (0) 2015.03.24
중첩 반복문2(피라미드 만들기)  (2) 2015.03.23
if 조건문 예제.  (2) 2015.03.22
if조건문  (0) 2015.03.08
숫자와 문자열의 자료형 변환  (0) 2015.03.08