Alexander Solonik
Alexander Solonik

Reputation: 10230

understanding why the data attribute values are set to null

I was just going through the code in counterup.js and i came across the following lines of code :

            delete $this.data('counterup-nums');
            $this.data('counterup-nums', null);
            $this.data('counterup-func', null);

Of course this plugin uses data attributes for storing values, which it later uses for calculations. now my question is, not what are the above lines of code doing, but rather why the above lines of code at all ?

Ok the first line of code :

delete $this.data('counterup-nums');

Does make a little bit of sense, but what are the below lines of code doing at all

$this.data('counterup-nums', null);
$this.data('counterup-func', null);

?

Upvotes: 2

Views: 1744

Answers (2)

NiRUS
NiRUS

Reputation: 4259

This was interesting. But i researched some interesting facts by writing the sample code as below.

 function hello(){
    var el = document.querySelector('#user');
    el.dataset.dateOfBirth = '1960-10-03';   
}


function undIt(){
 var el = document.querySelector('#user');
 el.dataset.dateOfBirth = undefined;    
}

hello()
alert(document.querySelector('#user').dataset.dateOfBirth)

undIt()
alert(document.querySelector('#user').dataset.dateOfBirth)

delete document.querySelector('#user').dataset.dateOfBirth;

Js Fiddler link http://jsfiddle.net/nirus/f92chmdp/1/

When i commented the delete statement i found that the dataset variable still persists in the DOM tree(Set as undefined string) see the below imageenter image description here

When i un-commented the delete statement i could see its been removed from the DOM tree. See the image below enter image description here

Conclusion: Author has used delete keyword to completely remove the reference of the data variable and its persistence.

----------------------------***** Based on the comment by user guest271314 ******------------------

I did some research again and yes jQuery implementation is different. So to achieve the above for jQuery code see the below.(Author should have implemented like below code) Jsfiddler

   $(function(){
    function hello(){
        var el = $('#user');
        el.data('dateOfBirth','1960-10-03');
    }


    function undIt(){
        var el = $('#user');
        el.data('dateOfBirth',null);    
    }

    alert($('#user').data('dateOfBirth'))

    hello()
    alert($('#user').data('dateOfBirth'))

    undIt()
    alert($('#user').data('dateOfBirth'))

    //delete document.querySelector('#user').dataset.dateOfBirth;
    //delete $('#user').data('dateOfBirth');
    delete jQuery.cache.data.dateOfBirth;

    alert($('#user').data('dateOfBirth')) //This line throws Error. Read Note: section
});

jQuery maintains a cache variable called jQuery.cache.data and stores the key/value under this hood to avoid performance overhead by querying the DOM and extracting the value. If you want to use HTML5 implementation of data API in jQuery use .Attr() API

Note : In the above code last line throws an error as value is removed and browsers cannot refer undefined or null object references in Object tree. Technically the variables and references are removed.

Upvotes: 3

Manwal
Manwal

Reputation: 23816

delete: The delete operator removes a property from an object.

I mayn't explain what delete $this.data('counterup-nums'); line is doing, but may be author wants to clear every thing with this line. And i believe this delete keyword doesn't make sense with $this.data('counterup-nums'). Instead of this delete i would have preferred Jquery.removeData() for removing data attribute from element.

But following like makes a sense:

$this.data('counterup-nums', null);
$this.data('counterup-func', null);

Author is setting data attributes to null so that next time he can easily identify, value is reset or not.

Upvotes: 1

Related Questions