jQuery $()의 의미

jQuery $()의 의미

$()가 의미하는 것은 무엇이라고 물어보면 처음에 jQuery다 라고 대답하합니다. 어떤 의미에서는 맞는 말일 수도 있지만 정확한 의미는 그냥 이름이 $인 함수 그 자체라고 할 수 있습니다. 해석하자면 $()는 $함수를 호출한 것이라고 할 수 있습니다. jQuery 라이브러리 내부를 살펴보면 아래와 같이 작성돼어 있는 것을 알 수 있습니다.

window.jQuery = window.$ = jQuery;

따라서 위의 코드에 따라 아래 두 코드는 동일한 코드입니다.

$('div').css('border', '4px solid #f00');
jQuery('div').css('border', '4px solid #f00');

$('div') 의미는 'div'를 매개변수 값으로 $() 함수를 호출한 것입니다.

$()함수의 리턴값

Javascript에서 점(.)은 특정 객체에서 제공하는 기능에 접근할 때 사용하는 접근 연산자입니다. 

$('div').css('border', '4px solid #f00');

.css()는 접근 연산자를 통해 특정 객체해서 제공하는 기능 중 하나입니다. 즉 $('div') 함수의 리턴값인 특정 객체가 바로 jQuery객체라는 것이다. 위의 코드를 좀더 쉽게 정리하자면 아래와 같습니다.

$divs = $('div');
$divs.css('border', '4px solid #f00');

$()가 jQuery 객체를 리턴한다는 사실은 jQuery 레퍼런스를 보면 알 수 있습니다. http://api.jquery.com/jQuery에 들어가보면 오른쪽 상단에 return으로 jQuery 객체를 해주는 것을 알 수 있습니다.

jQuery 정체

jQuery 객체에 대해 좀 더 자세히 알아보자면 앞에서도 언급한 것처럼 DOM을 쉽게 다룰 수 있게 도와주는 기능들로 가득 찬 라이브러리입니다. jQuery는 자바스크립트의 prototype이라는 클래스 제작 문법으로 만들어졌으며, jQuery를 prototype으로 간단하게 표현하면 아래와 같습니다.

function jQuery() {
 
}
 
jQuery.prototype.css = function(){}
jQuery.prototype.on = function(){}
jQuery.prototype.click = function(){}

클래스를 사용하기 위해서는 인스턴스를 생성해야 하지만, 우리는 jQuery를 사용할 때 jQuery 인스턴스를 생성한 적이 없습니다, 그럼에도 불구하고 사용할 수 있는 건 무슨 이유일까, 바로 $()에서 jQuery 인스턴스를 여러분 대신 만들어서 제공해주기 때문입니다.

function$() {
 
    return new jQuery();
}