Returning Values From Functions

[QuakeLive]

 

This is code that’s been used many times over in this book:

 

window.onload = init;

 

That code assigns to the onload property of the window object the value of the init variable, which is to say the init() function definition.

 

Note that the code does not invoke the function—it’s lacking the invocation parentheses:

 

window.onload = init(); // No!

 

Doing the above would call the init() function and assign the value returned by it to the window.onload property, which is not the intent.

 

 

Hi,

 

I have one question about this. In the book it is written that "Doing the above would call the init() function and assign the value returned by it to the window.onload property, which is not the intent."

 

 

 

 

Let's say that somewhere in JavaScript exsist the following code:

 

var init = function() {

//some code

return something;

}

 

Here, a function definition is a value assigned to a variable. Now, we have:

 

window.onload = init;

 

and that code assigns to the onload property of the window object the value of the init variable.

 

OK. Let's suppose that there exists the following function which does the same

 

function init() {

//some code

return something;

}

 

In this case, it would be the same to use:

 

window.onload = init;

AND

window.onload = init();

 

But in reality, this is not the case, there is no init() function, there is only init variable so it isn't the same. Am I right?

[QuakeLive]

Ok, as I read the book, some things have changed, but there is still a problem.

 

As for the example in my previous post, if there is ONLY

 

function init() {

//some code

return something;

}

 

that does not mean that window.onload = init; would be wrong and cause some error, because for every function we can use identifier which is different from a function call. 

But, now, I do not understand what is the difference between identifier and a function call. I know that when you say:

 

window.onload = init();

 

you actually called the init() function, and that's ok, BUT I do not understand what happens when you use  function identifier:

 

window.onload = init;

 

if with this line I did not call a function which will do something,  then what I actually did???

[HartleySan]

QuakeLive, I think you are misunderstanding some things (but I'm honestly not sure because I'm having trouble understanding your two posts).

 

Anyway, here's the basic explanation of event handling:

1) onload is a property of the window object. It's a special property though in that when the load event occurs for the window object, the function assigned to the onload property is called. Any property that is called whenever a certain event occurs is called an event handler (or event listener). For details on when the load event for the window object fires, please see the following:

https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers.onload

 

2) You have to assign a function to an event handler property. If you don't, when the corresponding event occurs, either an error will occur or the event handler will silently fail, and nothing will happen.

 

3) The word "function" above refers to a function reference, not a function call. This distinction is very important to make because assigning a function call to the event handler actually causes the function assigned to the handler to be called immediately, and then assign the value returned by the function call to the event handler. Please note that if a function does not explicitly return a value, then undefined is implicitly returned.

 

4) By the rationale in #3, unless a function call returns a function reference, then assigning a function call to an event handler will not work. Again, please remember that at the end of the day, you have to assign a function reference to an event handler. And really, all a function reference is is something that says, "Call function xyz when the event occurs." The function reference simply tells JavaScript what code to execute when the event occurs.

 

In your example, you could assign init() (with parentheses) to window.onload if the init function returns a function reference. For example:

function init() {
  return function () {
    setUpEverythingForThePage();
  };
}

window.onload = init();

While the above is completely legit, it's overly confusing syntactically and completely unnecessary. The following would achieve exactly the same thing:

function init() {
  setUpEverythingForThePage();
}

window.onload = init;

As such, in most cases, it makes more sense to assign a function reference, and not a function call to an event handler.

I hope that helps. If there's still any confusion, please let us know.

Thanks.

[QuakeLive]

HartleySan, THANK YOU SO MUCH!

 

I still haven't started reading part of the book that relates to event handling, the last chapter that I read is Returning Values From Functions...

 

But your post explains the difference between

 

object.property = functionReference;

and

object.property = functionCall();

 

If I understood well, this is the point:

 

- assigning a function call to the event handler actually causes the function assigned to the handler to be called immediately, and then assign the value returned by the function call to the event handler.

 

- all a function reference is is something that says, "Call function xyz when the event occurs."

 

 

Actually, as it is written in the book - with function reference a function definition can be a value assigned to a variable (object property)...

 

All this is well explained in the book.

 

The reason I got confused and I did not pay enough attention is because of the following example:

 

(this is from book)

 

When I tried to test - function definition was not returned when called function reference (don't know why?):

 

(only "function()" is returned)

 

 

 

Anyway, the point is that with function reference a function definition will be returned (and assigned... ), and with function call - the value returned by the function will be assigned...

 

THANK YOU AGAIN, HartleySan!

[HartleySan]

No problem. In testing the getTwo code in the Chrome DevTools console, I see the same output as the book.

What browser are you using in which you see just function() for getTwo?

[QuakeLive]

No problem. In testing the getTwo code in the Chrome DevTools console, I see the same output as the book.

What browser are you using in which you see just function() for getTwo?

 

Probably the "problem" is browser or firebug:

 

 

 

 

[HartleySan]

If that's the case, then I wouldn't worry about it too much.

Maybe try the same thing in Chrome DevTools to ensure you get the same thing as the book, and if so, don't worry about it, as it won't affect your code.

Thanks for researching that.