새싹캠퍼스 교육 중 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 인터페이스는 브라우저가 불러온 웹 페이지를 의미한다.
웹 페이지에 존재하는 모든 HTML 요소들의 최상위 요소이다.