How to reload grid without checking if it exists JS Jquery

Question

The system was built with modals and it is possible that there is a modal there in the 2nd level that needs to update two grids below (one in the main screen and the other in the modal in the 1st level)but not always this modal is called from the same place so when completing the action it is possible that these two grids do not exist below it, just every time we will use grid.fnDraw() in JS we need to check first if the grid in question exists with the if(typeof(grid) != "undefined".

I wanted an option so I don’t have to check every time I reload a grid if it exists.

I thought of something like creating a method like this:

function recarregarGrid(grid) {
   if (typeof (grid) != "undefined")
       grid.fnDraw();
}

There are cases where we reload several grids that may not exist at that time:

//Concluíu uma ação e precisa atualizar os dados das grids abaixo da modal
if(typeof(gridItem) != "undefined")
  gridItem.fnDraw();
if(typeof(gridFornecedor) != "undefined")
  gridFornecedor.fnDraw();
if(typeof(gridLocalEntrega) != "undefined")
  gridLocalEntrega.fnDraw();
if(typeof(gridStackOverflow) != "undefined")
  gridStackOverflow.fnDraw();

But anyway I can’t pass a Undefined variable per parameter. So I need a way to pass the grid as a parameter even if it’s like "undefined" or a better solution to no longer need to use this every time if before reloading the grid.

Answer 1

Edited after the comment: You can initialize grids at the beginning of the script as a global object that will gather all the grids that exist. Whenever you set a grid, create a property inside that object to store. So when you call recarregarGrids() simply iterate over the existing grids there and call the function.

// Guarda um objeto para todos os grids
var grids = grids || {};

// Define a função de forma genérica, que vai iterar sobre os grids
// adicionados ao objeto
recarregaGrids = function() {
  for( var grid in grids ) {
    if ( grids.hasOwnProperty(grid) ) {  
        console.log(grids[grid]); // apenas para testar o valor de cada grid
        // grids[grid].fnDraw();
    }
  }
}

// Quando estiver definindo as grids, guarde todas elas dentro do objeto master
grids.grid1 = 'gridStackOverflow';
grids.grid2 = 'gridPadrao';
//etc

recarregaGrids();

Answer 2

if you are running from the browser, you can use the global 'window' object to see if a certain global variable exists

function recarregarGrid(nome) {
    window[nome] && window[nome].fnDraw();
}

recarregarGrid('exemplo')

Note that in the above example, 'example' is a string containing the variable name.

Or, if you don’t want to pollute the global scope, you can use a single global variable to represent all grids, but in that case, you need to remember to always log each grid when it first loads:

gridsExistentes = {};

function recarregarGrid(nome) {
    gridsExistentes[nome] && gridsExistentes[nome].fnDraw();
}

function registrarGrid(nome, grid) {
    gridsExistentes[nome] = grid;
}

recarregarGrid('exemplo')

// (...)

registrarGrid('exemplo', gridPreviamenteCarregado);
recarregarGrid('exemplo')