Dyamically chosen function

This fiddle applies a dynamically chosen set of transforms to each element of an array.

by DaveInOhio

HTML

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<body onload="dynam()">
<h1>
  Output below
</h1>
<pre id="output">Output goes in this space</pre>
</body>

JavaScript

function dynam () {

	var prepend = 'before - ';
  var append = ' - after';
  var whichCase = 'Upper';
  
  var functionsToApply = [];
	var matrix = [
  						['aBc', 'DeF'],
              ['ghi', 'JKL'],
  					];
            
  var out = 'Initial: ' + matrix.join(' | ');
  document.getElementById('output').innerHTML =  out + '\n';
  console.log(out);
  
  // Set up transforms
  if (whichCase == 'Lower') {
    functionsToApply.push(function(v) {return v.toLowerCase();});
  } else if (whichCase == 'Upper'){
    functionsToApply.push(function(v) {return v.toUpperCase();});
  }

// How can the function be defined dynamically?
// Perhaps something like:
//  if(['Lower','Upper'].indexOf(whichCase) != -1) {
//    functionsToApply.push(function(v) {'return v.to' + which + 'Case();'});
//  }
  
  if (prepend && prepend.length > 0 && prepend != 'none') {
    functionsToApply.push(function(v) {return prepend + v;});
  }
  if (append && append.length > 0 && append != 'none') {
    functionsToApply.push(function(v) {return v + append;});
  }

// Apply all of the transforms to each of the elements of the matrix
  matrix = matrix.map(function(row){
    return row.map(function(val) {
      for (var fn = 0; fn < functionsToApply.length; fn++) {
        val = functionsToApply[fn](val);  
      }
      return val;
    })
  }); 
  out = 'Final: ' + matrix.join(' | ');
  document.getElementById('output').innerHTML +=  out + '\n';
	console.log(out);
}