[문돌이의IT] 자바스크립트 for문을 심도있게 이해해보자

for문의 심화 예제를 알아보는 시간이다. for문의 개념에 대해 확실히 이해했다면 금방 적용할 수 있다. prompt를 써서 사용자가 원하는 값을 입력하면 해당되는 결과 값을 출력하는 과정을 추가하려 한다. 

관련글보기: [문돌이의IT] 자바스크립트 반복문을 파헤치자(for문)

 즉 Prompt를 이용하면 값을 이용할 수 있는 창이 뜨는데 여기에 입력한 값에 따른 결과를 만드는 문제를 해결해보자.

 

 입력한 숫자의 제곱만큼 하트를 출력해보자(정사각형 모양으로 출력)

 

var n=prompt("입력한 숫자의 제곱만큼 하트가 나온다");

 

for(var i=0; i<n; i++){

             for(var j=0; j<n; j++){

                           document.write("♥")

             }

             document.write("<br>");

}

 

결과값: 숫자 5 입력 시

 

♥♥♥♥♥

♥♥♥♥♥

♥♥♥♥♥

♥♥♥♥♥

♥♥♥♥♥

 

 이중for문은 각각의 for문마다 변수를 다르게 해야 한다. 안쪽의 j로 하트를 표현하고 바깥 쪽에도 i로 사용자가 입력한 수 단위로 하트가 끊어지도록 만들었다. N은 미리 선언해둔 prompt를 말한다.

 

1 2 3 4 5 4 3 2 1 처럼 증가하다 줄어드는 식은?

 

for(var i=1; i<=5; i++){

             document.write(i);

             if(i==5){

                           for(var j=1; j<=4; j++){

                                        document.write(i-j);

                           }

             }

}

 

 쉽게 생각하고 덤볐다가 꽤나 많은 시간을 소비한 문제다. i-j 값을 떠올리는 데 많은 시간이 걸렸다. 숫자 12345를 나타내는 건 이제 간단하다. for문 사이에 if문 까지 들어간다. I의 값이 5가 되면 for문을 하나 더 돌려서 j를 1,2,3,4 값을 갖게 한다. 우리가 출력해야 하는 숫자는 4321이기 때문에 document.write()의 괄호 값에 i-j 값을 넣는 것이다. 현재 i는 5라는 값을 가지고 있기 때문에 j의 값을 차례차례 빼주면 자연스럽게 4321을 출력할 수 있다.

 

 50개의 하트를 사용자가 원하는 개수로 나눠서 출력하자

 

var n=prompt("50개의 하트를 원하는 개수로 나눠드려요");

            

for(var i=1; i<=50; i++){

document.write("♥");

             if(i%h==0){

                           document.write("<br>");

             }

}

 

 풀고 나니 for문은 하나만 들어가고 if문이 하나 더 필요한 문제이다. 하트를 50개 생성하고 if문으로 i가 1씩 늘어나면서 입력한 값을 나눴을 때 나누어 떨어지면 <br>로 잘라냈다. 나머지를 활용하는 %에 대한 개념을 알고 있어야 쉽게 풀 수 있다. 뭔가 나눈다는 식을 표현 할 때는 머릿속에 %를 적용해야겠다는 생각이 들 때 까지 반복 연습하자.