[jQuery] $(function(){}) 란?

결론

$(function(){
	...
})

// 위/아래는 같은 의미이다.

$(document).ready(function(){
	...
})

 

즉시실행 함수 앞에 제이쿼리 표시 구분자인 $가 있다면, document.ready를 축약적으로 적은 것이다.

 

사용 이유

페이지에서 document.ready의 사용빈도는 높은 편인데, 이를 간결하게 쓰기 위해서 축약형을 사용한다.

 

왜 사용빈도가 높냐면,

window.onload의 경우 여러번 선언되어도 단 한번만 인식되지만, document.ready는 여러번 선언되면 그거만큼 여러번 실행되기 때문에 위험도가 적은 편이다.

또한 JSP 특성상 공통 컴포넌트에 대해 include 처리를 많이 하게 되는데, 그 과정에서 페이지의 계층 구조를 명확히 파악하지 못하면 onload를 두번 써버리는 불상사가 발생할 수 있다.

 

window.onload : CSS,JS,이미지리소스 등 모든 요소가 올려진 다음에 실행됨
document.ready : 브라우저가 DOM 트리를 생성한 직후에 실행됨
*추후 자세히 다루겠습니다.

주의 할 것!

// 이건 그냥 즉시실행함수
(function(){
	...
});

// 이게 document.ready 축약형
$(function(){
	...
})

바로 구조가 즉시 실행 함수와 굉장히 유사하다는 점이다.