익명호출 function 실행 우선 순위

<script>

  $(document).ready(function(){

    alert(1);

  });

  (function(){

    alert(2);

  })();

  $(function(){

    alert(3);

  });

</script>

상기 코드를 실행하면 alert 되는 순서가 어떻게 될까요..?

일단 자바스크립트는 한 줄 읽고 해석하여 실행하고, 다시 한 줄 읽고 해석하고 실행하는 절차 언어입니다.

한 줄 안에 여러 문장이 기술된 경우 기술된 순서로 문장들이 실행됩니다.

여러 줄에 걸쳐 하나의 문장이 기술된 경우 해당 문장이 모두 종료되는 시점에서 해당 문장 하나가 실행됩니다.

그러니까 중간에 오류가 발생하지 않으면 어느 때든 실행은 되는데,

실행되는 시점이 중요한 거겠지요.

상기 내용들이 기술된 순서는 보이는 대로 1/2/3 입니다.

그러나, 화면에도 이런 순으로 뿌려질 것이라고 생각하면 오산입니다.

$(document).ready(function(){ ... }); 은 document 곧 HTML 문서의 처음부터 끝까지를 모두 웹브라우저가 인식한 다음에 실행됩니다.

HTML 태그 뿐만이 아니라 CSS 와 자바스크립트를 모두 포함합니다.

다만, 이미지 등의 리소스가 모두 다운로드 되기를 기다리지는 않습니다. 

이걸 모두 기다렸다 실행하는 것은 $(window).load(function(){ ... }); 입니다.

그래서, 상기 1은 document 끝까지 읽히는 시점에서 실행되도록 실행 시기를 뒤로 미룹니다.

그리고 상기 2가 읽히는 시점에서 상기 2가 바로 실행됩니다.

그런데 상기 3은 상기 1와 같이 document 가 모두 읽힌 다음에 실행됩니다.

그러면, 상기 1과 상기 3의 실행 우선 순위는 누가 먼저일까요..?

상기 1과 상기 3은 document 가 모두 읽혀진 다음 먼저 기술된 것을 먼저 실행하게 되겠지요, 절차 언어이니까요.

CSS 의 경우에는, 적용되는 우선순위가 동일 레벨이면 나중에 기술된 것이 적용됩니다.

이것은 먼저 기술된 것이 무시되고 나중에 기술된 것만 채택된다고 볼 수도 있겠지만,

먼저 기술된 것이 먼저 적용되고 나중 기술된 것이 나중에 적용되다 보니,

맨 마지막에 적용된 내용으로 남아 있다고 보아야 겠지요.

상기 1과 같은 문장이 여럿 있다고 해도,

여럿 있는 것들 중에 먼저 기술된 것이 먼저 실행됩니다.

이를테면, 아래와 같은 경우에 1/2/3 순으로 alert 됩니다.

<script>

  $(document).ready(function(){

    alert(1);

  });

  $(document).ready(function(){

    alert(2);

  });

  $(document).ready(function(){

    alert(3);

  });

</script>

하나의 document 안에서 자바스크립트가 여러 곳에 나뉘어 기술되거나,

ajax 로 불려온 다음에 실행되는 등등의 경우를 생각해 보면 보다 복잡한 구조가 되겠지만,

이런 경우에도 자바스크립트는 절차 언어이고 실행되는 시점이 다르다는 것을 인지하면 보다 명확하게 이해하게 될 겁니다.

ajax 가 포함되면 더욱 복잡해 집니다.

funcA 안에서는 ajax 를 동기화로 세팅해서 실행하고,

funcB 안에서는 ajax 를 비동기화로 세팅해서 실행한다 했을 때..

그리고, 둘다 비동기화로 세팅되어 있었다면.. ajax 로 호출되는 .jsp 쪽에서 결과가 나오는 시간까지..

이렇게 되면, 운에 따르는 수밖에는.. ㅎㅎ