[프론트엔드][자바스크립트] TIL Day-18 예제로 For문 꼭꼭 씹어먹기

 

 

for문 예문 소스 씹어먹기

 

※ 아래 소스를 한 줄씩 이해할 때 반드시 전체 소스를 같이 보면서 문맥을 파악하며 따라오면 좋을 듯 하다.

 

 

 

 var audNum = prompt("입장객 수는 몇 명?");

 

 변수 audNum에
"입장객 수는 몇 명?"이라는 텍스트가 쓰여 있는, 또 그 지시나 텍스트에 맞게 사용자가 입력할 수 있도록 prompt로 대화상자를 띄운 후,

사용자가 대화상자에 입력한 값을 변수 audNum의 값으로 할당한다.

 

 

 

var colNum = prompt("한 줄에 몇 명씩 배치?");

 

 변수 colNum에 "한 줄에 몇 명씩 배치?"라는 텍스트가 쓰여 있는 입력형 대화상자를 띄워 그 곳에

사용자가 입력한 값을 변수 colNum의 값으로 할당한다.

 

 

 

if (audNum % colNum == 0)

 

 audNum과 colNum를 나눈 나머지가 0 이면,

 

 

 

rowNum = parseInt(audNum / colNum);

 

 rowNum라는 변수에 audNum를 colNum로 나눈 정수형의 값을 할당해준다.

즉, 입력한 입장객 수를 입력한 열(col) 수로 나누면 나오는 몫(줄 수)이 할당된다.

 

 

 

 else
      rowNum = parseInt(audNum / colNum) + 1;

           

 

 만약 audNum과 colNum를 나눈 나머지가 0 이 아니면,

 rowNum라는 변수에 audNum을 colNum로 나눈 정수형의 값에 1을 더한 값을 할당해준다.

 즉, 입력한 입장객 수를 입력한 열(col) 수로 나누면 나오는 줄의 수에다 그 나머지 인원을 앉힐 1줄을 더 더한 것이다. 

 

 

 

document.write("<table>");

 

 

document.write로 HTML에 <table>태그로 table을 작성함을 알리고,

 

 

 

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

 

 

 for문으로 변수 i를 초기값 0으로 선언하여 시작하면서, i가 위에서 입장객수/원하는 열의 수를 계산하여 할당된 값 rowNum보다 작은 조건에서는 i를 하나씩 올려가며 다음의 명령문을 실행시킨다. 그 명령문이 무엇이냐면, 

 

 

 

document.write("<tr>");

 

 

 document.write로 HTML에 <tr>태그로 table의 줄(row)을 작성함을 알리고,

 

 

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

 

 

 for문으로 변수 j를 초기값 1로 선언하여 시작하면서,

 j가 사용자가 처음에 대화창에서 입력했던 colNum보다 작은 조건에서는

 j를 하나씩 올려가며 다음의 명령문을 실행시킨다. 그 명령문이 무엇이냐면, (중첩된 명령문)

 

 

 

seatNo = i * colNum + j;

 

 

 새로운 변수 seatNo에 처음 0 으로 초기화 되었던 i와 사용자가 처음에 입력했던 col의 수를 곱하고 거기에 1로 초기화되어 있던 j를 더한다.

 이런 식을 만든 이유는 다음과 같다. 예를 들어 한 줄에 3명씩이라고 3개의 열을 입력했다고 가정하면, 첫 줄에는 순차적으로 1~3번의 좌석번호가 부여되어야 할 것이다.

 첫 번째 줄은 줄의 수와 상관없이 열과 관계있는 j가 1부터 3까지 순차적으로 나오면 되기 때문에, 줄과 관계있는 i는 0으로 초기화해서 i * colNum의 값이 의미가 없는 0이 되게 만든 것이다. 그래서 처음 j와 관련된 for문이 돌아갈 때, 순차적으로 1부터 증가할 j의 값이 고스란히 좌석번호로 반영될 수 있었던 것이다. 이 식의 의미는 뒤에 나올 소스코드 줄에서 다시 확인해볼 수 있을 것이다.

 

 

 

if (seatNo > audNum) break;

 

 

 이렇게 값이 할당된 변수 seatNo 좌석번호가 사용자가 처음 입력한 입장객 audNum의 수를 넘게 되면(조건), 

 지금 자신이 괄호로 묶여있던 j for문을 빠져나온 뒤 그 다음 명령문 document.write("</tr>") ; 를 실행하지만,

 

 좌석번호가 입장객 수를 넘지 않으면, break; 의 다음 명령문인 document.write("<td> 좌석 " + seatNo + " </td>"); 를 실행한다.

 

 

 

