Refactoring code for more readability

Question

I've finally got all my code working as expected and it handles the data quickly. But now I'm looking to refactor it because there is some duplicate sections that just looks like can be broken down for more efficiency and readability. With out making this too long, here is the original:

I created functions createNumLabel and createPctLabel to basically do what is in the if statement. So if codeID = 1,32,28,33,10 call createNumLabel else call createPctLabel. While that doesn't crash the map no labels on the map are drawn. Any ideas would be helpful.

    function labels(graphics) {
    globals.map.on("update-end", function () {

        var font = new esri.symbol.Font(10, esri.symbol.Font.STYLE_NORMAL, esri.symbol.Font.VARIANT_NORMAL, esri.symbol.Font.WEIGHT_BOLDER, "Arial");//create font object
        //var gl = globals.featureLayers[1].graphics;//low res
        var gl2 = globals.featureLayers[2].graphics;//high res            

        console.log("Initial zoom level is :" + globals.map.getZoom());
        console.log("Scale is :" + globals.map.getScale());

        globals.map.graphics.clear();
        if(globals.map.getZoom() >=9)  {
            console.log(gl2.length);
            //globals.featureLayers[1].setVisibility(false);
            for (var i = 0; i < gl2.length; i++) {                   

                if (codeID == 1 || codeID == 32 || codeID == 28 || codeID == 33 || codeID == 10) {
                    //createNumLabel(graphics);
                    var g2 = globals.featureLayers[2].graphics[i];
                    var strLabel2 = g2.attributes.NAME + ":" + $.formatNumber(findFips(g2), { format: '#,###', locale: "us" });//creates string label formatted
                    var textSymbol2 = new esri.symbol.TextSymbol(strLabel2, font);

                    textSymbol2.setColor(new dojo.Color([0, 0, 0]));

                    var pt2 = g2.geometry.getExtent().getCenter();
                    var labelPointGraphic2 = new esri.Graphic(pt2, textSymbol2);
                    //add label to the map
                    globals.map.graphics.add(labelPointGraphic2);
                }//end if
                else {
                    //createPctLabel(graphics);
                    var g2 = globals.featureLayers[2].graphics[i];
                    var strLabelPct2 = g2.attributes.NAME + " : " + $.formatNumber(findFips(g2), { format: '#,###.0', locale: "us" }) + "%";
                    var textSymbol2 = new esri.symbol.TextSymbol(strLabelPct2, font);//create symbol with attribute name  

                    textSymbol2.setColor(new dojo.Color([0, 0, 0]));//set the color

                    var pt2 = g2.geometry.getExtent().getCenter(); //get center of county
                    var labelPointGraphic2 = new esri.Graphic(pt2, textSymbol2); //create label graphic

                    //add label to the map
                    globals.map.graphics.add(labelPointGraphic2);

                }//end else
            }//end for
        }//ends if            
    });//ends update end
}//ends labels function

Answer 1

Addressing the duplication, it seems that both conditions are processed the same with the exception of format. You could either provide an inline conditional (ternary statement) to determine the format to use or pass the codeID to a function and return the respective format. At that point the if/else narrows in context and is only applied at the building of strLabel/strLabelPct2.

The function usage would be more extensible if the need for code modifications were to arise, as such, it would be my preference.

Function:

var applyFormatting = function(codeID, data) {
  if (codeID == 1 || codeID == 32 || codeID == 28 || codeID == 33 || codeID == 10) {
    return  $.formatNumber(data, { format: '#,###', locale: "us" }); 
  }
  return $.formatNumber(data, { format: '#,###.0', locale: "us" }) + "%";
  };

for (var i = 0; i < gl2.length; i++) {                   
  var g2 = globals.featureLayers[2].graphics[i];

  var affectedValue = applyFormatting(codeID, findFips(g2));

  var strLabel2 = g2.attributes.NAME + ":" + affectedValue;
  var textSymbol2 = new esri.symbol.TextSymbol(strLabel2, font);
  textSymbol2.setColor(new dojo.Color([0, 0, 0]));
  var pt2 = g2.geometry.getExtent().getCenter();
  var labelPointGraphic2 = new esri.Graphic(pt2, textSymbol2);

  //add label to the map
  globals.map.graphics.add(labelPointGraphic2);
}  

Ternary:

 var codesThatAffectLabel = [1, 32, 28, 33, 10];

 for (var i = 0; i < gl2.length; i++) {                   
  var g2 = globals.featureLayers[2].graphics[i];
  var data = findFips(g2);

  var affectedValue = (-1 != codesThatAffectLabel.indexOf(codeID))
                    ? $.formatNumber(data, { format: '#,###', locale: "us" })
                    : $.formatNumber(data, { format: '#,###.0', locale: "us" }) + "%";

  var strLabel2 = g2.attributes.NAME + ":" + affectedValue;
  var textSymbol2 = new esri.symbol.TextSymbol(strLabel2, font);
  textSymbol2.setColor(new dojo.Color([0, 0, 0]));
  var pt2 = g2.geometry.getExtent().getCenter();
  var labelPointGraphic2 = new esri.Graphic(pt2, textSymbol2);

  //add label to the map
  globals.map.graphics.add(labelPointGraphic2);
}