JavaScript Objects and public variables

Question

I've trying to create a javascript object with public methods and public variables:

jeeni.DataGrid = (function(elementId){
    var divId = elementId;
    var div;
    var saveUrl;
    var columns;
    var dataUrl;

    var validate = function(){
        console.log("divId: " + (divId));
        console.log("div: " + div);
        console.log("saveUrl: " + saveUrl);
        console.log("columns: " + columns);
        console.log("dataUrl: " + dataUrl);
    };

    return {
        toString:validate,
        dateURL:dataUrl,
        saveURL:saveUrl,
        columnDefs:columns
    };

});

and I use it like this:

<script>
    $(document).ready(function() {

        var grid = new jeeni.DataGrid("myDataGrid");

        grid.saveURL = "http://www.jeeni.co.uk/grid/save";
        grid.dataURL = "http://www.jeeni.co.uk/grid/data";
        grid.columnDefs = "[{text:'Column1',width:75}, {text:'Column2',width:150}]";
        grid.toString();
    });
</script>

But at the console I get:

divId: myDataGrid
div: undefined
saveUrl: undefined
columns: undefined
dataUrl: undefined

Can anyone explain why the undefined variables are undefined. Doesn't the return make them public? And how do I get them to be assignable without having to use getters and setters.

Thanks

"Doesn't the return make them public?" No. It returns the current value of those variables (all of which are undefined), it doesn't return a reference to those variables. You have to use getters and setters, or properties instead of variables (i.e., this.saveUrl instead of var saveUrl). The toString:validate part is different because validate is an object. — nnnnnn
– nnnnnn, Commented Jan 24, 2013 at 7:59

THEtheChad · Accepted Answer · 2013-01-24 08:25:05Z

1

You're currently taking the private variables, extracting the VALUES, and returning those in an object. The object you're returning has no REFERENCE to the private variables, it merely has a copy. When you reassign a value after calling your function, you're only changing the copy, not the private variable.

What you need to do is store your data directly on an object as all properties on an object are retrieved via REFERENCE. Example:

jeeni.DataGrid = function(elementId){

    // These are private
    var divId = elementId;
    var div;

    var public = {
      "toString"   : validate,
      "dateURL"    : null,
      "saveURL"    : null,
      "columnDefs" : null
    };

    function validate(){
        console.log("divId: "   + divId);
        console.log("div: "     + div);
        console.log("saveUrl: " + public.saveURL);
        console.log("columns: " + public.columnDefs);
        console.log("dataUrl: " + public.dataURL);
    };

    return public;

};

edited Jan 24, 2013 at 8:25

answered Jan 24, 2013 at 8:10

THEtheChad

2,4321 gold badge17 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Adam Davies Over a year ago

Just what I was looking for

Denys Séguret · Accepted Answer · 2013-01-24 08:00:36Z

0

Your pattern builds private fields (it's often the main reason it's used). So when you do

grid.saveURL = ...

you're just adding a new field, not changing the existing hidden one.

If you want public fields, do this :

jeeni.DataGrid = function(elementId){
    this.divId = elementId;
};
jeeni.DataGrid.prototype.validate = function(){
    console.log("divId: " + (this.divId));
    console.log("div: " + this.div);
    console.log("saveUrl: " + this.saveUrl);
    console.log("columns: " + this.columns);
    console.log("dataUrl: " + this.dataUrl);
};

If you want to keep your fields private, then you must add functions to change them but that would be heavier in your case.

answered Jan 24, 2013 at 8:00

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

Comments

Zorayr · Accepted Answer · 2013-01-24 08:03:55Z

0

You need to add () at the end of your function declaration if you want to immediately invoke the function and assign the returned object to jeeni.DataGrid. For example,

var obj = (function (someArg1) {
    return { pubVar1 : someArg1 };
}("Hello World"));

//Alerts "Hello World".
alert(obj.pubVar1);

To test out the return value of your function/variable, you can always use console.log(obj) and inspect the output on the browser's debug console (if you are using Chrome F12 usually will display this console).

Hope this helps!

answered Jan 24, 2013 at 8:03

Zorayr

25.1k9 gold badges148 silver badges139 bronze badges

Collectives™ on Stack Overflow

JavaScript Objects and public variables

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related