Define a Function inside an Object with a variable as part of the function

Question

I am trying to define a function inside an object where one item the portion of the function to be processed is based on a variable. In the code below, how do I get *dynamicValue* to be saved as the current value of myColumn ?

  var viewColumns = [0];
  var count = 0;
  var dataCount = 3;
  var total = 0;
  while (count < dataCount) {
    var myColumn = count + 1;
    var viewColumnDescription = {
        calc: function (dt, row) {
          return dt.getValue(row, *dynamicValue*);
        },
        type: "number",
        role: "annotation"
      };
    viewColumns.push(myColumn);
    viewColumns.push(viewColumnDescription);
    count += 1;
  }

Note that I have hard coded a value for dataCount so that all variables are defined in the sample section but in my actual code this value currently changes to be a number between 1 to 3. It could be more at a later date as well so I want to be able to use a loop to define the items.

In this case the resulting object should be as if I did this:

viewColumns = [0,
      1, {
        calc: function (dt, row) {
          return dt.getValue(row, 1);
        },
        type: "number",
        role: "annotation"
      },
      2, {
        calc: function (dt, row) {
          return dt.getValue(row, 2);
        },
        type: "number",
        role: "annotation"
      },
      3, {
        calc: function (dt, row) {
          return dt.getValue(row, 3);
        },
        type: "number",
        role: "annotation"
      },
      {
        calc: function (dt, row) {
          return 0;
        },
        label: "Total",
        type: "number",
      },
      {
        calc: function (dt, row) {
          return 'Total: ' + (dt.getValue(row, 1) 
                           + dt.getValue(row, 2) 
                           + dt.getValue(row, 3));
        },
        type: "string",
        role: "annotation"
      }
    ];

If dataCount were 2 instead of 3, all references to dt.getValue(row, 3) would be removed. Hopefully once I know the first part I can figure out how to have the last function calculate the total of all available rows.

This is to be used to create charts using the Google Visualization API.

Answer 1

Change myColumn and viewColumnDescription from var into let . Replace *dynamicValue* with myColumn

Or if you don't want to use let , you'll have to use closures to make sure that the value of myColumn is stored in the appropriate scope...

If you don't use let - or you don't put it in a closure, all of the viewColumnDescription functions would see myColumn with value = 3

Sample with let - note that I've used it only where strictly necessary.

  var viewColumns = [0];
  var count = 0;
  var dataCount = 3;
  var total = 0;
  while (count < dataCount) {
    let myColumn = count + 1;
    let viewColumnDescription = {
        calc: function (dt, row) {
          return dt.getValue(row, myColumn);
        },
        type: "number",
        role: "annotation"
      };
    viewColumns.push(myColumn);
    viewColumns.push(viewColumnDescription);
    count += 1;
  }