Which scope to declare an object for repeated use within a single function

Question

I'm confused as to which of these is the most efficient / best practice ways of declaring this object.

Inside the function i'm reusing, but i presume that means it is declared everytime the function is called

function mapVals(ele){

  var myObj = {
    "chkOne" : "HV1",
    "chkTwo" : "HV2",
    "chkThree" : "HV3"
  }

  var thisVal = myObj[ele.id];
  //Other code
}

Outside the function but then it is polluting the global namespace

var myObj = {
  "chkOne" : "HV1",
  "chkTwo" : "HV2",
  "chkThree" : "HV3"
}

function mapVals(ele){      
  var thisVal = myObj[ele.id];
  //Other code
}

Or perhaps an encapsulation technique to create a temporary scope? I know the syntax but haven't used it before.

(function(){

  var myObj = {
     "chkOne" : "HV1",
     "chkTwo" : "HV2",
     "chkThree" : "HV3"
   }

   function mapVals(ele){      
      var thisVal = myObj[ele.id];
      //Other code
   }

})();

Or anything else I haven't considered?

Why can't people comment when they downvote? If there is no explanation why someone has taken a disliking to my question then I won't know for next time and be able to correct this mistake? — Mark Walters, Aug 01 '13 at 14:37
In your 3rd example, note that the `mapVals` function wouldn't be accessible by anything outside of that scope (which can be modified to allow it), but it will do nothing how it is. — Ian, Aug 01 '13 at 14:42
It also depends on **what** you're doing with `myObj`. In your examples, you're only **getting** stuff from it. If you were modifying the object and you didn't want all functions to share the object (they each need to modify a local copy for some reason), then you'd have to stick with your first example. Otherwise, your second and third example *share* a single object (which may or may not be desired) — Ian, Aug 01 '13 at 14:51
@Ian I'm only retrieving data from the object nothing more. The function will be called on state change of a group of checkboxes, i'm then just going to populate a hidden field with a string (list) of their mapped values. I didn't know if the first option was costly if the user was clicking things left right and centre in terms of the object being declared again and again. — Mark Walters, Aug 01 '13 at 14:57
Well yeah, I think it would be costly because it has to create the object every function call. So I would stick with the third, because it doesn't expose the `myObj` globally. NickTomlin's answer is great and I would go with that — Ian, Aug 01 '13 at 14:59

score 2 · Accepted Answer · edited May 23 '17 at 10:31

The 3rd one is the most "secure" of the three you present, but it has little utility because the objects inside it are inaccessible after you initially invoke it.

Depending on the complexity of what you want to do, a simple module pattern may be the best choice:

var module = (function(){

  var myObj = {
     "chkOne" : "HV1",
     "chkTwo" : "HV2",
     "chkThree" : "HV3"
   };

  return {
    mapVals: function (ele){      
      var thisVal = myObj[ele.id];
   }, 
    setVal: function (prop,value) {
      myObj[prop] = value;
    },
    getVal : function (val) {
      return myObj[val];
    }
  };

})();

// we can access and modify properties of myObj within the closure
module.mapVals('chkOne');
module.setVal('foo','bar');
console.log(module.getVal('foo'));

JSbin

This allows you to "seal" your code in a closure, where myObj is only defined once, but also export methods to access myObj (or other variable declared within module) further on in your application. This is a small taste of the power of closures.

How does the third hold little advantage over the first? The `myObj` doesn't need to be created every function call in the second/third. And what do you mean by `the values are inaccessible after you initially invoke them`? — Ian, Aug 01 '13 at 15:00
Thanks for the example and the "closures" link, some good explanations there. — Mark Walters, Aug 01 '13 at 15:11
@Ian you are right to point this out. I was too focused on the "scope" aspect of the example. I've edited my answer accordingly. — Nick Tomlin, Aug 01 '13 at 15:11

score 0 · Answer 2 · answered Aug 01 '13 at 14:36

0

The 3rd option might be your best bet if you do not want to pollute the global namespace.

answered Aug 01 '13 at 14:36

Naftali

144,921
39
244
303

In addition to that, wouldn't it be more efficient to **not** create `myObj` on every function call (the difference between the first and second examples)? – Ian Aug 01 '13 at 14:49

Which scope to declare an object for repeated use within a single function

2 Answers2