How to refactor duplicate code in a closure in Angularjs?

Question

We are using Angularjs 1x and I'm trying to refactor some duplicate code in an Angularjs filter, but I'm having problems getting it right. Should be very simple.

We have a standard structure for using filters using an Anonymous self-executing function, something along the lines of the code below. I have some if/else blocks with duplicate code in a for loop and I wanted to create a function that would eliminate that duplication, however, I can't seem to call the function properly. How would I go about doing this?

(function() {
  //Named function
  function abc(Input){
    return function(value){
      for(var i=0; i<3; i++){
        if(w){
            //Duplicate code here
         } else if(x){
            //Duplicate code here
         } else if(y){
            //Duplicate code here
         } else if(z)
       }
     }
  }
}
))();

Here is something similar to the duplicate code and it's the exact same duplicate code in each block. We have a special service to handle labels.

if(Input[i].fpwInd === 'Y' && fpw.plan === 'State') {
    fpwValues.push(weblService.returnLabel("yes", $rootScope.label));
    break;
}else if(Input[i].fpwInd === 'N' && fpw.plan === 'Another State') {
    fpwValues.push(weblService.returnLabel("no", $rootScope.label));
    break;
}

This is something like the final code that worked:

(function() {

  var fwp = function(input, plan){
    if(input == "value" && plan == "somevalue")
    fpwValues.push(weblService.returnLabel("yes", $rootScope.label));
    //rest of the if/else code here...
};  

  function abc(){
    return function(value){
      for(var i=0; i<3; i++){
        if(w){
            fwp(input, plan);
            break;
         } else if(x){
            fwp(input, plan);
            break;
         } else if(y){
            fwp(input, plan);
            break;
         } else if(z)
       }
     }
  }
}
))();

Can you show the duplicate code? It's important to see what it takes from outer scope. — Dmitri Pavlutin
– Dmitri Pavlutin, Commented May 11, 2016 at 13:38
@James as Dmitri said it is necessary that you show us the real code. For what you are writing it would be possible to do the following if (w || x || y || z) { // duplicate code } — Davide Lorenzo MARINO
– Davide Lorenzo MARINO, Commented May 11, 2016 at 13:45
It's proprietary, but I put something similar to what is there in my edit. I'm trying to balance giving enough information to help without revealing the actual code. — James-Jesse Drinkard
– James-Jesse Drinkard, Commented May 11, 2016 at 13:49

Ant Kennedy · Accepted Answer · 2016-05-11 14:29:11Z

1

Taking your second example as the basis could you do something like this?

If you could give more info though it would be a great help - why can't you call the function properly? are you getting any errors?

(function() {
function getLabelStrForIndPlan(ind, plan) {
  if (ind === 'Y' && plan === 'State') {
    return 'yes';
  }
  else if (ind === 'N' && plan === 'Another State') {
    return 'no';
  }
}

function abc(Input){
  return function(value){
    for(var i=0; i<3; i++){
      var fpwInd = Input[i].fpwInd;
      var label = getLabelStrForIndPlan(fpwInd, fpw.plan);

      if (label) {
        fpwValues.push(weblService.returnLabel(label, $rootScope.label));
        break;
      }
    }
  }
}
})();

answered May 11, 2016 at 14:29

Ant Kennedy

1,2407 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

James-Jesse Drinkard Over a year ago

Scope errors was the issue. I wasn't able to call my function because the way I was calling it wasn't right and my function wasn't visible inside function abc. I'll try something like this and see if that works.

James-Jesse Drinkard Over a year ago

I modified the code from user1136560 somewhat, but he got me thinking along the right path to come up with a working solution. Still some duplicated code, but it's reduced.

Collectives™ on Stack Overflow

How to refactor duplicate code in a closure in Angularjs?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related