이 글은 jquery-1.2.2.js 기반으로 작성되었다.

data 메소드는 사용자가 DOM 요소에 프로퍼티를 추가하고 싶을 때, 메모리 누수를 피하기 위해 구현된 메소드이다.

먼저 다음 코드를 보자.

var node = document.getElementById('myId');
node.onclick = function(){};
node.myObj = {
label : document.getElementById('myLabel');
};

사용자는 편의를 위해 혹은 빠른 참조를 위해 위와 같은 코드가 필요할 경우가 있다. 하지만 이 코드는 몇몇 웹브라우저에서 가비지 컬렉션 구현의 결점으로 인해 메모리 누수의 원인이 된다.

jquery에 data메소드가 있는 이유는 이러한 용도로 쓸 수 있되, 메모리 누수를 피하기 위해 제공된다.

위의 코드는 다음과 같이 data메소드를 이용하여 깔끔하고 안전하게 구현할 수 있다.

$('#myId').data('myObj', {
    label: $('#myLabel')[0]}
);
var myObj = $('#myId').data('myObj');
myObj.label;

data 메소드에 대해 소스를 통해 자세히 살펴보자.

    data: function( elem, name, data ) {
        elem = elem == window ?
            windowData :
            elem;

        var id = elem[ expando ];

        // Compute a unique ID for the element
        if ( !id )
        id = elem[ expando ] = ++uuid;

        // Only generate the data cache if we're
        // trying to access or manipulate it
       if ( name && !jQuery.cache[ id ] )
           jQuery.cache[ id ] = {};

        // Prevent overriding the named cache with undefined values
        if ( data != undefined )
            jQuery.cache[ id ][ name ] = data;

        // Return the named cache data, or the ID for the element
           return name ?
               jQuery.cache[ id ][ name ] :
               id;
      },

6 ~ 10 라인 : expando 는 흔히 런타임시에 객체에 추가되는 프로퍼티를 일컫는데, jquery에서 expando는 다음과 같이 선언되어 있다.

var expando = "jQuery" + (new Date()).getTime();

즉, DOM요소의 expando 프로퍼티에 유니크한 아이디를 할당한다. 여기의 uuid는 곧 아래 나오는 jQuery.cache에 저장되는 인덱스로서 활용이 된다.

18~19 라인 : 파라미터로 data가 들어온 경우에, cache[id][name]에 해당 data를 가리키도록 한다. 즉 set이 실행되는 것이고, data가 undefined인 경우에는 get이 실행되는 셈이다.

23~25 라인 : name이 있는 경우 jQuery.cache에 있는 해당 캐쉬된 데이타를 리턴하고, 아닌 경우 id만을 리턴한다.

결론적으로, data 메소드는 jQuery.cache라는 저장소에 사용자가 원하는 객체를 저장하고 불러올 수 있도록 하면서, 메모리 누수를 방지하는 역할을 한다고 할 수 있다.