What's an efficient way to have a Javascript table of functions? -

in code follows draw dots on die having table of functions know how draw dots given die.

i'm worried, however, these tables recreated each , every time. if in c++ i'd make them static, that's of course not possible. i'd know how each time call drawdie doesn't recreate function tables.

or compiler/parser/interpreter of modern browser smart enough don't have worry it?

// drawdie // // draws die 'dots' count of dots @ given location , size.  dot     size based on die size.  function drawdie(x, y, cx, cy, dots) { game.context.drawimage(game.getimage('images/reddie.png'), x, y, cx, cy); var dotradius  = cx / 10; var dotspacing = cx / 8 + dotradius; var centerx    = x + cx / 2; var centery    = y + cy / 2;  function center()       { drawcircle(centerx,              centery,              dotradius); }; function topleft()      { drawcircle(centerx - dotspacing, centery - dotspacing, dotradius); }; function topcenter()    { drawcircle(centerx,              centery - dotspacing, dotradius); }; function topright()     { drawcircle(centerx + dotspacing, centery - dotspacing, dotradius); }; function middleleft()   { drawcircle(centerx - dotspacing, centery,              dotradius)  }; function middleright()  { drawcircle(centerx + dotspacing, centery,              dotradius)  }; function bottomleft()   { drawcircle(centerx - dotspacing, centery + dotspacing, dotradius); }; function bottomcenter() { drawcircle(centerx,              centery + dotspacing, dotradius); }; function bottomright()  { drawcircle(centerx + dotspacing, centery + dotspacing, dotradius); };  diedrawingfunctions = [     [],                                                                                                     // 0     [center],                                                                                               // 1     [topleft, bottomright],                                                                                 // 2     [center, topleft, bottomright],                                                                         // 3     [topleft, topright, bottomleft, bottomright],                                                           // 4     [topleft, topright, bottomleft, bottomright, center],                                                   // 5     [topleft, topcenter, topright, bottomleft, bottomcenter, bottomright],                                  // 6     [topleft, topcenter, topright, bottomleft, bottomcenter, bottomright, center],                          // 7     [topleft, topcenter, topright, bottomleft, bottomcenter, bottomright, middleleft, middleright],         // 8     [topleft, topcenter, topright, bottomleft, bottomcenter, bottomright, middleleft, middleright, center], // 9 ];  (var = 0; < diedrawingfunctions[dots].length; i++)     diedrawingfunctions[dots][i](); 

}

you can avoid recreating functions each time. whether it's necessary/beneficial question, can:

function center(centerx, centery, dotradius, dotspacing)       { drawcircle(centerx,              centery,              dotradius); }; function topleft(centerx, centery, dotradius, dotspacing)      { drawcircle(centerx - dotspacing, centery - dotspacing, dotradius); }; function topcenter(centerx, centery, dotradius, dotspacing)    { drawcircle(centerx,              centery - dotspacing, dotradius); }; function topright(centerx, centery, dotradius, dotspacing)     { drawcircle(centerx + dotspacing, centery - dotspacing, dotradius); }; function middleleft(centerx, centery, dotradius, dotspacing)   { drawcircle(centerx - dotspacing, centery,              dotradius)  }; function middleright(centerx, centery, dotradius, dotspacing)  { drawcircle(centerx + dotspacing, centery,              dotradius)  }; function bottomleft(centerx, centery, dotradius, dotspacing)   { drawcircle(centerx - dotspacing, centery + dotspacing, dotradius); }; function bottomcenter(centerx, centery, dotradius, dotspacing) { drawcircle(centerx,              centery + dotspacing, dotradius); }; function bottomright(centerx, centery, dotradius, dotspacing)  { drawcircle(centerx + dotspacing, centery + dotspacing, dotradius); }; var diedrawingfunctions = [     [],                                                                                                     // 0     [center],                                                                                               // 1     [topleft, bottomright],                                                                                 // 2     [center, topleft, bottomright],                                                                         // 3     [topleft, topright, bottomleft, bottomright],                                                           // 4     [topleft, topright, bottomleft, bottomright, center],                                                   // 5     [topleft, topcenter, topright, bottomleft, bottomcenter, bottomright],                                  // 6     [topleft, topcenter, topright, bottomleft, bottomcenter, bottomright, center],                          // 7     [topleft, topcenter, topright, bottomleft, bottomcenter, bottomright, middleleft, middleright],         // 8     [topleft, topcenter, topright, bottomleft, bottomcenter, bottomright, middleleft, middleright, center], // 9 ];  function drawdie(x, y, cx, cy, dots) {     game.context.drawimage(game.getimage('images/reddie.png'), x, y, cx, cy);     var dotradius  = cx / 10;     var dotspacing = cx / 8 + dotradius;     var centerx    = x + cx / 2;     var centery    = y + cy / 2;      (var = 0; < diedrawingfunctions[dots].length; i++) {         diedrawingfunctions[dots][i](centerx, centery, dotradius, dotspacing);     } } 

---

side note: original code falling prey the horror of implicit globals (that's link post on anemic little blog) because didn't declare diedrawingfunctions variable, assigning created global. recommend using strict mode, makes error, bringing attention can fix it.