jQuery는 1.5기준이며 스터디 차원의 포스팅이니 맹신은 금물, 딴지는 환영입니다. ㅋ
123 (function(window, undefined){ ... })(window);
위 소스는 jQuery 1.5의 첫줄과 맨 끝줄입니다. 최 외각이란 표현이 맞겠군요.
함수를 표현하는 방법
Javascript의 함수는 객체입니다. 함수객체라고 합니다. 함수객체를 만드는 방법은 표현형태에 따라 두가지로 분리합니다. Function Declaration과 Function Expression입니다. (말장난같지만) 우리말로 하면 함수문장, 함수표현식이 되겠습니다.
12345678 function foo(){ //function declaration 함수문장 /*...*/} var foo = function(){ //function expression 함수표현식 /*...*/}
함수문장으로 함수를 정의하면 함수를 정의한 위치와 관계없이 상단으로 끌어올려지며, 그 덕분에 함수정의보다 위쪽에서 호출해도 함수 실행이 됩니다. 이런 특징을 Hoisting이라고 합니다.
함수표현식으로 함수를 정의하면 Hoistring효과가 일어나지 않습니다.
왜냐하면 변수를 정의하고, 함수리터럴로 초기화하기때문에 초기화하는 라인에 도달하지 않으면 변수에 함수는 참조가 걸리지 않습니다.
함수문장도 의미상으론 var foo = function foo(){}에 해당하지만, 이렇게 적으면 함수표현식이 되며, hoisting효과는 없습니다. ( 그리고, IE에 관련 버그가 있습니다. 이렇게 적으면 안됩니다.)
function(...){/*...*/} 익명함수
익명함수란 이름이 없는 함수 function(){...}를 말합니다. 바로 jQuery최상단의 형태입니다.
익명함수는 function으로 시작하지만 함수명이 없습니다. 따로 부를 이름이 없으므로 따로 실행시킬 방법도 없습니다. (실행을 못시킨다는 말이 아닙니다.)
더군다나 익명함수만 덩그러니 적어놓으면(문장의 시작이 익명함수이면) 에러납니다. function으로 시작하니 함수문장으로 보이나 이름이 없으므로 오류입니다.
그럼 위 jQuery의 소스는 왜 에러가 안날까요? 이럴때는 괄호를 묶어주면 됩니다.
그럼 익명함수는 함수문장일까요 함수표현식일까요? 이 부분은 확실하지 않은데 hoisting이 일어나지 않고, (...)를 사용하지 않으면 오류가 나는 것으로 보아 (불완전한) 함수표현식 으로 보는게 맞는거 같습니다.
근데 왜 익명함수일까요?
그냥 var jQuery = function(){..} 하면 될것을. 복잡하게 시리.
여러가지 이유가 있겠지만, javascript의 함수는 '참조가 발생하지 않으면 메모리에서 제거'됩니다. 반면 전역변수는 '페이지가 갱신/소멸 될때가지 메모리에 상주'합니다. 그러므로 전역변수에 함수표현식으로 함수를 만들면 참조가 일어나지 않아도 메모리를 차지합니다. 페이지가 죽을때까지.
결국 jQuery는 메모리에 스스로를 페이지로딩과 함께 통쨰로 올라가지 않습니다.
1074라인을 보면 다음 구문으로 jQuery Core만을 전역변수 jQuery와 $에 올립니다. 이것이 우리가 쓰는 $ 입니다.
12 return (window.jQuery = window.$ = jQuery);
()연산자
javascript에서 ()는 함수를 실행하는 연산자입니다. '함수명()' 이란 형태로 함수를 실행하죠. append(), get().. 모두 함수 실행이죠.(메소드라 부르지만)
하지만 때론 함수명이 없는 함수. 익명함수(anonymous function)를 실행하기도 합니다.
함수란 사실 append같은 이름이 중요한것이 아니라 그 변수에 할당된 function(){...}이란 함수리터럴이기 때문에 이름은 따로 부를 일이 없으면 없어도 그만입니다 그러므로
1 (function(){ /*...*/})();
이름이 없을 뿐 실행됩니다. 결국 jQuery란 익명함수에 window를 인자로 넘겨서 실행한 결과입니다