need help understanding callback functions and function literals

Page 1 of 1

3 Replies - 700 Views - Last Post: 25 August 2012 - 08:01 PM

#1 jaay5389  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 22
  • Joined: 16-December 09

need help understanding callback functions and function literals

Posted 25 August 2012 - 02:29 PM

so i am on the chapter of functions and it talks about referencing functions. When do you want to call a function by reference and call a function with the parenthesis?

it also ties in with callback functions. Instead of using <body onload ="someFunction();"> , it says to use window.onload = someFunction; to separate js from html. My question is, why cant we just use window.onload = somefunction(); with parenthesis?

and this version :
window.onload = function(evt){
//function body
};

Is the first a call by function, second is call by reference and the third a call by function literal? What is the difference between the 3? Which to use when? The book says to use function literals when the function being called requires and argument, but why couldnt you just do document.getElementById("ID").onclick = someFunction(10);

it says to use:
document.getElementById("ID").onclick = function(evt) {
someFunction(10);
};


sorry if i am kind of unclear but i am unsure of how to explain it. I just dont get the difference between each method. Thank you for helping me

This post has been edited by Atli: 25 August 2012 - 02:50 PM
Reason for edit:: Please use [code] tags when posting code.


Is This A Good Question/Topic? 0
  • +

Replies To: need help understanding callback functions and function literals

#2 Atli  Icon User is online

  • D.I.C Lover
  • member icon

Reputation: 3052
  • View blog
  • Posts: 4,575
  • Joined: 08-June 10

Re: need help understanding callback functions and function literals

Posted 25 August 2012 - 03:17 PM

View Postjaay5389, on 25 August 2012 - 09:29 PM, said:

so i am on the chapter of functions and it talks about referencing functions. When do you want to call a function by reference and call a function with the parenthesis?

Essentially, you can only ever call a function by reference. All functions, when they are created, are created as objects and their position in memory is assigning to a variable. Then when you call the function, either by using the parenthesis or the .call or .apply functions, you execute the function assigned to the variable.

Consider this:
// Define a function that prints "Hello", and assign
// it to a "somefunction" variable.
function somefunction() {
    console.log("Hello, Function");
}

// The above is basically equivalent to doing this.
// This just shows better the whole "assigning to variable"
// thing I was talking about.
var somefunction = function() {
    console.log("Hello, Function");
}

// Then when you call the function, you reference it using
// the variable defined above, either by doing:
somefunction();

// Or by doing
somefunction.call(somefunction);

The same thing goes for object properties. You can create a function and assign it to a property just like you did above with the variable
// Creates an empty object
obj = {}

// Adds a function to the "someproperty" of the object.
obj.someproperty = function() {
    console.log("Hello, Object!");
}

// Now you can call this function by doing the same thing
// you did with the variable:
obj.someproperty();
obj.someproperty.call(obj);


Lastly, you don't have to assign the function directly to the property. You can essentially "copy" the location of the function in memory (which is what the variable and object property above actually contain) by assigning the variable containing the function to another variable or property.
obj.originalfunction = somefunction;

// Now the "obj.originalfunction" contains a reference to the
// "somefunction" function we defined above, and you can
// call it like so:
obj.originalfunction();         // Prints: Hello, Function
obj.originalfunction.call(obj); // Prints: Hello, Function


View Postjaay5389, on 25 August 2012 - 09:29 PM, said:

it also ties in with callback functions. Instead of using <body onload ="someFunction();"> , it says to use window.onload = someFunction; to separate js from html. My question is, why cant we just use window.onload = somefunction(); with parenthesis?

Because if you do window.onload = somefunction() you aren't assigning the function to the onload property, you are executing the function and assigning it's return value to the onload property.

Picture this:
function whenLoaded() {
    document.getElementById("output").innerHTML = "Window loaded!";
    return 42;
}

window.onload = whenLoaded();

What I did there was execute the whenLoaded function which meditatively changed the innerHTML of the "output" element, and assigned 42 to the window.onload property.

But if I do this:
window.onload = whenLoaded;

I am assigning the whenLoaded function to the window.onload property, which the browser will then execute when the window loads.
Was This Post Helpful? 3
  • +
  • -

#3 jaay5389  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 22
  • Joined: 16-December 09

Re: need help understanding callback functions and function literals

Posted 25 August 2012 - 05:44 PM

Ahh ok. Thank you very much! You explained that so clearly and understandable for me. Now that i understand that, another question arose. If window.onload = someFunction(); assigns the return value to window.onload, Then why does <body onload= "someFunction();"> work? Is it because it is part of the HTML and has a different set of execution rules? Maybe since it is in the HTML, it calls the someFunction(); instead of assigning it?
Was This Post Helpful? 0
  • +
  • -

#4 Atli  Icon User is online

  • D.I.C Lover
  • member icon

Reputation: 3052
  • View blog
  • Posts: 4,575
  • Joined: 08-June 10

Re: need help understanding callback functions and function literals

Posted 25 August 2012 - 08:01 PM

Yes, these old HTML event attributes don't fire immediately. When the browser finds them it just saves them as strings and waits for the events to fire. Then it evaluates the string and executes it as Javascript.

You can sort of think of this: <body onload="somefunction();"> like putting this in the <head> section.
<script type="text/javascript">
// The "code" to execute is saved as a string.
var onloadCode = "somefunction();"

// And evaluated when the event fires.
window.onload = function() {
    eval(onloadCode);
}
</script>

Well, not exactly, but that's a good way to think about it.

You should try to avoid using HTML event attributes as much as possible. The less Javascript and CSS there is in the HTML markup, the better. - Libraries like jQuery can really help with things like this. Old versions of IE handle events differently than modern browsers, so keeping Javascript code cross-browser compatible can be a chore. jQuery abstracts all that away and provides clean and simple way to handle events that works in all browsers.
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1