current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

There are multiple ways to invoke a javascript function, most of the time I'm using anonymous function as it can be trigger anywhere I like.

I can't seem to understand why use the variable method instead of the anonymous function. The main disadvantage for me is because of the hoisting issue....

Can anyone explain or provide a real life example when is it appropriate to store function within a variable?

share|improve this question
2  
could you post an example of use for each case? –  njzk2 Jan 15 at 10:08
    
when you says "anonimous" function are you actually saying "self-executing anonimous" function? –  Fabrizio Calderan Jan 15 at 10:08
1  
I don't always use vars for my functions, but when I do, I give this function to more than one other function as attribute. –  Cracker0dks Jan 15 at 10:18

3 Answers 3

up vote 2 down vote accepted

If you want to use the same function in multiple places it makes sense to store it in a variable. This allows you to adhere to the DRY (Don't Repeat Yourself) principle.

Imagine we had a simple validation function:

function isPositive(val){
   return val > 0;
}

Instead of inlining this anonymous function everywhere I need to validate, it is much easier to store the function in a variable for future use.

var isPositive = function(val){  return val > 0;}

This provides me with two major benefits. First, if there is an issue in isPositive I can fix the issue at one spot and all invocations of the function will use the updated behavior. Second, it prevents me from messing up the function somewhere in the code when I'm retyping it for the 100th time.

share|improve this answer
up vote 2 down vote

If it is in a variable, I can access the function from anywhere, and as often as I want.

share|improve this answer
up vote 2 down vote

If you want to have the same action happen from multiple places. Like this maybe:

var renderPage = function() {
    // about 20 lines of render code        
}

$(window).on('resize', renderPage);
$('.my_btn').on('click', renderPage);

// render to initialize page
renderPage();

Not using variables here would turn into a mess real quick:

$(window).on('resize', function() {
    // about 20 lines of render code
));

$('.my_btn').on('click', function() {
    // about 20 lines of render code
));

// about 20 lines of render code
share|improve this answer
1  
in your sample when you call renderPage(), value of renderPage possibly undefined –  Grundy Jan 15 at 10:13
    
You are right, made edit for correctness –  donnywals Jan 15 at 10:15
    
I think it is necessary add the function declaration with the name, in which case the previous version worked :-) –  Grundy Jan 15 at 10:16

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.