How to use a variable in an argument ?

...this is really a weird piece of code... with every button 1 press, a new watch on button 1 is created... furthermore, the index runs away... (of course, only after quite many presses). Fixing of the code is removing the first repeating watch and changing the second one to repeat. For the index, remove the modulo in every array access, and replace the simple increment with index = ++index % maxColors;. Looking at why maxColors is needed to be set manually, I decided to give this code a face lift, because it's less to rewrite than instruct what to change to make it ... (you can call it whatever you want).

/* jshint esversion: 6 */
(function() {

  const colors = [
    { value: 0x0000, name: "Black" },
    { value: 0x000F, name: "Navy" },
    { value: 0x03E0, name: "DarkGreen" },
    { value: 0x03EF, name: "DarkCyan" },
    { value: 0x7800, name: "Maroon" },
    { value: 0x780F, name: "Purple" },
    { value: 0x7BE0, name: "Olive" },
    { value: 0xC618, name: "LightGray" },
    { value: 0x7BEF, name: "DarkGrey" },
    { value: 0x001F, name: "Blue" },
    { value: 0x07E0, name: "Green" },
    { value: 0x07FF, name: "Cyan" },
    { value: 0xF800, name: "Red" },
    { value: 0xF81F, name: "Magenta" },
    { value: 0xFFE0, name: "Yellow" },
    { value: 0xFFFF, name: "White" },
    { value: 0xFD20, name: "Orange" },
    { value: 0xAFE5, name: "GreenYellow" },
    { value: 0xF81F, name: "Pink" }
  ];

  const colorCount = colors.length;
  var index = -1, color;

  function drawColor() {
    // 'get' - point to - next color
    color = colors[index = ++index % colorCount];

    // draw filled rectangle
    g.setColor(color.value)
     .fillRect(0, 24, g.getWidth(), g.getHeight())

    // draw value name of color
     .setFontAlign(0, 0)
     .setColor((color.name == "White") ? 0 : 0xFFFF)
     .setFont("6x8", 4)
     .drawString('0x' + color.value.toString(16), 120, 80)
     .setFont("6x8", 3)
     .drawString(color.name, 120, 160)

    // draw next button info
     .setFont("6x8", 2)
     .setFontAlign(0, 0, 3)
     .drawString("Next", 230, 46)

     ;

  }

  g.clear();
  setWatch(drawColor, BTN1, { repeat: true });
  E.showMessage("Press BTN1\nto start");

})();

PS: I assume that creator of this code confused that the original design did not work with repeated watching button 1 outside of the drawColor() function - that no matter what value the repeat(e) option property was given - it just did not work so the watch, the second one inside the loop was established... this time with proper spelling of the repeat: option property...

(...this in the official Espruino repo... @Gordon, I guess introducing an ESR### - like the JSR### - process would give a bit more stability to the code base. To not stifle the contribution process, it could be a two stage app repository, where a new or changed app first goes into a staging mode / area / ... and move into the final place only after community feedback.)