Javascript - Create new variable each time function is called

Question

What I want to do is create a new variable each time function loadGrid is called. In the function below, the variable in this case would be datagrid. The reason why I want to do this is because I'll be creating multiple table objects, and each table object will need its own reference variable to call functions such as filter to it.

I looked into this solution here: Convert string to variable name in Javascript. However, comments state this isn't best practice in Javascript. Is there a better solution to what I want to achieve?

var loadGrid = function(dbTableName) {

    $('#'+dbTableName).on('click', function(e){

        $('#tables').find('.active').toggleClass('active');
        $(this).toggleClass('active');

        DatabaseGrid.prototype.fetchGrid = function()  {
            // call the PHP script to get the data
            this.editableGrid.loadJSON("loaddatacustomers.php?db_tablename=" + dbTableName);
        };

        var datagrid = new DatabaseGrid();

        $("#filter").keyup(function() {
          datagrid.editableGrid.filter( $(this).val());
        });

        e.preventDefault();
    });
}

Since essentially everybody in the world thinks that global variables are bad things, why do you want to do this? — Pointy, Jan 02 '15 at 04:57
Don't use separate variables. Use an array. Each time you call the function, you `.push()` a new element onto the array. — Barmar, Jan 02 '15 at 04:57
@Pointy Sorry I don't necessarily need to create a global variable. I just need to create a new reference variable for each new `DatabaseGrid` object created so I can use functions such as `filter` on it. — jchi2241, Jan 02 '15 at 05:00
@jchi2241 You could `return datagrid;` or an object containing it, and let the other code manage the references. — Alexander O'Mara, Jan 02 '15 at 05:01
@Barmar Every time the grid is reloaded, this will create a new object. If the grid is reloaded multiple times, this will create multiple references in that one array until the page is refreshed. Is there a way to just replace that reference in the array instead of continuously pushing new objects into it? — jchi2241, Jan 02 '15 at 05:36
Isn't that what you want? If you were going to create a new variable, what's wrong with creating a new array element? — Barmar, Jan 02 '15 at 05:38

score 1 · Accepted Answer · answered Jan 02 '15 at 05:02

you could create an array that holds all your datagrids!

datagridSet = [];
loadGrid = function(dbTableName){
    (..)
    var datagrid = new DatabaseGrid();
    datagridSet.push(datagrid);
    (..)
}

You would access each datagrid via the Array[index] notation :)

Also, global variables are not a very good idea, for that you could create your own pseudo-namespace.

GridStuff = {
    datagridSet:[],
    loadGrid:function(dbTableName){
        (..)
        var datagrid = new DatabaseGrid();
        this.datagridSet.push(datagrid);
        (..)
    }
}

Hope that helps, happy new year!

Javascript - Create new variable each time function is called

1 Answers1