jQuery Setting global var

Question

I am using the following JS code in multiple places;

$(this).attr("name")

I use it in diff places as;

var currentKey = $(this).attr("name");
currentKeyVal = retrievedUserDataObj[$(this).attr("name")];
currentKeyVal = UserDataObj[$(this).attr("name")];

Now my question is is it possible to somehow make it as global variable so that the above code does not repeat ?

I am not sure if it can be made gloabl because of $(this) ?

EDIT Actual/Optimized code;

    function setFormFieldValues()
{
var currentKey,currentKeyVal;
    if (supports_html5_storage())
    {
    var retrievedUserDataObj = JSON.parse(localStorage.getItem('UserDataObj'));
    localStorageSupport = true;
    }

    $(".formFieldUserData").each(function(){
        var $this = $(this);
        currentKey = $this.attr("name");
        currentKeyVal = UserDataObj[currentKey]; //Set with default values initially

        if (localStorageSupport)
        {
            if(retrievedUserDataObj) //called when there are some values in localStorage
                currentKeyVal = retrievedUserDataObj[currentKey];
        }
        else
        {
            if ($this.val() != "")
                currentKeyVal = $this.val();
        }

        $("#"+currentKey).val(currentKeyVal); //Input text box
        $("#"+currentKey+"Txt").html(currentKeyVal); // Form label
    })
}

I think you can do this `window.foo = $(this)`. But `this` in js is really different. I think you need to provide more context. — jagttt, Mar 10 '13 at 14:52
Given that the context of `this` changes depending on the location in the code, what's the point of making it a global variable? This would only make sense in the unlikely event that `this` refers to the *very same* element in any context. — Boaz, Mar 10 '13 at 14:52

Mottie · Accepted Answer · 2013-03-10T15:27:55.680

0

It might be easier to just use a function to do that processing; I'm not sure why currentKeyVal is defined twice:

// define outside the function to make them global
var currentKey, currentKeyVal;

function getCurrentKeys(element){
    currentKey = $(element).attr("name");
    currentKeyVal = retrievedUserDataObj[currentKey];
    currentKeyVal = UserDataObj[currentKey];
}

Use it as follows:

getCurrentKeys(this);

Update Adding optimizations described in comments:

function setFormFieldValues()
{
    var currentKey,currentKeyVal;
    if (supports_html5_storage())
    {
    var retrievedUserDataObj = JSON.parse(localStorage.getItem('UserDataObj'));
    localStorageSupport = true;
    }

    $(".formFieldUserData").each(function(){
        var $this = $(this);
        currentKey = $this.attr("name");
        currentKeyVal = UserDataObj[currentKey]; //Set with default values initially

        if (localStorageSupport)
        {
            if(retrievedUserDataObj) //called when there are some values in localStorage
                currentKeyVal = retrievedUserDataObj[currentKey];
        }
        else
        {
            if ($this.val() != "")
                currentKeyVal = $this.val();
        }

        $("#"+currentKey).val(currentKeyVal); //Input text box
        $("#"+currentKey+"Txt").html(currentKeyVal); // Form label
    });
}

Yes, you could optimize the code a bit more using ternary operators, but it would make it a bit more difficult to read.

edited Mar 10 '13 at 15:27

answered Mar 10 '13 at 14:53

Mottie

84,355
30
126
241

Thx...I have Edited the original question with the actual code....so you can get a better understanding why I have done the way i have coded... – copenndthagen Mar 10 '13 at 15:02
Well, I see two optimizations you could make: (1) first line inside the `.each()` function could be `var $this = $(this)`, and use that instead of repeatedly defining the this jQuery object. (2) Use `currentKey` instead of `$(this).attr("name");` multiple times like I did in my code example above. – Mottie Mar 10 '13 at 15:11
Could you please edit the same in my original question so that I could understand the optimizations better...Also you could also suggest any additional optimizations as well... – copenndthagen Mar 10 '13 at 15:15
OR I have edited it now....can u check if the code looks fully optimized now.... – copenndthagen Mar 10 '13 at 15:20
Yep, that's pretty much what I did. – Mottie Mar 10 '13 at 15:28
Thx a lot....So my code looks pretty well optimized as of now according to u.... – copenndthagen Mar 10 '13 at 15:35
Optimized and still readable, yes. But as I said, you could optimize it even more, like use ternary operators or run the code through a minifier, but then it becomes more difficult to read and maintain. – Mottie Mar 10 '13 at 15:42

jQuery Setting global var

1 Answers1