새싹캠퍼스 교육 중 document.write() 의 특이한 동작을 발견했다.

예시 코드는 랜덤 숫자를 미리 정한 후, 매번 입력을 받으며 랜덤 숫자를 맞추는 간단한 게임이다.

숫자 입력은 prompt() 함수를 이용하여 받아온다.

숫자를 입력받는 과정에서 관련 내용들을 document.write() 로 출력해보면 write() 함수를 호출한 시점이 아닌 모든 과정이 종료된 이후에 한 번에 출력된다.

<script>
  const randomNum = parseInt((Math.random() * 100) + 1);

  let you;
  let count = 0;
  let message;
  do {
    you = prompt("1~100 사이의 정수를 입력해주세요!", "");

    if (you === null) {
      alert("게임을 종료하셨습니다.");
      break;
    }

    you = parseInt(you);
    count++;
    
    if (you > randomNum) {
      message = "Down!";
    } else if (you < randomNum) {
      message = "Up!";
    } else if (you === randomNum) {
      message = `축하합니다. ${count}번만에 맞추셨습니다.`;
    }

    document.write(`${message}\\n`);
  } while (randomNum !== you);
</script>

이러한 현상을 보고, alert 창을 띄웠기 때문이라고 생각하였다.

숫자를 입력하는 alert 창이 정답을 맞출 때까지 무한히 재생되어 웹 페이지의 제어가 alert 창에 있다.

즉, document 에게 제어가 넘어와 write() 함수를 실행해야 하는데

do-while 문으로 인해 alert() 이 끝나지 않아 write() 할 내용들을 버퍼에 쌓아두고

document 로 제어가 넘어온 시점에 이를 한번에 반영했다고 추측하였다.

더욱 정확한 원인을 알기 위해 document 를 구성하는 과정에 대해 찾아보았다.

Document 란?

일단 document 인터페이스는 브라우저가 불러온 웹 페이지를 의미한다.

웹 페이지에 존재하는 모든 HTML 요소들의 최상위 요소이다.