자바스크립트가 작동하는 방식과 HTML에서 <script>의 위치

사용자에게 퀴즈를 보여주고 다 풀고나면 마지막에 <p>여기</p> 에 정답유무등 결과메세지를 띄워주는 로직을 자바스크립트로 구현했다고 가정한 상태에서( 즉, 실행되는 자바스크립트가 <script>여기</script>보다 뒤에 있는 DOM의 요소에 의존적일 경우)

자바스크립트 코드가 HTML보다 먼저 나타나는 경우를 생각해 보자.

자바스크립트 코드를 읽는 시점에서, 자바스크립트는 HTML이 있는지, 어떤 형태인지 전혀 알지 못한다. 그러므로, 프로그램에서 최종 결과를 추가할 문단은 웹 브라우저에는 아직 존재하지 않는다. 이 자바스크립트 코드를 읽는 즉시 실행한다면(즉, HTML을 읽어들이기 전), 프로그램이 메시지를 출력할 <p>를 얻어서 출력하려는 순간 웹 브라우저에서 에러가 발생한다. 왜냐하면 자바스크립트 해석기에는 메시지를 출력할 <p>는 아직 존재하지 않는 것으로 되어 있기 때문이다. 

따라서 분리가 되는 로직들은 함수로 만드는 이유가 바로 여기에 있다. 

새로 만든 함수는 웹 브라우저가 페이지를 읽고 저장한 후 메모리에 HTML을 로딩한 후에 프로그램을 실행한다.

즉, 결론은 <script></script>는 html코드의 가장 아래쪽에 위치하며, 각 단위 로직들은 function으로 구현하는게 좋다. 또한 <script></script> 태그 안의 내용은 한번에 하나씩 자바스크립트 해석기로 날아가 처리되므로 만약 여러 <script></script>태그 안에 자바스크립트 코드를 나눠 쓴다면 퍼포먼스에 큰 영향을 미치게 된다 .따라서 되도록 하나의 <script></script> 태그 안에 자바스크립트 코드를 몰아 놓도록 한다.

- 예시

- 결과