Question

I’m passing a large “options” object to another set of objects I’m instantiating in JavaScript. The problem is, a very few of these “options” must change from object to object. Making a completely separate options variable, with 1 of the many options changed, feels silly. I also don’t think I can just change the option on the same “options” object, as all of the objects will reference the same “options”.

Below is the relevant code.

    for (var i = 0; i < invoices.length; i++) {

        var ura_original_column = { "column" : "ura_ppa_original",
                                    "on_update" : [format_ura],
                                    "display" : "URA" };

        if (invoices[i]["type"] == "P") {
            ura_original_column = { "column" : "ura_original",
                                    "on_update" : [format_ura],
                                    "display" : "URA" };
        }

        var options = { template_table  : "template_table",
                        template_total  : "template_total",
                        template_row    : "template_row",
                        template_text   : "template_text",
                        template_select : "template_select",
                        packet_id       : <?val=packet["packet_id"]?>,
                        products        : <?val=json.dumps(products)?>,
                        allow_new_rows  : <?val=json.dumps(packet["status"] not in api.NON_MODIFIABLE_STATUS)?>, 
                        on_table_focus  : on_table_focus,
                        on_row_update   : on_row_update,
                        on_new_row      : on_new_row,
                        columns : [{"column" : "product_code", 
                                    "display" : "Product"},
                                   {"column" : "transaction_type",
                                    "display" : "FFSU/MCOU",
                                    "editor" : "selectedit",
                                    "options" : ["FFSU", "MCOU"]},
                                    ura_original_column,
                                   {"column" : "ura_current",
                                    "display" : "Calculated URA"},
                                   {"column" : "units_current",
                                    "display" : "Current Units",
                                    "on_update" : [format_units],
                                    "show_total" : true},
                                   {"column" : "amount_claimed", 
                                    "display" : "Amt Claimed",
                                    "on_update" : [format_currency],
                                    "show_total" : true},
                                   {"column" : "scripts_current",
                                    "display" : "Scripts",
                                    "on_update" : [format_scripts],
                                    "show_total" : true},
                                   {"column" : "amount_medi_reimbursed", 
                                    "display" : "MEDI Amt", 
                                    "on_update" : [format_currency],
                                    "show_total" : true},
                                   {"column" : "amount_non_medi_reimbursed", 
                                    "display" : "Non-MEDI Amt", 
                                    "on_update" : [format_currency],
                                    "show_total" : true},
                                   {"column" : "amount_total_reimbursed", 
                                    "display" : "Total Amt", 
                                    "on_update" : [format_currency],
                                    "show_total" : true}]}

        var invoice_id = invoices[i]['invoice_id'];
        var transactions = transactions_by_invoice[invoice_id];
        var table = new Table.Table("invoice_" + invoice_id, options, transactions);

        tables.push(table);
    }
});

So, out of this gigantic options structure, only the “ura_original_column” changes. This might be the best way to do it, but it feels like a bit of a hack.

Anyone have a more elegant suggestion?

Thanks for taking the time to look.

Answer 1

You can use the new Object.create to create a new object that only has the different option, but is backed by a prototype with all the other options. (This is an ES5 feature, but you can create a version of it that offers the main functionality or use on of the “ES5 shim” projects that does, including the bit you need; it’s impossible to fully create Object.create in a pre-ES5 environment, but you don’t need all of it.)

That looks like this:

var mainOptions = { /* ...bit list of main options... */ };

for (index = 0; index < limit; ++index) {
    theseOptions = Object.create(mainOptions);
    theseOptions.column = "new column name";
    doTheThing(theseOptions);
}

What you end up with is an object that only has the properties you changed, but which if asked for any of the other properties, will return the value from the main options prototype.

Here’s a self-contained example of doing this: Live copy | source

(function() {

  // Get a `create` function that acts a bit like
  // `Object.create` even if `Object.create` isn't
  // there
  var objectCreate = (function() {
    if (Object.create) {
      return Object.create;
    }

    function ctor() { }

    return function(proto) {
      var rv, key;

      ctor.prototype = proto;
      rv = new ctor();
      ctor.prototype = undefined;

      return rv;
    };
  })();


  var mainOptions = {
    option1: "Main option 1",
    option2: "Main option 2",
    option3: "Main option 3"
  };

  var index;
  var theseOptions;

  for (index = 0; index < 4; ++index) {
    theseOptions = objectCreate(mainOptions);
    theseOptions.option2 = "Special option 2 for index " + index;

    displayOptions(index, theseOptions);
  }
  display("Options passed to function");

  function displayOptions(index, options) {
    // Do it *later* so we know we weren't just
    // doing it before the object got updated
    setTimeout(function() {
      display("Options for index " + index + ":");
      display(options.option1);
      display(options.option2);
      display(options.option3);
    }, 0);
  }

  function display(msg) {
    var p = document.createElement('p');
    p.innerHTML = String(msg);
    document.body.appendChild(p);
  }
})();

Again, important to understand that the objectCreate given there if Object.create doesn’t exist is not a full shim for the real Object.create. It’s just enough to get the bit we want done, done.