What is the best way for defining functions in loops? - JavaScript

Question

I want to know which way for defining functions in loops is better? I always use the first way. Is it correct? or there is another way for this case?

Please guide me, I use the first way a lot in my codes, I wonder if it is true?

$('.elements').each(function(){
  // elements
  var $t = $(this), $anotherEl = $t.find('.el2'), $anotherEl2 = $t.find('.el3');

  // variables
  var isVisble = $t.is(':visible'), isLand = $t.hasClass('.land');

  function doSomething(){
    $t.width($anotherEl.width() + $anotherEl2.width());
    // other codes ...
  }
  doSomething();
  $(window).resize(doSomething);
});

or

function doSomething(par1, par2, par3, par4){
  var $t = par1 , $anotherEl = par2, $anotherEl2 = par3;
  $t.width($anotherEl.width() + $anotherEl2.width());
  // other codes ...
}

$('.elements').each(function(){
  // elements
  var $t = $(this), $anotherEl = $t.find('.el2'), $anotherEl2 = $t.find('.el3');

  // variables
  var isVisble = $t.is(':visible'), isLand = $t.hasClass('.land');

  doSomething($t, $anotherEl, $anotherEl2, isLand);
  $(window).resize(function(){
    doSomething($t, $anotherEl, $anotherEl2, isLand);
  });
});

Thanks for advance.

I would suggest using second approach. Dynamic functions are difficult to debug. You can decide what to execute based on parameter. This way it would be scalable and maintainable. This will also give you room for custom handling. — Rajesh Dixit
– Rajesh Dixit, Commented Feb 15, 2016 at 11:15
Yes you're right Rajesh, but I think the first way is much easier! — Ali Amini
– Ali Amini, Commented Feb 15, 2016 at 11:20
In a loop it's basically lots of functions versus 1 function... so you also gain performance by not storing too much of the same in the RAM. Second approach. — SparK
– SparK, Commented Feb 15, 2016 at 11:21

Jai · Accepted Answer · 2016-02-15 11:27:02Z

3

Why doing this in loops? As this can be done without using loops like:

function doSomething(){
    $('.elements').each(function(){
         // elements
         var $t = $(this), $anotherEl = $t.find('.el2'), $anotherEl2 = $t.find('.el3');
         // variables
         var isVisble = $t.is(':visible'), isLand = $t.hasClass('.land');
         // now do something with the vars here.
    });
}

$(window).resize(doSomething).resize(); // <---trailing .resize() triggers on dom ready.

Problems i see with your approach are:

Using .each() loop defining same function again and again, executing same function and binding resize event in each iteration.
Second one seems a bit better but partially because of .resize bindings.

edited Feb 15, 2016 at 11:27

answered Feb 15, 2016 at 11:19

Jai

74.8k12 gold badges77 silver badges104 bronze badges

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

4 Comments

Ali Amini Over a year ago

Because The defined variables don't need to change.

Jai Over a year ago

@AliAmini Well i would do it as i posted because that is fine for using .each() loop but resize event should have to be outside of that loop other wise that would register resize events for each elements in the loop.

Ali Amini Over a year ago

I have to register doSomething() function for resize event. I edit my post and made a few changes in my codes. please see it. Thanks.

Jai Over a year ago

@AliAmini But that seems to me a bit redundant as variables are declared in two different scopes on in each loop and one in a function. That can be optimise.

Collectives™ on Stack Overflow

What is the best way for defining functions in loops? - JavaScript

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related