document.write("<td> 좌석 " + seatNo + " </td>");

 

 

 document.write로 HTML에 <td> 태그로 좌석 + 좌석번호 를 출력한다.

  

 

 이렇게 j for문이 순환하면서 실행되면 좌석번호가 적힌 테이블의 셀이 하나씩 옆으로 늘어나게 된다.

 이때, 열의 수를 3으로 입력했다면 j가 1씩 증가하다 4가 되는 순간, for (var j = 1; j <= colNum; j++)에서 갈색박스로  표시한 조건식 j <= colNum을 충족하지 못하기 때문에 for문으로 묶인 주황색 원으로 표시해 둔 부분의 중괄호 안의 명령문을 실행시키지 못하고 빠져나와 그 아래에 있는 다음 명령문 document.write("</tr>") ; 을 실행하러 가게 된다.

 

 

<조건식을 만족하지 못하면 그 for문의 순환적 명령 실행을 빠져나와 그 다음의 명령문을 실행하러 간다.>

 

 

 document.write("</tr>");

 

 

  document.write로 HTML에 <tr> 태그를 닫음으로써, 한 줄이 완성된 상태로 출력된다.

 

 

 

 아래 이미지에서 보다시피, document.write("</tr>"); 이 끝나면 i와 관련된 조건식이 있는 for의 닫는 중괄호 } 를 만나게 된다. 그러면 이와 짝을 이루는 시작 중괄호 { 로 묶인 i for문을 다시 실행하게 된다. 

 

 

 

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

 

 다시 돌아온 i for문은 아까 0에서 하나 증가된 i = 1을 적용하고, 이 i가 아까 계산했던 rowNum (= audNum / colNum) 값보다 작다면 다음에 나오는 명령문을 실행한다. 

 이 때, 입장객 31명에 3명씩 앉히라고 했다면 나머지가 0이 아닌 경우가 되어, rowNum = parseInt(audNum / colNum) + 1; 의 식이 적용되고, 그 값은 11(줄)이 되겠다.

 

 

document.write("<tr>");

 

 다시 줄이 하나 열리고,

 

 

 

 아까와 같이 colNum이 3일때, j가 3일때까지 아까와 같이 반복되면 또 새로 열린 줄에 3개의 열이 채워지고, 여전히 좌석번호가 입장객 수를 넘지 않으므로, if (seatNo > audNum) break; 는 실행되지 않고, 그 다음 줄인 document.write("<td> 좌석 " + seatNo + " </td>"); 이 실행된다. 실행이 끝나면 다시 위로 돌아가 똑같은 명령을 수행하려고 하지만, 이제는 j가 4가 되어 조건이 맞지 않으므로, j for문을 빠져나와 괄호 밖 다음 명령문인 document.write("</tr>");을 실행하면서

 

 

 document.write("</tr>");

 

두번째 줄이 완성되고,

 

 

그 다음은  i for문의 닫는 중괄호 } 를 만나 i for문의 조건을 확인하면서 다시 순환적으로 i for문 안의 명령문을 실행한다.

 

 

그러다 어느덧, i와 j가 증가하면서 seatNum 값도 증가하게 되는데 이 좌석번호가 원래 사용자가 입력했던 입장객 수보다 많아지게 되면, 아래 이미지의 갈색박스처럼 break 명령문이 작동해, break가 소속되어 있던 for문 { } 중괄호 안의 명령을 모두 멈추고 그 곳을 빠져나와, 빨간 점선의 원 부분인 그 아래 명령을 실행하게 된다.
(코드의 흐름은 " top to bottom ")
빨간 점섬의 명령 실행으로 테이블의 줄을 닫게 되고(</tr>),
다시 만난 핑크색 원의 중괄호 } 로 인해 핑크 중괄호로 묶인 i for문으로 다시 올라가게 되지만,
이제는 증가된 i가 rowNum와 값이 같아진 상태가 되어 i < rowNum 라는 조건식이 성립하지 않게 되므로,
i for문의 실행부분인 핑크 괄호를 빠져 나와 보라색 원 부분의 명령을 실행하며 테이블을 닫게 되는 것이다.

 

<break 를 만나면 빠져나와야 하는 곳은 바로, break가 소속되어 있던 for문>