whats the difference between a function and a variable function?

[nelsonm]

hi all,

Sorry if i sound stupid, but, I' have done some reading on functions being objects and as such they can be assigned to variables and other objects or passed as variables to other functions.

I'm starting to get a grasp on how powerful this capability is. However, if all i want to do is reduce code duplication, i can encapsulate the code in a function, move it to the top of my script, then call the function with the required parameters from where the code used to be.

So is there any advantage or difference to the second and third implementations (assigning a function to a variable, then calling) in his case?

Or is assigning a function to a variable reserved for more advanced situations like establishing closures, class libraries and other things?

old school function definition and call.

function example1(p1,p2){...}

function main1(){
var p1,p2;
example1(p1,p2);
.
.
example1(p1,p2);
}

assign to variable and call
In this case, I think it makes no difference in how the functions are defined and function call can used parent function variables.

function main1(){
var p1,p2;

example1 = function(){...}
function example2(){...}

example1();
.
.
example2();
}

or
assign to variable outside of main function and call
In this case, I think it makes no difference in how the functions are defined and function call cannot use parent function variables.

example1 = function(){...}
function example2(){...}

function main1(){
var p1,p2;

example1();
.
.
example2();
}

thanks.

[edited by: nelsonm at 1:38 pm (utc) on May 31, 2012]

[Fotiman]

The 2 examples you posted are equivalent (though I think you meant to include function parameters in your second one). In JavaScript, functions are treated as first-class citizens. The end result is that these are equivalent:

// Assign anonymous function to example1
var example1 = function() {};
// Named function
function example1() {}

In both cases, example1 is treated the same. So, when would you want to assign an anonymous function to a variable? Some people prefer that syntax, but another use is something like this:

var example1 = (function () {
  var privateVar = "foo";
  return function () {alert(privateVar);};
})();

So example1 gets the result of calling the outer anonymous function which returns an anonymous function, and has access to privateVar.

[Fotiman]

Now that I replied, I could swear your post has changed from what I replied to, but I don't see an "edited" note.

function example1(p1,p2){...} 
function main1(){ 
  var p1,p2; 
  example1(p1,p2); 
  example1(p1,p2); 
}

In this example, main1 and example1 both reside in global scope.

function main1(){ 
  var p1,p2; 
  example1 = function(){...} 
  function example2(){...} 
  example1(); 
  example2(); 
}

In that example, main1 and example1 both reside in global scope (though example1 won't exist until after main1 is called). example1 is global because you've assigned to a variable without using the var declaration. example2 only resides in the scope of main1, which means that example2 couldn't be called from a function outside of main.

example1 = function(){...} 
function example2(){...} 
function main1(){ 
  var p1,p2; 
  example1(); 
  example2(); 
}

example1, example2, and main1 are all global functions. example2 can be called from inside or outside of main1.

[Fotiman]

function main1(){ 
 var p1,p2; 
 var example1 = function(){...} 
 function example2(){...} 
 example1(); 
 example2(); 
}

example1 is now defined in main1's scope, meaning example1 can only be called from within main.

[nelsonm]

Yes, sorry, i did change the original post because i thought i was not being clear.

I think you meant to include function parameters in your second one

yes, since the functions are defined outside the main function, the parent function variables would not be accessible to the called functions - correct?

[nelsonm]

Sorry, let me clarify...

var example0 = function(){...}
example1 = function(){...}
function example2(){...}

function main1(){
var p1,p2;
example0();
example1();
example2();
}

In all three example functions, they would not be able to access the main functions' local p1,p2 variables since the example functions where defined outside the scope of the main function - correct?

BTW, how do you maintain indentation in your quotes?

[Fotiman]

Correct.

And I post code examples in [quote][pre][code][/code][/pre][/quote]. :)

[nelsonm]

I didn't consider the "pre" tag.

Thanks, you are most generous with your time and expertise.

[Fotiman]

You're welcome. :)

[boost6r]

There is actually one slight difference between the two types of declarations - when declared with "var" the function is not created until the "var" statement is executed; when declared with a "function" statement the function is created at compile time. This code illustrates the difference:

try {console.log('with function: ' + a);} catch(e) {console.log('with function: ERROR');}
try {console.log('with var: ' + b)}       catch(e) {console.log('with var: ERROR');}
function a() {}
var b = function b_fn() {};
try {console.log('with function: ' + a);} catch(e) {console.log('with function: ERROR');}
try {console.log('with var: ' + b)}       catch(e) {console.log('with var: ERROR');}

This is the order in which the above code is executed:

1. the global variables "a" and "b" are created, and both assigned the value "undefined"
   
2. the function "a" is created and assigned to the global variable "a"
   
3. lines 1-2 are run
   
4. the function "b_fn" is created and assigned to the global variable "b"
   
5. lines 5-6 are run
   

The reason the variables are created first is because of something called "hoisting", which means that javascript creates every variable in a scope before executing that scope's code. This is why it's a good practice to always declare variables first - because that's where they are created anyway, so declaring them anywhere else is confusing.

Also, webmasterworld messes with the spacing in code as well. Here's a page with a bookmarklet that adds the extra tags and fixes the spacing automatically: [webmasterworld.com ].

[nelsonm]

interesting, thanks for the extra lesson and for a way around webmasterworld nuances.

[Fotiman]

@boost6r, right, that's why I said in one of my earlier examples:

(though example1 won't exist until after main1 is called)

Because example1 was not initialized (assigned) until that point.

Note, though, that there is no such thing as "compile time" in JavaScript. That is, JavaScript is not a compiled language, it is interpreted.

[boost6r]

Sorry, I only skimmed your replies. Nonetheless, I think my reply makes the various phenomena a little clearer.

You're right, "compile time" is a little misleading - I only meant to say that it happened before any of the code was executed. However, it is also true that many browsers have implemented JIT js compilers, though I'm not sure if this makes the word "interpreted" apply to the language any less.